1. 此篇文章讲解目录：

• 案例和由此案例重点讲解的知识点介绍

• 案例代码实现

  

• html表格标签知识点详解

2. 案例和相关知识点介绍

此案例是页面，效果如下：

此页面的技术实现解析：

第一行的表头使用thead来定义

后面两个表格，可以使用两个tbody来完成，表格的合并使用rowspan和colspan来实现表格合并

此案例中主要用到了table表中的thead和tbody，基于此，我们会系统的将如下知识点全部讲解：

• table表格

• th、tr、td标签

• caption标签

• thead、tbody、tfoot

3. 此案例的代码实现

第一步：通用全局样式定义

第二步：表格头html编写

第三步：表格头样式的编写

第四步：表格以及表格合并的html编写

第五步：商品部分样式

第六步：商品其它列样式

4. 此案例的知识点详解

（1）Html 表格

?在HTML语言中，表格至少由<TABLE>标签、<TR>标签和<TD>标签这3对标签组成

（2）表格(table)

1）<table>

?<table>...</table>标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格，用<td>...</td>标签定义。

2）<tr>

?表格行用<tr>标签定义，由单元格构成。多个行结合在一起就构成一个表格，这反映在用于创建表格的HTML语法中。表格的每一行都用<tr>标签表示，并用相应的</tr> 结束

3）<td>

?表格的每一行又有若干表格单元格，用<td>...</td>标签表示。TD是"表格数据( Table Data)”的英文缩写。<td>标签定义一个列，嵌套于<tr>标签内。

?border属性是最常用的属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。

（3）创建表格的基本语法：

<table>

<tr>

<td> 单元格内容 </td>

</tr>

</table>

?创建表格时，一般情况下分3步：

?第一步：创建表格标签< table>…</table>。

?第二步：在表格标签table>…</table>里创建行标签<tr>...</tr>，可以有多行。

?第三步：在行标签<tr>...</tr>里创建单元格标签<td>...</td>，可以有多个单元格。

（4）表格的属性：填充属性和间距属性

?表格中的属性

?caption 元素定义表格标题

?caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

（5）<th>标记及其属性

?表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。

（6）表格的结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体 如下所示：

<thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。

<tfoot></ tfoot >：用于定义表格的页脚，位于<table></table>标记中<thead></thead>标记之后，一般包含网页底部的企业信息等。

<tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<tfoot></ tfoot >标记之后，一般包含网页中除头部和底部之外的其他内容。

大家好接下来我们会以连载的方式，并且结合京东商城的门户，系统讲解html的专业知识，欢迎大家关注头条号“互联网IT技术”。