HTML 表格元素

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiaoxiaobukuang/article/details/78183642








学习要点

  1. 表格元素汇总
  2. 构建表格解析

一、表格元素汇总

表格的基本构成最少需要三个元素:< table >、< tr >、< td >,其他的一些作为可选铺助存在。

元素名称 说明
table 表示表格
thead 表示标题行
tbody 表示表格主体
tfoot 表示表脚
tr 表示一行单元格
th 表示标题行单元格
td 表示单元格
col 表示一列
colgroup 表示一组列
caption 表示表格标题

二、构建表格解析


1、table、tr、td构建基础表格

张三 未婚
李四 已婚
<table border="1">
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
</table>

解释:< table > 元素表示一个表格的声明,< tr >元素表示表格的一行,< td > 元素表示行数据。

2、< th > 为表格添加标题单元格

姓名 性别 婚姻
张三 未婚
李四 已婚
<table border="1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
</table>

姓名 性别 婚姻
张三 未婚
李四 已婚
<table border="1" style="width:300px;">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
</table>

姓名 性别 婚姻
张三 未婚
李四 已婚
统计:共两人
<table border="1" style="width:300px">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
    <tr>
        <td colspan="3">统计:共两人</td>
    </tr>
</table>

基本情况 姓名 性别 婚姻
张三 未婚
李四 已婚
统计:共两人
<table border="1" style="width:300px">
    <tr>
        <th rowspan="4">基本情况</th>
        <th>姓名</th>
        <th>性别</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
    <tr>
        <td colspan="3">统计:共两人</td>
    </tr>
</table>

解释:< th > 元素主要是添加标题行的单元格,实际作用就是将内部文字居中且加粗。这里使用一个通用属性style,主要用于CSS样式设置,以后会涉及到。< th > < td > 均属于单元格,包行两个合并属性:colspan(横向合并)、rowspan(纵向合并)等。

3、< thead > 添加表头

姓名 性别 婚姻
<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚姻</th>
        </tr>
    </thead>
</table>

解释:< thead > 元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头,它的位置是不固定的,使用此元素可以限定在开头位置。

4、< tfoot > 添加表表脚

姓名 性别 婚姻
统计:共两人
<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚姻</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="3">统计:共两人</td>
        </tr>
    </tfoot>
</table>

解释:< tfoot > 元素为表格生成表脚,限制在表格的底部。

5、< tbody > 添加表主体

姓名 性别 婚姻
张三 未婚
李四 已婚
统计:共两人
<table border="1" style="width:300px;">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚姻</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td></td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td></td>
            <td>已婚</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">统计:共两人</td>
        </tr>
    </tfoot>
</table>

解释:< tbody > 元素主要是包含住非表头表脚的主体部分,有助于表格格式的清晰,更加有助于后续CSS和JavaScript的控制。

6、 < caption > 添加表格标题

这个是表格信息
姓名 性别 婚姻
张三 未婚
李四 已婚
统计:共两人
<table border="1" style="width:300px;">
    <caption>这个是表格信息</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚姻</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td></td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td></td>
            <td>已婚</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">统计:共两人</td>
        </tr>
    </tfoot>
</table>

解释:< caption > 元素给表格添加一个标题。

7、设置行和< colgroup > 设置列

设置行
姓名 性别 婚姻
张三 未婚
李四 已婚
统计:共两人
<table border="1" style="width:300px;">
    <caption style="color:red;">设置行</caption>
    <thead>
        <tr style="background: red;">
            <th>姓名</th>
            <th>性别</th>
            <th>婚姻</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td></td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td></td>
            <td>已婚</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">统计:共两人</td>
        </tr>
    </tfoot>
</table>

colgroup设置列
姓名 性别 婚姻
张三 未婚
李四 已婚
统计:共两人
<table border="1" style="width:300px;">
    <caption style="color:red;">colgroup设置列</caption>
    <colgroup style="background: red;" span="1"></colgroup>
    <colgroup style="background: yellow;" span="1"></colgroup>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚姻</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td></td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>李四</td>             
            <td></td>
            <td>已婚</td>
        </tr>
    </tbody>
    <tfoot>
        <tr style="background: balck;">
            <td colspan="3">统计:共两人</td>
        </tr>
    </tfoot>
</table>

解释:< colgroup > 元素是为了处理某个列,span属性定义处理哪些列。1表示第一列,2表示前两列。如果要单独设置第二列,那么需要声明两个,先处理第一个,将列点移入第二位,再处理第二个即可。

8、< col > 更灵活的设置列

colgroup设置列
姓名 性别 婚姻
张三 未婚
李四 已婚
统计:共两人
<table border="1" style="width:300px;">
    <caption style="color:red;">colgroup设置列</caption>
    <colgroup>
        <col style="background:red;" span="1">
        <col>
        <col style="background:yellow;" span="1">
    </colgroup>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚姻</th>
        </tr>
    </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td></td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td></td>
            <td>已婚</td>
        </tr>
    </tbody>
    <tfoot>
        <tr style="background: balck;">
            <td colspan="3">统计:共两人</td>
        </tr>
    </tfoot>
</table>

解释:< col > 元素表示单独一列,一个表示一列,控制更加灵活。如果设置了span,则控制多列。


没有更多推荐了,返回首页