美文网首页
HTML中的<table>

HTML中的<table>

作者: 小m_up | 来源:发表于2016-12-07 20:04 被阅读48次

table的作用

<table>: 定义HTML文档中的表格

table的元素

<caption>标签给表格设置标题
<thead>标签定义表格的页头
<tr>定义表格中的一行
<th>定义表格中的表头
<td>定义表格中的一列
<tbody>标签定义表格的主体
<tfoot>标签定义表格的页脚

举例应用：

<table border="1">
<caption>学生信息</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>23</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均</td>
            <td>24</td>
        </tr>
    </tfoot>
</table>

运行结果为：

扩展

  • <colgroup>标签
    可以对表格的列进行组合，从而进行整体格式化。
    举例：
<head>
    <style>
        #colgroup1 {
            background-color: red
        }
        #colgroup2 {
            background-color: green;
        }
    </style>
</head>
<body>
    <table border="1">
        <colgroup id="colgroup1" span="1">
            <colgroup id="colgroup2" span="1">
                <thead>
                    <tr>
                        <th id="name">姓名</th>
                        <th id="age">年龄</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td headers="name one">张三</td>
                        <td headers="age one">25</td>
                    </tr>
                    <tr>
                        <td headers="name two">李四</td>
                        <td headers="age two">23</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>平均</td>
                        <td>24</td>
                    </tr>
                </tfoot>
    </table>
</body>

则显示结果为：

  • td的colspan属性
    设置表格的占用标准表格的几列
    举例：
<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td colspan="2">25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>23</td>
            <td>56</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均</td>
            <td>24</td>
            <td>80</td>
        </tr>
    </tfoot>
</table>

运行结果为：

  • td的rowspan属性
    设置表格的占用标准表格的几行
    举例：
<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td rowspan="2">90</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>23</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均</td>
            <td>24</td>
            <td>80</td>
        </tr>
    </tfoot>
</table>

运行结果为：

相关文章