HTML——表格标签

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>

在这里插入图片描述

五、故事会

《最美的歌声》

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

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

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值