HTML——表格标签

wshwsh_

已于 2023-07-14 20:43:44 修改

阅读量820

点赞数 2

文章标签： html 前端学习方法面试

于 2023-07-13 20:31:01 首次发布

本文链接：https://blog.csdn.net/wshwsh_/article/details/131710706

版权

HTML表格标签

在这里插入图片描述

一、表格的基本结构

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

在这里插入图片描述

在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。相关标签如下：

标签	描述
`<caption>`	用于定义表格标题。
`<thead>`	用于定义表格的头部。一般包含列名、行号等表头信息。
`<tbody>`	用于定义表格的主体。一般包含数据内容。
`<tfoot>`	用于定义表格的脚注。
`<tr>`	用于定义表格的一行。
`<td>`	用于定义表格的单元格。
`<th>`	用于定义表头单元格。

注意事项：

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。
tr 元素包含一个或多个 th 或 td 元素。
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
默认情况下同列单元格宽度由该列宽度最大的单元格决定
默认情况下同行单元格高度由该行高度最高的单元格决定

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>

<body>
    <table>
        <caption>
            <h2>商品信息表</h2>
            <p>制表：2023/07/13</p>
        </caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>品类</th>
                <th>品名</th>
                <th>数量</th>
                <th>单价</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>衣服</td>
                <td>冬装</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>衣服</td>
                <td>夏装</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>饮料</td>
                <td>可口可乐</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>4</td>
                <td>饮料</td>
                <td>百事可乐</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

在这里插入图片描述

二、表格属性

属性名	含义	默认值
border	设置表格的边框。	0，无边框
cellspacing	设置单元格与单元格边框之间的空白间距。	2px
cellpadding	设置单元格内容与单元格边框之间的空白间距。	1px
width	设置表格的宽度。
height	设置表格的高度。
align	设置表格在网页中的水平对齐方式。

我们可以通过使用align="center"使表格居中，通过width和height属性给表格设置宽高，使用border属性给表格增加边框，然后再通过cellspacing=‘0’将单元格与单元格边框之间的空白间距设置为0。

注：这种方式并不推荐后面可以通过css样式来设置表格样式

修改示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>

<body>
     <table width="600" height="200" border="1" cellspacing="0" align="center">
        <caption>
            <h2>商品信息表</h2>
            <p>制表：2023/07/13</p>
        </caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>品类</th>
                <th>品名</th>
                <th>数量</th>
                <th>单价</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>衣服</td>
                <td>冬装</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>衣服</td>
                <td>夏装</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>饮料</td>
                <td>可口可乐</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>4</td>
                <td>饮料</td>
                <td>百事可乐</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

在这里插入图片描述

三、合并单元格

**行合并：**rowspan属性，纵向合并单元格；属性值为正整数，表示要合并单元格的个数。

**列合并：**colspan属性，横向合并单元格；属性值为正整数，表示要合并单元格的个数。

合并的顺序：从上到下，自左到右。

这两个属性的值，是一个数值，表示一个单元格占据的列数或行数

无论是行合并还是列合并，都需要删除多余的单元格

注：CSS不能实现单元格合并，单元格合并需要删除多余的单元格，这属于结构层的，CSS样式无法实现。

下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?

在这里插入图片描述

各种卡的汇总跨了三行

在这里插入图片描述

办公设备、文具、耗材跨了三列

在这里插入图片描述

最终示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table width="800"  border="1" style="border-collapse: collapse;" align="center">
        <caption>
            <h2>商品信息表</h2>
            <p>制表:2023/07/13</p>
        </caption>

        <thead bgcolor="#92cddb">
            <tr>
                <th>ID</th>
                <th>品类</th>
                <th>品名</th>
                <th>数量</th>
                <th>单价</th>
                <th>金额</th>
            </tr>
        </thead>

        <tbody align="center">
            <tr>
                <td>1</td>
                <!-- 衣服跨了两行 注意要删除第三行的衣服 -->
                <td rowspan="2">衣服</td>
                <td>冬装</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>夏装</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td rowspan="2">饮料</td>
                <td>可口可乐</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>4</td>
                <td>百事可乐</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <!-- bgcolor="#fdeadc" 添加背景颜色 -->
            <tr bgcolor="#fdeadc">
                <td colspan="6">以下为备用物品</td>
            </tr>
            <tr>
                <td>5</td>
                <td rowspan="2">数码</td>
                <td>相机</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>6</td>
                <td>镜头</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>

        <tfoot align="center">
            <tr>
                <!-- '合计'跨了两行四列 -->
                <td rowspan="2" colspan="4">合计</td>
                <td bgcolor="#90cbdb">平均单价</td>
                <td bgcolor="#f8bf8a">金额合计</td>
            </tr>
            <tr>
                <td>100</td>
                <td>600</td>
            </tr>
        </tfoot>
    </table>
    </body>
</html>

在这里插入图片描述

四、其他新标签

colgroup标签：

colgroup标签用于对表格中的列进行组合，以便对其进行格式化,它的span属性可以设置组合列的数组;结合css使用最好;它可以包含一个子元素,col;

如需对全部列应用样式，<colgroup>标签很有用，这样就不需要对各个单元和各行重复应用样式了。

<colgroup>标签只能在 table 元素中使用。如果有caption标签和thead等标签，那么必须放在caption标签之后,thead标签之前;

    <table border="1px">
        <!-- 前两列的宽度为100px -->
        <colgroup span="2" style="width:100px;"></colgroup>
        <!-- 第三列的宽度为80px -->
        <colgroup style="width:80px;"></colgroup>
        <tr>
            <td>1000</td>
            <td>2000</td>
            <td>3333</td>
            <td>1232</td>
        </tr>
        <tr>
            <td>3213</td>
            <td>5452</td>
            <td>6436</td>
            <td>6323</td>
        </tr>
    </table>

在这里插入图片描述

col标签：

col标签是用来设定列的属性，它也可以使用span属性，不可和colgroup同时使用span属性，不然会出现冲突；

col标签一般作为colgroup标签的子标签配合使用;此标签为单标签。

col标签表示对一列设置样式，比如上面的第一个colgroup标签，是用来设置两列样式，那么如果想设置不同背景颜色，就可以在colgroup标签中设置两个col标签，分别对背景进行设置。

    <table border="1px">
        <colgroup span="2" style="width:100px;">
            <!-- 第一列的背景为红色 -->
            <col style="background: red">
            <!-- 第二列的背景为黄色 -->
            <col style="background: yellow">
        </colgroup>
        <colgroup style="width:80px;"></colgroup>
    
        <tr>
            <td>1000</td>
            <td>2000</td>
            <td>3333</td>
            <td>1232</td>
        </tr>
        <tr>
            <td>3213</td>
            <td>5452</td>
            <td>6436</td>
            <td>6323</td>
        </tr>
    </table>

在这里插入图片描述

五、故事会

《最美的歌声》

开往北京的列车上，一位满脸皱纹的老人正和周围的人攀谈着，他时不时扭头看看身边腰板挺得倍儿直的儿子，看一眼咧嘴笑半天，满脸的宠溺，搞得这个二十出头的小伙子挺尴尬。

边上一个中年人看着好笑，打趣道：“老哥，看你这一脸喜气，莫不是陪儿子进京赶考去？”老人摆摆手说：“哈哈，现在不兴这个了，我呀，是陪儿子去参加青年歌手大赛！”
　　
　　邻座几个女学生立刻围了上来，叽叽喳喳地说道：“哇！帅哥，现在就唱一首，让我们这些草根评委打打分呗！”旅途寂寞，难得有这种热闹，周围人纷纷拍手鼓掌，齐声说着：“唱一个！”
　　
　　小伙子左推右挡，实在架不住了，只好红着脸站起来，含糊地说道：“那我就唱一首，可能不太好听，大家多担待。”
　　
　　说完，小伙子终于张嘴唱了起来，可声音一出来，乘客们一片哗然。这是啥歌声呀？基本没有一个字在调上。
　　
　　跟女学生一起的几个男生，早就对小伙子心生不满了，这时候更是落井下石，有的男生捂耳朵，有的男生掐人中，嘴里说着：“这声音太刺激了！”
　　
　　老人站起来挡住众人，抬手从行李架上拖下一个帆布包，一把把地往外掏核桃，转圈地发：“尝尝，快尝尝！自家产的，纸皮核桃，皮薄肉满，香着哩！”乘客们勉强接过来，看在核桃的分上再忍受一会儿。
　　
　　背对着儿子，老人一脸难色，低聲哀求道：“大伙儿多担待，我儿子以前唱歌好听着呢，可自从耳朵听不见了就……”
　　
　　“啊？聋了！难怪呢，听得我浑身刺挠！”一个男生夸张地挠着肩膀。
　　
　　老人脸色变得难看起来：“他听不见，但能看懂口型，大伙儿口下积德。”
　　
　　边上的中年人摇摇头说道：“做父母的心情能理解，但歌手大赛的评委个个是毒舌，到时候不是更受刺激吗？”
　　
　　老人眼圈一红，哽咽着说：“孩子当兵前的梦想就是能站到大舞台上唱歌，去年抗震救灾时耳朵受了伤，医生说可能永远都听不见了。可他救了四个孩子呀，值了！我就想帮他圆个梦……”听到这里，所有人都沉默了，大家目光复杂地看着这个跑调的小伙子。
　　
　　慢慢地，车厢里开始响起了掌声，大家一起跟着唱了起来，小伙子脸上洋溢着笑容，唱得更起劲了。老人受不了了，怕自己当着儿子的面哭出来，硬挤着笑容冲车厢另一头指了指，示意自己去厕所。小伙子点点头，歌却没停下。老人紧紧抿着嘴唇，站起来匆匆向卫生间走去。
　　
　　看着父亲消失在车厢尽头，小伙子忽然不唱了，他弯腰从包里继续掏核桃，挨个往大家手里塞，满怀歉意地说道：“对不起大家，我听不见自己的声音，肯定唱得很难听。”咬字虽然不太清晰，但周围人都听懂了。
　　
　　有个女学生一字一顿地说着，好让他看清自己的口型：“兵哥哥，这是我听过最美的歌声，祝你在大赛中取得好成绩！”
　　
　　小伙子摇摇头，忽然调皮地笑了：“我根本没报名参加大赛，只是我爸一直想到北京看看，却又舍不得花钱，我要是不撒谎，他可能这辈子都圆不了自己的梦……”话没说完，小伙子忽然又唱了起来。
　　
　　大伙儿一扭头，发现老人正从车厢那头往这边走呢。所有人立刻配合地跟着小伙子一起唱了起来，许多人的声音里都带着哭腔。

wshwsh_

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML——表格标签

表格由标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。
复制链接

扫一扫