表格的基本使用:
表格标签:
标签 | 意义 |
---|---|
<table> | 创建表格 |
<tr> | 表格的行数 |
<td> | 表格的列数,每行的单元格 |
border | 表格的边框属性,如若没有赋值表格没有边框 |
<caption> | 表格的标题,宽度和表格的大小一样 |
<th> | 标题小格,可以替代<td>标签 |
<!-- 表格标签 -->
<table border="1">
<caption>这是表格的标题</caption>
<tr>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
<th>第四季度</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
</table>
显示效果:
单元格合并:
单元格的行合并、列合并、行列同时合并
属性 | 意义 |
---|---|
colspan | 设置td和th的列宽度:列跨多少个单元格 |
rowspan | 设置td和th的横宽度:横跨多少个单元格 |
<!-- 表格标签 -->
<table border="1">
<caption>这是表格的标题</caption>
<tr>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
<th>第四季度</th>
</tr>
<tr>
<td colspan="2">A</td>
<td colspan="2">B</td>
</tr>
<tr>
<td rowspan="2">C</td>
<td>D</td>
<td rowspan="2" colspan="2">E</td>
</tr>
<tr>
<td>F</td>
</tr>
</table>
表格的其他特性:
标签 | 意义 |
---|---|
<thead> | 定义表头,可以包括多个tr,把表头内容包起来便于代码编写 |
<tbody> | 定义核心内容 |
<tfoot> | 定义表脚,汇总行 |
属性 | 意义 |
cellspacing | 两个单元格之间的距离(已废弃,但也能生效,被css替代) |
cellpadding | 内容和边框之间的距离(已废弃,但也能生效,被css替代) |
虽然被被废弃,但是也可以在实际开发中使用
<!-- 表格标签 -->
<table border="1">
<caption>这是表格的标题</caption>
<thead>
<tr>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
<th>第四季度</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">A</td>
<td colspan="2">B</td>
</tr>
<tr>
<td rowspan="2">C</td>
<td>D</td>
<td rowspan="2" colspan="2">E</td>
</tr>
<tr>
<td>F</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">汇总</td>
</tr>
</tfoot>