外观
表格标签
约 518 字大约 2 分钟
2024-10-02
网页中的表格与Excel表格类似, 用来展示数据.
标签名: table, tr, td, th双标签.
table: 表格.
tr: 行.
th: 表头单元格.
td: 内容单元格.
<table>
<tr>
<th>表头A</th>
<th>表头B</th>
<th>表头C</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</table>属性:
border- 边框线宽度, 数值, 没有单位.
其他标签名
thead: 表格头部.
tboby: 表格主体.
tfoot: 表格底部.
用途: 让表格结构更清晰, 方便CSS定位.
<table>
<thead>
<tr>
<th>表头A</th>
<th>表头B</th>
<th>表头C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>A结尾</td>
<td>B结尾</td>
<td>C结尾</td>
</tr>
</tfoot>
</table>合并单元格
作用: 将多个单元格合并成一个单元格, 以合并同类信息.
步骤
- 明确合并的目标.
- 保留最右上角的单元格, 添加属性.
- 跨行合并, 保留最上单元格.
- 跨列合并, 保留最左单元格.
- 删除其他单元格.
跨行合并
rowspan合并格数数值.
<table border="1">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td rowspan="2">B2</td>
<td>C2</td>
<td>D2</td>
</tr>
<tr>
<td>A3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</table>跨列合并
colspan合并格数数值.
<table border="1">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td colspan="2">B2</td>
<td>D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</table>综合
<table border="1">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td colspan="2" rowspan="2">B2</td>
<td>D2</td>
</tr>
<tr>
<td>A3</td>
<td>D3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</table>版权所有
版权归属：洱海