HTML表格

表格

表格的定义：

<table border="1px" cellspacing="0"> -----------table表示定义表格， border属性表示设置表格的边框宽度为1px， cellspacing表示每个单元格与单元格之间的距离，0表示没有距离，如果不设置cellspacing属性则默认值为1。

<tr> ------------定义表格的一行

<td>第1行第1列</td> ---------定义一个单元格

<td>第1行第2列</td>

<td>第1行第3列</td>

</tr>

<tr>

<td>第2行第1列</td>

<td>第2行第2列</td>

<td>第2行第3列</td>

</tr>

</table>

table的属性：

border: 设置边框的宽度

cellspacing:单元格的间距，默认为1

align: 用来控制水平位置 left-左对齐（默认为left） center-居中 right-右对齐

• align出现在table标签中：将整个表格居中（在表格的父标签中居中）
• align出现在tr标签中：将该行的所有单元格的文字居中
• align出现在td标签中：将该单元格的文字居中

valign: 用来控制垂直方向位置 top-向上对齐 middle-居中（默认middle） bottom-向下对齐

表格每列的宽度

表格每列的宽度取每列表格设置的最大值，一般在表格中的第一行表格中设置，即表格标签内第一个<tr>标签内的<td>内去设置，后面的所有<td>单元格的宽度自动跟随本列第一个<td>的宽度。

表格的合并：

colspan : 跨列合并 赋值方式为数字，代表跨几列

rowspan : 跨行合并 赋值方式为数字，代表跨几行

表格合并示例

合并前代码：

<table border="1px" cellspacing="0" width="500px">

<tr>

<td>第1行第1列</td>

<td>第1行第2列</td>

<td>第1行第3列</td>

</tr>

<tr>

<td>第2行第1列</td>

<td>第2行第2列</td>

<td>第2行第3列</td>

</tr>

<tr>

<td>第3行第1列</td>

<td>第3行第2列</td>

<td>第3行第3列</td>

</tr>

</table>

现要求把以下四个单元格两两合并

合并之后的代码：

<table border="1px" cellspacing="0" width="500px">

<tr align="center">

<td colspan="2">第1行第1列</td> -------要跨列合并（横排）的单元格的第一个td标签里添加 colspan属性，值为要合并的单元格个数。

<!--<td>第1行第2列</td>--> ----------删除被合并的原始的单元格

<td>第1行第3列</td>

</tr>

<tr align="center">

<td>第2行第1列</td>

<td>第2行第2列</td>

<td rowspan="2">第2行第3列</td> ---------要跨行合并（竖排）的单元格的第一个td标签里添加 rowspan属性，值为要合并的单元格个数。

</tr>

<tr align="center">

<td>第3行第1列</td>

<td>第3行第2列</td>

<!--<td>第3行第3列</td>--> ----------删除被合并的原始单元格

</tr>

</table>

合并之后的样子