HTML5第四章 表格元素

时间：2023-01-01 12:16:31

第四章 表格元素

表格的基本构成至少需要<table>、<tr>和<td>

元素名称

描述

table

表格

thead

表格头部

tbody

表格主体

tfoot

表格脚注

tr

一行单元格

th

标题行单元格

td

一个单元格

col

一列单元格

colgroup

表示一组列

caotion

设置表格标题

用法：

<body>
<table border="1">
    <caption>成绩表</caption>
    <!--<colgroup style="background:#ccc;" span="2"></colgroup>-->
    <!--&lt;!&ndash;span="2"并不代表索引,不是只设置第二列为背景灰色,而是第一列第二列都设置背景灰色&ndash;&gt;-->
    <!--解决办法1-->
    <!--<colgroup style="background:white;" span="1"></colgroup>-->
    <!--<colgroup style="background:#ccc;" span="1"></colgroup>-->
    <!--解决办法2-->
    <colgroup>
        <col>
        <col  style="background:#ccc;">
    </colgroup>
    <thead>
    <tr><th>姓名</th> <th>性别</th> <th>班级</th> <th>成绩</th></tr>
    </thead>
    <tbody>
    <tr><td>小白</td> <td>男</td> <td rowspan="2">1班</td> <td>100</td></tr>
    <tr><td>小红</td> <td>女</td> <td>98 </td></tr>
    <tr><td>小明</td> <td>男</td> <td>3班</td> <td>99</td></tr>
    </tbody>
    <tfoot>
    <tr><td>总成绩</td><td colspan="3">297</td></tr>
    </tfoot>
</table>
</body>

注意:<colgroup>是为了处理某个列,span属性定义处理那一列。span=”1”表示第一列;span=”2”表示前两列。如果要单独

设置前两列,那么就需要先处理第一列,可以把第一列设置为白色,也可以用<col>占位符占着第一列。

效果：

HTML5第四章 表格元素


标签：

相关文章