表格
我们可以通过<table>标签来定义一个表格,每个表格可以根据<tr> 标签的个数来生成相应数量的行的表格,而表格中的每一行可以用<td> 标签来划分为单元格,因此,表格的建立逻辑是先建立行,在建立列,列的建立是基于分割单一行来实现的,因此代码结构为:
<!--其中border为设置表格边框的宽度-->
<table border="1" width="50%" >
<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>
运行结果:
灵活利用<tr>和<td>标签可以建立若干行列的表格,如果想要建立不同大小、形状的表格,就要用到表格中的行合并以及列合并。
行合并是将同一列当中不同的行合并起来,所用的操作语句为rowspan。效果如下:
单元格1 | 单元格2 |
单元格3 | |
单元格4 |
列合并是将同一行当中不同的列合并起来,所用的操作语句为colspan。效果如下:
单元格1 | 单元格2 | |
单元格3 | 单元格4 | 单元格5 |
实例:
<table border="1" width="50%" >
<tr>
<td rowspan="2">1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
运行结果:
其余表格标签如下:
表格标签
表格 | 描述 |
---|---|
<table> | 定义表格 |
<caption> | 定义表格标题。 |
<th> | 定义表格的表头。 |
<tr> | 定义表格的行。 |
<td> | 定义表格单元。 |
<thead> | 定义表格的页眉。 |
<tbody> | 定义表格的主体。 |
<tfoot> | 定义表格的页脚。 |
<col> | 定义用于表格列的属性。 |
<colgroup> | 定义表格列的组。 |