简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 利用html标签绘制表格实战：商品信息表
Blogger Information
Blog 8
fans 1
comment 0
visits 6716
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
利用html标签绘制表格实战：商品信息表
JOAblog
Original
2323 people have browsed it

嘿嘿，今天是上课的第二天，小JOA又get到了新知识

今天我的任务就是利用所学的html标签绘制一个表格

首先看一下我们想要的效果是什么样的：

第一步对表进行分析

这里JOA把这一个表分为了7行7列
第一行为表头，也就是我们的 thead
第二行至第八行为我们的第一个内容，也就是tbody
第九行就是我们的表尾tfoot

第二步把基础表格首先绘制好，也就是绘制7行7列

为了方便学习，我们给table加了一个css属性border="1"

效果图：

代码实现：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>商品信息表</title>
  8.   </head>
  9.   <body>
  10.     <table border="1">
  11.        <thead>
  12.         <tr>
  13.           <th></th>
  14.           <th></th>
  15.           <th></th>
  16.           <th></th>
  17.           <th></th>
  18.           <th></th>
  19.           <th></th>
  20.         </tr>
  21.       </thead>
  22.       <tbody>
  23.         <tr>
  24.           <th></th>
  25.           <th></th>
  26.           <th></th>
  27.           <th></th>
  28.           <th></th>
  29.           <th></th>
  30.           <th></th>
  31.         </tr>
  32.         <tr>
  33.           <th></th>
  34.           <th></th>
  35.           <th></th>
  36.           <th></th>
  37.           <th></th>
  38.           <th></th>
  39.           <th></th>
  40.         </tr>
  41.         <tr>
  42.           <th></th>
  43.           <th></th>
  44.           <th></th>
  45.           <th></th>
  46.           <th></th>
  47.           <th></th>
  48.           <th></th>
  49.         </tr>
  50.         <tr>
  51.           <th></th>
  52.           <th></th>
  53.           <th></th>
  54.           <th></th>
  55.           <th></th>
  56.           <th></th>
  57.           <th></th>
  58.         </tr>
  59.         <tr>
  60.           <th></th>
  61.           <th></th>
  62.           <th></th>
  63.           <th></th>
  64.           <th></th>
  65.           <th></th>
  66.           <th></th>
  67.         </tr>
  68.       </tbody>
  69.       <tfoot>
  70.         <tr>
  71.           <th></th>
  72.           <th></th>
  73.           <th></th>
  74.           <th></th>
  75.           <th></th>
  76.           <th></th>
  77.           <th></th>
  78.         </tr>
  79.       </tfoot>
  80.     </table>
  81.   </body>
  82. </html>

第三步把内容填入表格看一下效果

效果图：

代码实现：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>商品信息表</title>
  8.   </head>
  9.   <body>
  10.     <table border="1">
  11.       <thead>
  12.         <tr>
  13.           <th>商品信息表</th>
  14.           <th>商品信息表</th>
  15.           <th>商品信息表</th>
  16.           <th>商品信息表</th>
  17.           <th>商品信息表</th>
  18.           <th>商品信息表</th>
  19.           <th>商品信息表</th>
  20.         </tr>
  21.       </thead>
  22.       <tbody>
  23.         <tr>
  24.           <th>ID</th>
  25.           <th>品类</th>
  26.           <th>品名</th>
  27.           <th>价格</th>
  28.           <th>价格</th>
  29.           <th>数量</th>
  30.           <th>数量</th>
  31.         </tr>
  32.         <tr>
  33.           <th>1</th>
  34.           <th>水果</th>
  35.           <th>苹果</th>
  36.           <th>10</th>
  37.           <th>10</th>
  38.           <th>20</th>
  39.           <th>20</th>
  40.         </tr>
  41.         <tr>
  42.           <th>2</th>
  43.           <th>水果</th>
  44.           <th>香蕉</th>
  45.           <th>30</th>
  46.           <th>30</th>
  47.           <th>40</th>
  48.           <th>40</th>
  49.         </tr>
  50.         <tr>
  51.           <th>3</th>
  52.           <th>蔬菜</th>
  53.           <th>大白菜</th>
  54.           <th>50</th>
  55.           <th>50</th>
  56.           <th>60</th>
  57.           <th>60</th>
  58.         </tr>
  59.         <tr>
  60.           <th>4</th>
  61.           <th>蔬菜</th>
  62.           <th>小青菜</th>
  63.           <th>70</th>
  64.           <th>70</th>
  65.           <th>80</th>
  66.           <th>80</th>
  67.         </tr>
  68.       </tbody>
  69.       <tfoot>
  70.         <tr>
  71.           <th>空白</th>
  72.           <th>空白</th>
  73.           <th>空白</th>
  74.           <th>总价</th>
  75.           <th>160</th>
  76.           <th>总数</th>
  77.           <th>200</th>
  78.         </tr>
  79.       </tfoot>
  80.     </table>
  81.   </body>
  82. </html>

第四步把相同内容的表格进行合并完成绘制

这里我们需要用到css的样式colspan(行合并)和rowspan(列合并),并且把合并后多余的行和列删除即可。

效果图：

代码实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>商品信息表</title>
  8.   </head>
  9.   <body>
  10.     <table border="1">
  11.       <thead>
  12.         <tr>
  13.           <th colspan="7">商品信息表</th>
  14.         </tr>
  15.       </thead>
  16.       <tbody>
  17.         <tr>
  18.           <th>ID</th>
  19.           <th>品类</th>
  20.           <th>品名</th>
  21.           <th colspan="2">价格</th>
  23.           <th colspan="2">数量</th>
  24.         </tr>
  25.         <tr>
  26.           <th>1</th>
  27.           <th rowspan="2">水果</th>
  28.           <th>苹果</th>
  29.           <th colspan="2">10</th>
  31.           <th colspan="2">20</th>
  32.         </tr>
  33.         <tr>
  34.           <th>2</th>
  36.           <th>香蕉</th>
  37.           <th colspan="2">30</th>
  39.           <th colspan="2">40</th>
  40.         </tr>
  41.         <tr>
  42.           <th>3</th>
  43.           <th rowspan="2">蔬菜</th>
  44.           <th>大白菜</th>
  45.           <th colspan="2">50</th>
  47.           <th colspan="2">60</th>
  48.         </tr>
  49.         <tr>
  50.           <th>4</th>
  52.           <th>小青菜</th>
  53.           <th colspan="2">70</th>
  55.           <th colspan="2">80</th>
  56.         </tr>
  57.       </tbody>
  58.       <tfoot>
  59.         <tr>
  60.           <th colspan="3">JOA小超市</th>
  61.           <th>总价</th>
  62.           <th>160</th>
  63.           <th>总数</th>
  64.           <th>200</th>
  65.         </tr>
  66.       </tfoot>
  67.     </table>
  68.   </body>
  69. </html>

当然啦，这里JOA用的都是th标签，大家不喜欢加粗显示的就用td标签即可

文章到这里就技术了，虽然有点丑，但是后面学习了更多知识之后就可以美化更漂亮啦~
加油~ヾ(◍°∇°◍)ﾉﾞJOA

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！