表格标签
1、表格基础
表格主要有三个标签组成
table英文:table,作用是定义了一个表格的结构
tr英文是table rows作用定义了表格的行
td英文是table dock作用是定义表格的单元格
关系:table>tr>td
案例:三行四列表格
<table border="1" style="border-collapse:collapse">
<tr>
<td>第1行,第1列</td>
<td>第1行,第2列</td>
<td>第1行,第3列</td>
<td>第1行,第4列</td>
</tr>
<tr>
<td>第2行,第1列</td>
<td>第2行,第2列</td>
<td>第2行,第3列</td>
<td>第2行,第4列</td>
</tr>
<tr>
<td>第3行,第1列</td>
<td>第3行,第2列</td>
<td>第3行,第3列</td>
<td>第3行,第4列</td>
</tr>
</table>
table标签上有两个属性,一个是border=“1”,这个属性是用来设置表格的边框的,如果没有这个属性,边框不显示,第二个属性style="border-collapse:collapse"是css样式,作用就是合并表格
如果表格需要设置表头,可以使用tr>th设置
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
<th>第5列</th>
</tr>
2、单元格合并
一部分单元格需要进行跨行跨列合并,可以给对应的td和th标签设置相关属性
rowspan: 上下跨行合并
colspan:左右跨列合并
属性值是数字,数字是几就代表跨几行或者跨几列
案例:
步骤:
-
确定一行有多少td
-
然后我们再看一共有几行
-
观察哪个单元格有合并,设置对应属性
案例:
<table border="1" style="border-collapse: collapse;">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="3">3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan="2">9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td colspan="2">13</td>
<td rowspan="2">14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td colspan="2">18</td>
</tr>
</table>
3、表格分区
一个完整的表格主要包含三个部分:表格标题、表格表头、表格的主题
一个table内部实际还有三个分区标签组成
caption: 定义表格的主题
thead: 定义表格的头部,内部嵌套tr>th
tbody: 定义表格主题,内部嵌套tr>td
![6-4](d:\桌面\网络安全\html\img\6-4.jpg)<table border="1">
<!-- 主题分区 -->
<caption>各地区资产投资情况</caption>
<!-- 表头分区 -->
<thead>
<tr>
<th rowspan="2">地区</th>
<th colspan="2">按总量分</th>
<th colspan="2">按比重分</th>
</tr>
<tr>
<th>自年初累计(亿元)</th>
<th>去年同期增长(%)</th>
<th>自年初累计(%)</th>
<th>自年同期(%)</th>
</tr>
</thead>
<!-- 主体分区 -->
<tbody>
<tr>
<td>全国</td>
<td>234234</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>234234</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>234234</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>234234</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>234234</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
</tbody>
</table>