表格标签
表格标签主要由下面三个标签组成
<table>
<tr>
<td>
</td>
</tr>
</table>
<table></table>代表着整个表格,而<tr></tr>表示一行,有多少个tr标签就代表有多少行。ty标签里的<td></td>表示行内的一个格子,一个ty标签里有多少个td标签就说明一行里有多少个格子。
也可以理解成一个表格由n行(n个<ty>标签)n列(一行内的n个<td>标签)组成。
例如
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
<tr>
<td>三行一列</td>
<td>三行二列</td>
<td>三行三列</td>
</tr>
</table>
</body>
表格属性
HTML表格也有一些属性来美化表格,不过美化的属性我们一般用CSS来实现,所以这个只要了解一部分就行。
属性
align: left center right 设定表格和字体靠左、居中或靠右排序
border: 整数 px
cellpadding:内容与单元格之间的距离
cellspacing:单元格与单元格之间的距离
width:设定表格宽度
bgcolor:设定表格背景色colspan 跨列合并
rowspan 跨行合并
这里主要重点是合并表格属性
不管是跨行还是跨列合并,都在要合并格子的第一个格子添加属性,并把其他的格子删掉。
跨列合并
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">一行一列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
<tr>
<td>三行一列</td>
<td>三行二列</td>
<td>三行三列</td>
</tr>
</table>
</body>
跨行合并
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">一行一列</td>
<!-- <td>一行二列</td> -->
<td>一行三列</td>
</tr>
<tr>
<td rowspan="2">二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
<tr>
<!-- <td>三行一列</td> -->
<td>三行二列</td>
<td>三行三列</td>
</tr>
</table>
</body>