表格的主要作用
- 表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理
- 表格不是用来布局页面的,而是用来展示数据的。
表格的具体用法:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<table> </table>是用于定义表格的标签。<tr> </tr>标签用于定义表格中的行,必须嵌套在<table> </table>标签中。<td> </td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。- 字母 td 指表格数据(table data),即数据单元格的内容。
<th>标签表示 HTML 表格的表头部分(table head 的缩写)- 表头单元格也是单元格,常用于表格第一行突出重要性,表头单元格里面的文字会加粗居中
表格属性:
表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置.

表格结构标签:
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分.
<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。 一般是位于第一行。<tbody></tbody>:用于定义表格的主体,主要用于放数据本体 。- 以上标签都是放在
<table></table>标签中。
合并单元格:
特殊情况下,可以把多个单元格合并为一个单元格
合并单元格方式:
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"
合并单元格三步骤:
- 先确定是跨行还是跨列合并。
- 找到目标单元格. 写上合并方式 = 合并的单元格数量。
- 比如:
<td colspan=“2”></td>,删除多余的单元格。
表格总结
表格学习整体可以分为三大部分:
表格的相关标签:table thead body tr th td
表格的相关属性:cellspacing cellpadding width height border
合并单元格:rowspan collspan