HTML-表格标签的使用

一、表格标签

表格是一种组织整理数据的手段，在HTML当中表格使用<table> 标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1、标记说明

表格标记：<table></table>标记表示整个表格。<table>标记中有很多属性，例如 width 属性用来设置表格的宽度，border 属性用来设置表格的边框，align 属性用来设置表格的对齐方式，cellspacing是表格里单元格之间的距离， cellpadding是表格里单元格内的空白部分。

标题标记：<caption>标题标记，给表格设置标题

表格行标记：<tr>标记表示表格中的一行。嵌套在<table>标记中使用，该标记也具有 algin、background 等属性。

表头标记：表格的表头使用 <th> 标签进行定义，在浏览器中会显示为粗体居中的文本

单元格标记：<td>单元格标记，又称为列标记，一个<tr>标记中可以嵌套若干个<td>标记。该标记也具有 algin、background、valign 等属性。

1.1利用表格标签形成一个简单的表格

页面展示：

2、单元格的合并

通过colspan和rowspan属性，实现单元格跨行以及跨列的操作。

2.1colspan实现单元格跨列

在<th>或者<td>中添加colspan="2",可以合并两列单元格，colspan后填写的值指的是合并单元格的列数。

页面效果：

2.2rowspan实现单元格跨行

在<th>或者<td>中添加rowspan="2",可以合并两行单元格，rowspan后填写的值指的是合并单元格的行数。

页面效果：