六、表格

最新推荐文章于 2023-11-01 14:51:19 发布
最新推荐文章于 2023-11-01 14:51:19 发布
阅读量194 收藏
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47589828/article/details/112292923
版权

6.1 表格简介

在早些年的Web 1.0时代，表格常用于网页布局。但是在Web 2.0中，这种方式已经被抛弃了，网页布局都是使用CSS来实现的。但是这并没有说明表格就一无是处了，表格在实际开发中用得非常多，因为使用表格可以更清晰地排列数据。

6.2 基本结构

在HTML中，一个表格一般会由以下3个部分组成。
（1）表格：table标签
（2）行：tr标签
（3）单元格：td标签

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

说明：
tr，指的是table row（表格行）；td，指的是table data cell（表格单元格）。
<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td>和</td>表示单元格的开始和结束。
在表格中，有多少组“<tr></tr>”，就表示有多少行。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>表格基本结构</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
    <table>        
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>jQuery</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述
分析：
默认情况下，表格是没有边框的。对于表格的边框、颜色、大小等，我们在CSS中会学到。

6.3 完整结构

一个表格的“完整结构”不仅仅只有table、tr、td，还包括caption、th等。

一、表格标题：caption

在HTML中，表格一般都会有一个标题，我们可以使用caption标签来实现。

<table>
    <caption>表格标题</caption>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

说明：
一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题都是位于整个表格内的第一行。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>表格标题</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

二、表头单元格：th

在HTML中，单元格其实有两种：表头单元格，使用th标签；表行单元格，使用td标签。
th，指的是table header cell（表头单元格）。td，指的是table data cell（表行单元格）。

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </tr>
</table>

说明：
th和td在本质上都是单元格，但是并不代表两者可以互换。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>表头单元格</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td,th{border:1px solid silver;}
    </style>
</head>
<body>
    <table>        
        <caption>考试成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>英语</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

6.4 表格语义化

一个完整的表格包含：table、caption、tr、th、td。为了更深一地对表格进行语义化，HTML引入了thead、tbody和tfoot标签。
thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
            <td>表行单元格3</td>
            <td>表行单元格4</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格5</td>
            <td>标准单元格6</td>
        </tr>
    </tfoot>
</table>

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>表格语义化</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td,th{border:1px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <thead>    
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述
分析：
表脚（tfoot）往往用于统计数据的。对于thead、tbody和tfoot标签，不一定全部都上，例如tfoot就很少用。一般情况下，我们都是根据实际需要来使用这些标签。
thead、tbody和tfoot标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚（使代码更具有逻辑性）。
此外，thead、tbody和tfoot除了使得代码更具有语义之外，还有另外一个重要作用：方便分块来控制表格的CSS样式。

6.5 合并行：rowspan

在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。

<td rowspan = "跨越的行数"></td>

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>rowspan属性</title>
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td>姓名:</td>
            <td>小明</td>
        </tr>
        <tr>
            <td rowspan="2">喜欢水果:</td>
            <td>苹果</td>
        </tr>
        <tr>
            <td>香蕉</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

6.6 合并列：colspan

在HTML中，我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。

<td colspan="跨越的列数"></td>

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>colspan属性</title>
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td colspan="2">前端开发技术</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>jQuery</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述
以上学习参考绿叶学习网

m0_47589828
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第六篇Bootstrap表格样式介绍
09-02
在Bootstrap中，表格是常见且实用的元素之一，可以帮助开发者轻松创建美观且功能丰富的数据展示区域。 1. **基本表格** 基本表格是Bootstrap中最简单的表格形式。通过在`<table>`标签中添加`.table`类，Bootstrap...
Android 表格实现
01-07
**六、性能优化** 1. 尽可能减少表格的行数和列数，避免大量数据一次性加载导致的性能问题。 2. 使用`ViewStub`延迟加载不常显示的行或列，提高初始加载速度。 3. 考虑使用RecyclerView配合GridLayoutManager，当...
QT Word 操作
m1223853767的博客
12-30 3529
1、pro 文件增加 QT += axcontainer。 2、增加 OfficeWordEngine 引擎类。 此处为 抽象基类用于 Excel/Word的提供纯虚函数。 #ifndef OFFICEWORDENGINE_H #define OFFICEWORDENGINE_H #include <QString> #include <QVariant> #include <QAxObject> #include <QPair> class .
QT QAxobject 单元格合并问题
最新发布
qq_37371407的博客
11-01 323
以上是我的部分代码，代码运行后，nRowStart 可以正确得到合并的单元格的首行。nColumnStart可以正确得到合并的单元格的最左边的一列。但是nRowCount与nColumnCount的值始终为0，无法正确得到合并的单元格的行数，这是为什么呢？希望评论区有人能解答。我想了一个折中的方案，如果不能直接获取合并的单元格有几行，那么可以通过循环的方式从首行开始依次向下获取首行的值，首行的值变了，那么说明该单元格不与上方的单元格合并，那么就可以得到有几行单元格合并在了一起。
零基础HTML教程(22)--表格:我的重要性毋庸置疑
程序员大阳
10-08 1528
本文目录1. 前言2. 表格标签3. 表格的行与列4. 页眉5. 页脚6. 小结 1. 前言 表格有多重要我就不需要赘述了吧，我们日常访问的网页处处都有表格，所以表格是非常非常重要的HTML元素。 本篇我们就来简单介绍下表格的用法。 2. 表格标签 我们可以使用<table>标签来定义一个表格，然后使用border属性来设定表格边框的宽度，如下。 注意此时表格里面还没有内容，所以网页也显示不出什么东西来。 <table border="1"> </table>
Qt随手笔记（五）vs+qt使用QAxObject读取word（内容、句子、段落、表格）
m0_50990607的博客
03-10 6508
一、配置环境 1、配置环境 本案例使用的vs2019、qt5.12.10和word2016 a) 使用vs2019新建一个QtWidgetsApplication项目 b)加载头文件和库 打开项目的属性 添加头文件目录 目录为qt安装路径中的Active 添加库目录 目录为qt安装路径下的lib 添加附加依赖项 Qt5AxContainerd.lib；Qt5Axbased.lib 二、设计ui界面 添加一个button按钮，objectName为pushButton 和一个textEdit控件，ob
HTML制作表格.ppt
11-15
HTML制作表格 ...六、小结 本章节介绍了HTML制作表格的相关知识点，包括表格的基本结构、创建表格、跨行跨列的表格、美化修饰等。通过本章节的学习，读者可以快速掌握HTML表格的制作方法和美化技巧。
smarty表格换行实例
10-25
`foreach` 循环遍历这些元素，每遇到偶数索引的元素（即第二个、第四个、第六个等）时，插入一个新的表格行 `<tr>`。每个元素被放在一个 `<td>` 单元格内，这样每行显示三个元素后自动换行。 如果希望每行只显示两...
六级词汇Excel表格版本.xls
05-01
六级词汇Excel表格版本.xls
QAxObject写word文档和次线程操作
苏州-青蛙
06-30 802
不废话先贴代码 别忘了装office { HRESULT r = OleInitialize(0); if (r != S_OK && r != S_FALSE) { qWarning("Qt: Could not initialize OLE (error %x)", (unsigned int)r); } ...
html复选框不可修改,HTML复选框可以设置为只读吗？
weixin_33377571的博客
06-03 393
杨魅力READONLY不适用于复选框，因为它阻止您编辑字段的价值，但是使用复选框，您实际上是在编辑字段的国家(关于Off)从…faqs.org:重要的是要理解，READONLY只是防止用户更改字段的值，而不是与字段交互。例如，在复选框中，您可以打开或关闭它们(从而设置选中的状态)，但不更改字段的值。如果你不想用disabled但是仍然想提交值，不如将值作为隐藏字段提交，当用户不满足编辑条件时只将其...
qaxobject控制word到某一行_「Word技巧」厉害了，这几个word技巧解决了多少人的困扰...
weixin_39627699的博客
12-03 318
今天主要分享平时在word排版中经常遇到的几个问题，教你几个word技巧快速解决这些问题。一、不让标点符号出现在行首Word文档排版的时候，会遇到有些标点符号显示在行首的情况，怎么看都觉得不美观。那么，我们可以手动设置一下，使标点符号不出现在行首。解决方法：选择段落文档【右键】—【段落】—【中文版式】，将【按中文习惯控制首尾字符】和【允许标点溢出边界】勾选起来。二、让表格里的文字上下对齐Word表...
js复选框回显如何使CheckBox不可修改
weixin_44424101的博客
07-09 3192
使CheckBox不可修改（加入 onclick="return false;"）： 复选框如下： <span class="checkboxSpan"> <input type="checkbox" name="ABC" value="aa" onclick="changeABC()" />AA ...
QAxObject来操作Excel的一些命令
南宫封清的博客
08-30 1774
连接Excel控件 QAxWidget excel("Excel.Application"); 显示当前窗口： excel.setProperty("Visible", true); 更改 Excel 标题栏： excel.setProperty("Caption", "Invoke Microsoft Excel"); 不显示任何警告信息 setProperty("DisplayAl...
qt 操作word文档
雨中山草
05-14 2986
wordengine.h #ifndef WORDENGINE_H #define WORDENGINE_H #include <QObject> #include <ActiveQt/QAxObject> #include <ActiveQt/QAxWidget> class WordEngine : public QObject { Q_OBJECT public: explicit WordEngine(QObject *parent = 0); W
六排三列表格怎么写
05-28
你可以使用 Markdown 语法来写一个六排三列表格。具体语法如下： ``` | 列1标题 | 列2标题 | 列3标题 | | :----: | :----: | :----: | | 单元格1 | 单元格2 | 单元格3 | | 单元格4 | 单元格5 | 单元格6 | | 单元格7...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值