HTML中的<table>

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>

运行结果为:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,759评论 18 399
  • 一. Java基础部分.................................................
    wy_sure阅读 3,834评论 0 11
  • 前端07班 王 对于table的使用我们会有种先入为主的厌恶。觉得页面中不应该出现表格!其实这只是针对使用HTML...
    ea203453e188阅读 2,723评论 0 5
  • 形象的内容宽广而丰富,它包括你的穿着、言行、举止、修养、生活方式、知识层次、家庭出身、你住在哪里、开什么车、和什么...
    peter_621f阅读 196评论 0 0
  • 加入读书会也有一年的时间了,参加读书会的线下活动其实并不多,原因很简单,我觉得自己读书少,不敢去读书人面前得瑟! ...
    眸眸小白阅读 285评论 2 0