课程名称:前端工程师2022版
课程章节:表格标签
课程讲师: elex
课程内容:
table、tr、td和th标签的正确使用实现单元格的合并
caption、thead、tbody、tfoot标签的正确使用
<thead>、<tbody>、<tfoot>标签
<thead>标签定义表头
<tbody>标签定义表核心内容
<tfoot>标签定义表脚,通常是汇总行
cellspacing、cellpadding属性
1、cellpadding属性定义了表格单元的内容和边框之间的空间,已经废弃,使用CSS替代它
2、cellspacing属性(使用百分比或像素)定义了两个单元格之间的空间的大小,已废弃,使用CSS替代
<table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
<caption>表格标题</caption>
<tr bgcolor="pink" align="center">
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</table>
<h1>表格合并</h1>
<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2">F</td>
<td colspan="2" rowspan="3">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
</table>
<h1>表格其他标签</h1>
<table border="1">
<!-- 表头 -->
<thead>
<tr align="center">
<th></th>
<th colspan="2">11111</th>
<th colspan="2">22222</th>
<th colspan="2">33333</th>
</tr>
<tr align="center">
<th></th>
<th>国内</th>
<th>国外</th>
<th>国内</th>
<th>国外</th>
<th>国内</th>
<th>国外</th>
</tr align="center">
</thead>
<tbody>
<tr align="center">
<th>手机</th>
<td>132</td>
<td>312</td>
<td>13</td>
<td>453</td>
<td>453</td>
<td>534</td>
</tr>
</tbody>
<tfoot>
<th>汇总</th>
<td colspan="2">15641651</td>
<td colspan="2">15641651</td>
<td colspan="2">15641651</td>
</tfoot>
</table>
课程收获:
谢谢老师,讲的非常细致,很容易懂。