三.表格标签
1.创建表格
标签 | 描述 |
---|---|
table | 表格标签 |
tr | 行标签 |
td | 单元格标签 |
语法
<table border="1">
<tr>
<td>单元格内文字</td>
<td>单元格内文字</td>
</tr>
<tr>
<td>单元格内文字</td>
<td>单元格内文字</td>
</tr>
</table>
为了显示表格的轮廓,通过border属性来设置表格边框的宽度
2.创建不规则表格
表格可以实现行列合并,只需要在td标签中加入colspan或rowspan属性。colspan表示跨越的列数,rowspan表示跨越的行数。
①.跨列
跨列是指单元格的横向合并,实现单元格在水平方向上跨多列。
语法
<table>
<tr>
<td colspan="所跨的列数">单元格内容</td>
</tr>
</table>
示例
<table border="1">
<tr>
<td colspan="2">单元格内文字</td>
<td>单元格内文字</td>
</tr>
<tr>
<td>单元格内文字</td>
<td>单元格内文字</td>
<td>单元格内文字</td>
</tr>
②.跨行
单元格除了可以在水平方向上跨列,还可以在垂直方向上跨列,跨行是指单元格在垂直方向上合并
语法
<table>
<tr>
<td rowspan="所跨的列数">单元格内容</td>
</tr>
</table>
示例
<table border="1">
<tr>
<td rowspan="2">单元格内文字</td>
<td>单元格内文字</td>
</tr>
<tr>
<td>单元格内文字</td>
</tr>
</table>
③.跨行跨列
<table border="1">
<tr>
<td rowspan="2">单元格内文字</td>
<td>单元格内文字</td>
<td>单元格内文字</td>
</tr>
<tr>
<td colspan="2">单元格内文字</td>
</tr>
</table>