HTML5-表格元素

最新推荐文章于 2024-09-11 17:25:08 发布

app支持博客

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量580

点赞数

分类专栏： HTML5 文章标签： html5 表格元素

本文链接：https://blog.csdn.net/fly_study/article/details/51835539

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 <html lang="zh-cn">
 <head>
    <meta charset="utf-8">
    <title>表格元素</title>
 </head>
 <body>
 <!-- border设置线格宽度 width设置表格宽度 -->
 <table border="1" style="width:200px">
    <!-- tr包裹一行 td表示单元格 th代表是表头单元格 -->
    <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>
<br>
 <table border="1" style="width:300px">
    <!-- rowspan归并几行为1列 -->
    <tr>
        <td rowspan="4">单位人员</td>
    </tr>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>未婚</td>
    </tr>
    <!-- colspan归并几列为1行 -->
    <tr>
        <td colspan="4">统计:共两人</td>
    </tr>

 </table>
<br>
<table border="1" style="width:200px">
    <!-- 设置表格名称 -->
    <caption>这是一个表格</caption>
    <!-- thead 包裹表头 tbody包裹表主题 tfoot包裹表脚 不怕位置混乱 -->
    <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">统计:2人</td>
        </tr>>
    </tfoot>
 </table>
<br>
<table border="1" style="width:200px">
    <!-- 第一种设置第二列为红色 -->
    <colgroup style="background:white"></colgroup>
    <colgroup style="background:red" span="1"></colgroup>
    <!-- 第二种设置第三列为黄色 更为灵活 -->
<!--    <colgroup>
        <col>
        <col>
        <col style="background:yellow"> 
    </colgroup> -->
    <!-- 设置表格标题 -->
    <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">统计:2人</td>
        </tr>>
    </tfoot>
 </table>
 </body>
 </html>