HTML表格的基本元素使用

最新推荐文章于 2021-07-14 08:04:53 发布

kuailest

最新推荐文章于 2021-07-14 08:04:53 发布

阅读量560

点赞数 1

文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_46685767/article/details/115331008

版权

HTML表格基础操作

最基本的表格 tr，td，th

在HTML表中，一个表格<table>由行<tr>组成，每一行由单元格组成，单元格有标题单元格<th>和数据单元格<td>

<body>
    <table width="400">
        <!-- 表标题 -->
        <caption>通讯录</caption>
        <!-- 表头 -->
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">电话</th>
            <th scope="col">备注</th>
        </tr>
        <tr>
            <td>李雯</td>
            <td>18012311234</td>
            <td>家人</td>
        </tr>
        <tr>
            <td>王谦</td>
            <td>17812311234</td>
            <td>同事</td>
        </tr>
        <tr>
            <td>周佳</td>
            <td>17413511234</td>
            <td>高中同学</td>
        </tr>
    </table>
</body>

效果如下

通讯录
姓名	电话	备注
李雯	18012311234	家人
王谦	17812311234	同事
周佳	17413511234	高中同学

1.<caption>元素用于设置表格的标题；
2.数据第一行<tr>元素中，使用<th>元素指定了表头。本例中有三列信息，所以包含了三个<th>元素；
3.设置了<th>元素的属性scope的值为col；

用于定义表头数据与单元数据关联的scope属性

scope属性用于定义表头数据与单元数据关联的方法。

其他的一些值含义如下

值	含义
col	单元格是列的表头
row	规定单元格是行的表头
colgroup	单元格是列组的表头
rowgroup	单元格是行组的表头

列组和行组的概念在单元格跨越多行或多列的表格 中。

用thead、tbody和tfoot元素来定义表格

<body>
    <table width="400">
        <caption>运动会跑步成绩</caption>
        <thead>
             <!-- 表格头部 -->
            <tr>
                <th scope="col">长度</th>
                <th scope="col">李雯</th>
                <th scope="col">王谦</th>
                <th scope="col">周佳</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th scope="row">100米</th>
                <td>14s</td>
                <td>16s</td>
                <td>13s</td>
            </tr>
            <tr>
                <th scope="row">200米</th>
                <td>26s</td>
                <td>23s</td>
                <td>25s</td>
            </tr>
            <tr>
                <th scope="row">400米</th>
                <td>70s</td>
                <td>73s</td>
                <td>69s</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th scope="row">总用时</th>
                <td>110s</td>
                <td>112s</td>
                <td>107s</td>
            </tr>
        </tfoot>
    </table>

效果如下

运动会跑步成绩
长度	李雯	王谦	周佳
100米	14s	16s	13s
200米	26s	23s	25s
400米	70s	73s	69s
总用时	110s	112s	107s

顾名思义，<thead>元素标记表格第6行到第10行为头部；<tbody> 元素包围了第15行到第32行的所有数据行；最后，<tfoot>元素标记表格的尾部。

此例中，将列值的总和行作为表格的尾部。通常建议大家使用这三种元素来定义表格，因为这样做表格的总体结构更为清晰。

单元格跨越多行或多列的表格colgroup,rowgroup

实现在HTML表格里跨越多行或者多列。
可以设定colspan 和 rowspan 属性让 <th> 或 <td>单元格跨越多行或多列。

值	含义
col	单元格是列的表头
row	规定单元格是行的表头
colgroup	单元格是列组的表头
rowgroup	单元格是行组的表头

代码如下：

<body>
    <table>
        <caption>彩排安排</caption>
        <thead>
            <!-- 表格头部 -->
            <tr>
                <th scope="rowgroup">时间</th>
                <th scope="col">周一</th>
                <th scope="col">周二</th>
                <th scope="col">周三</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th scope="row">上午8点</th>
                <td>开场舞</td>
                <td colspan="2">歌曲串烧</td>
            </tr>
            <tr>
                <th scope="row">上午9点</th>
                <td>小品</td>
                <td>相声</td>
                <td rowspan="3">大型魔术</td>
            </tr>
            <tr>
                <th scope="row">上午10点</th>
                <td>杂艺表演</td>
                <td>乐队歌曲</td>
            </tr>
        </tbody>
    </table>
</body>

彩排安排
时间	周一	周二	周三	周四
上午8点	开场舞	歌曲串烧		斗牛舞
上午9点	小品	相声	大型魔术	小品
上午10点	杂艺表演	乐队歌曲	大型魔术	京剧

当把rowspan与colspan都改为1时

	 <td colspan="1">歌曲串烧</td>  
	 <td rowspan="1">大型魔术</td>

可以得到

彩排安排
时间	周一	周二	周三	周四
上午8点	开场舞	歌曲串烧	斗牛舞
上午9点	小品	相声	大型魔术	小品
上午10点	杂艺表演	乐队歌曲	京剧

可以看到colspan对行造成了影响，他是把“斗牛舞”向后挤了一格，而rowspan对列造成了影响，占用了京剧的位置，由于“上午10点”这一行的scope元素设置为row，所以将京剧是沿行向后移动了一格。

在此例中，表格头部第7行，scope="rowgroup"指定了该单元格是行组的表头。表格中，第3行的第3列和第4列为合并单元格，我们设置第18行colspan=“2”，表示该单元格跨越两列；同理，第24行设置rowspan="2"表示该单元格跨越两行。

所以，
要设置单元格跨越多行，只需设置属性rowspan=“n”；
设置单元格跨越多列，只需设置属性colspan=“n”。
n是单元格要跨越的行数或列数。

kuailest

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫