表格标签

BBigSun 评论23阅读模式

表格标签

标签:table 嵌套 tr, tr 嵌套 td/th

标签名 说明
table 表格
tr
th 表头单元格
td 内容单元格

提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。文章源自十年又十年-https://www.bbigsun.com/872.html

<table border="1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <th>小明</th>
        <th>男</th>
        <th>20</th>
    </tr>
    <tr>
        <th>小红</th>
        <th>女</th>
        <th>18</th>
    </tr>
    <tr>
        <th>小芬</th>
        <th>女</th>
        <th>22</th>
    </tr>
</table>

表格标签文章源自十年又十年-https://www.bbigsun.com/872.html

表格结构标签

作用:用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰。文章源自十年又十年-https://www.bbigsun.com/872.html

标签名 含义 特殊说明
thead 表格头部 表格头部内容
tbody 表格主体 主要内容区域
tfoot 表格底部 汇总信息区域

合并单元格

将多个单元格合并成一个单元格,以合并同类信息文章源自十年又十年-https://www.bbigsun.com/872.html

合并单元格步骤:文章源自十年又十年-https://www.bbigsun.com/872.html

  1. 明确合并的目标
  2. 保留最左上角的单元格,添加属性(取值为数字,表示需要合并的单元格数量)
    • 跨行合并:保留最上单元格,添加属性 rowspan
    • 跨列合并:保留最左单元格,添加属性 colspan
  3. 删除其他单元格
<table border="1">
    <tr>
        <th colspan="3">学生信息</th>
    </tr>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <th>小明</th>
        <th>男</th>
        <th>20</th>
    </tr>
    <tr>
        <th>小红</th>
        <th rowspan="2">女</th>
        <th>18</th>
    </tr>
    <tr>
        <th>小芬</th>
        <th>22</th>
    </tr>

</table>

表格标签文章源自十年又十年-https://www.bbigsun.com/872.html 文章源自十年又十年-https://www.bbigsun.com/872.html

纸上得来终觉浅,绝知此事要躬行。

weinxin
17688689121
我的微信
微信扫一扫
BBigSun
  • 本文由 BBigSun 发表于 2024年 5月 19日 10:48:32
  • 转载请务必保留本文链接:https://www.bbigsun.com/872.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定