【前端就业课 第一阶段】HTML5 零基础到实战（六）表格详解

最新推荐文章于 2022-03-21 20:51:29 发布
最新推荐文章于 2022-03-21 20:51:29 发布
阅读量158 收藏
点赞数
分类专栏： 前端 html 文章标签： vue.js ui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67401935/article/details/123220422
版权
前端 同时被 2 个专栏收录
30 篇文章 2 订阅
订阅专栏
html
30 篇文章 0 订阅
订阅专栏
本文详细讲解了HTML5中表格的使用，包括基础用法、结构化、边框设置、边距调整、背景色应用、对齐方式、背景图以及单元格的合并。通过实例演示了如何创建和美化表格，帮助读者掌握HTML5表格的全面知识。
摘要由CSDN通过智能技术生成

注意：手机（APP）打开，内容显示更佳，不会的私聊博主即可
想要拿代码或加入学习计划（** 博主会监督你并且教你写文章 **）的拉到最下面（PC端Web打开）加博主即可，目录也在最下面。

参加博主前端学习计划发文时再头部记得机上本专栏链接，示例如下：

我已加入 博主的免费前端 站起来 学习计划，专栏链接：https://blog.csdn.net/a757291228/category_11609526.html

表格的使用

一、表格的基础用法

??：小媛，这节课咱们学习表格的使用。

??小媛：就是类似Excel表格那种吗？

??：对的，在 HTML 中表格使用的标签是 table 标签。

??小媛：是这样写吧 <table> </table>？

??：对的。表格的使用很简单，一般在表格内有行和列，每个列都有自己的列名，例如如下截图示例。
在这里插入图片描述
??：这些列名在 table 中是使用 th 标签来表示，但是这些列属于同一个行，这个行在 table 标签中也有表示，那就是使用 tr 标签，例如如下代码示例就是定义了列名。

<table>
   <tr>
       <th>昵称</th>
       <th>等级</th>
       <th>战力</th>
       <th>种族</th>
   </tr>
</table>

??小媛：真简单，其中的 th 标签在 tr 里面意思就是 tr 就是一行，而每一个 th 标签就是一个列名，每一个 th 标签就包含了一个列名。

??：对的，那么咱们现在有了列名后，咱们可以给这些列添加一些内容，这些内容此时不是使用 th 标签进行说明，而是使用 td 标签，例如如下示例则是一个完整的基本表格示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 的前端实战课程06 表格</title>
</head>
<body>
    <table>
        <tr>
            <th>昵称</th>
            <th>等级</th>
            <th>战力</th>
            <th>种族</th>
        </tr>
        <tr>
            <td>萌王</td>
            <td>未知</td>
            <td>天花板</td>
            <td>史莱姆</td>
        </tr>
        <tr>
            <td>鹿娘</td>
            <td>99</td>
            <td>190000</td>
            <td>兽族</td>
        </tr>
        <tr>
            <td>莱茵</td>
            <td>999</td>
            <td>9990000</td>
            <td>吸血鬼</td>
        </tr>
    </table>
</body>
</html>

??小媛：哇，我发现了 tr 没变，依旧是表示行，但是在内容中是使用 td 表示每一行的元素了。

二、结构化

??：是这样的，这个就是一个最基本的表格了。一般来说可以使用 thead 、tbody、tfoot 标签定义表的头部，也就是 table head 表格头部、tbody 表格主题、tfoot 表格尾部，使表格结构化（你可以理解为结构清晰、每个部分有对应的结构），表格可以写成这样。

<table>
<thead>
   <tr>
       <th>昵称</th>
       <th>等级</th>
       <th>战力</th>
       <th>种族</th>
   </tr>
</thead>
<tfoot>
   <tr>
       <td>萌王</td>
       <td>未知</td>
       <td>天花板</td>
       <td>史莱姆</td>
   </tr>
</tfoot>
<tbody>
   <tr>
       <td>鹿娘</td>
       <td>99</td>
       <td>190000</td>
       <td>兽族</td>
   </tr>
   <tr>
       <td>莱茵</td>
       <td>999</td>
       <td>9990000</td>
       <td>吸血鬼</td>
   </tr>
</tbody>

??小媛：明白了，而且定义了 tfoot 的内容直接呈现在了底部。

三、边框

??：咱们还可以使这些表格内容添加边框，只需要给予 table 标签的边框属性值即可，例如如下代码。

<table border="1">
    <thead>
        <tr>
            <th>昵称</th>
            <th>等级</th>
            <th>战力</th>
            <th>种族</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>萌王</td>
            <td>未知</td>
            <td>天花板</td>
            <td>史莱姆</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>鹿娘</td>
            <td>99</td>
            <td>190000</td>
            <td>兽族</td>
        </tr>
        <tr>
            <td>莱茵</td>
            <td>999</td>
            <td>9990000</td>
            <td>吸血鬼</td>
        </tr>
    </tbody>
</table>

??：此时保存代码运行将会显示如下效果。
在这里插入图片描述
??小媛：奥，原来如此，原来给了 border 属性一个值就会使表格添加边框。

??：对的，border 对应修改的内容为边框值，并且你可以更改不同的边框值加粗或变细边框粗细。

??小媛：明白了。

??：除此之外，咱们还可以设置边框的颜色，设置边框的颜色使用 bordercolor 属性，例如如下示例（重复代码不再贴出）。

<table border="1" bordercolor="blue">

在这里插入图片描述
??小媛：哇，真好，还有什么玩法吗？

四、边距

??：当然，例如设置表格单元格之间的边距，设置边距使用属性 cellspacing，例如如下示例。

<table border="1" bordercolor="blue" cellspacing="15">

在这里插入图片描述
??：还可以设置单元格与内容之间的距离，一般情况下单元格都是距离内容紧挨着的，如果想要设置内容与单元格边框的距离就可以使用 cellpadding 属性。

<table border="1" bordercolor="blue" cellspacing="15" cellpadding="5">

在这里插入图片描述
??小媛：可是我总感觉这个表格少了什么东西。

??：你是想说表格标题吗？

??小媛：对对，是少了这个。

??：这个设置也超级简单，在表格中添加一个标签 caption 即可，例如如下示例。

<table border="1" bordercolor="blue" cellspacing="15" cellpadding="5">
    <caption>动漫战斗力统计</caption>
    <thead>
        <tr>
            <th>昵称</th>
            <th>等级</th>
            <th>战力</th>
            <th>种族</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr>
            <td>萌王</td>
            <td>未知</td>
            <td>天花板</td>
            <td>史莱姆</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>鹿娘</td>
            <td>99</td>
            <td>190000</td>
            <td>兽族</td>
        </tr>
        <tr>
            <td>莱茵</td>
            <td>999</td>
            <td>9990000</td>
            <td>吸血鬼</td>
        </tr>
    </tbody>
</table>

??：而且你会发现，不管这个 caption 放哪，只要在 table 之内，都会显示在头部这就是结构化。你还记得上一章学了一堆七七八八的东西但是从视觉角度并没有呈现出什么明显的效果，但是如果你从代码中看可以知道哪里是页脚、哪里是文章、哪里是标题等，这就是结构化的好处；像我们常规的一个网站，一般有一个导航栏，这个导航栏如果你用导航标签定义后你从代码上看一看就知道了，并且咱们的浏览器也知道；例如你定义了一个导航栏使用了导航标签，这个时候如果是一个视觉不便的人在浏览一个网站时并不能看见哪里是导航栏，但是浏览器知道，在进行无障碍阅读时就会语音播报当前页面的结构，导航栏有哪些、是否要进入某个导航，这就是结构化的作用。（当然这个例子比较片面，在此只是作为一个举例，便于理解其内容）

??小媛：哇，原来是这么回事，上一节的问题我悟了。

??：悟了就行，咱们还可以设置当前表格的宽高，在 table 标签中设置其属性 width 和 height 即可，例如如下示例。

<table width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">

在这里插入图片描述

五、背景色

??：当然你可以使用 bgcolor 属性设置背景色。

<table bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">

在这里插入图片描述
??：也可以指定某一行设置背景色。

<table bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">
    <caption>动漫战斗力统计</caption>
    <thead>
        <tr>
            <th>昵称</th>
            <th>等级</th>
            <th>战力</th>
            <th>种族</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr bgcolor="red">
            <td>萌王</td>
            <td bgcolor="green">未知</td>
            <td>天花板</td>
            <td>史莱姆</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>鹿娘</td>
            <td>99</td>
            <td>190000</td>
            <td>兽族</td>
        </tr>
        <tr>
            <td>莱茵</td>
            <td>999</td>
            <td>9990000</td>
            <td>吸血鬼</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

六、对齐方式

??小媛：那可以设置水平对齐方式吗？

??：可以的，例如你可以使用 align 属性集体设置对齐方式或具体各行、列设置对齐都可以。

<table align="left" bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">
    <caption>动漫战斗力统计</caption>
    <thead>
        <tr>
            <th>昵称</th>
            <th>等级</th>
            <th>战力</th>
            <th>种族</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr bgcolor="red">
            <td>萌王</td>
            <td bgcolor="green">未知</td>
            <td>天花板</td>
            <td>史莱姆</td>
        </tr>
    </tfoot>
    <tbody align="right">
        <tr>
            <td>鹿娘</td>
            <td>99</td>
            <td>190000</td>
            <td>兽族</td>
        </tr>
        <tr>
            <td align="center">莱茵</td>
            <td>999</td>
            <td>9990000</td>
            <td>吸血鬼</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

??小媛：那垂直对齐呢？

??：当然也可以，垂直对其使用 valign 属性，设置方法如下，使用 top、bottom、middle 值，分别对应顶部、底部以及中部（作用于行内）。

<table align="left" bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">
        <caption>动漫战斗力统计</caption>
        <thead valign="bottom">
            <tr>
                <th>昵称</th>
                <th>等级</th>
                <th>战力</th>
                <th>种族</th>
            </tr>
        </thead>
        
        <tfoot>
            <tr bgcolor="red">
                <td>萌王</td>
                <td bgcolor="green">未知</td>
                <td>天花板</td>
                <td>史莱姆</td>
            </tr>
        </tfoot>
        <tbody align="right">
            <tr>
                <td valign="middle">鹿娘</td>
                <td>99</td>
                <td>190000</td>
                <td>兽族</td>
            </tr>
            <tr>
                <td align="center">莱茵</td>
                <td>999</td>
                <td>9990000</td>
                <td>吸血鬼</td>
            </tr>
        </tbody>
    </table>

在这里插入图片描述

七、背景图

??小媛：明白了，还有什么特殊的功能吗？

??：特殊呀那就是给这个单元格添加背景图片，直接在 table 中添加 background 属性就可以了，值就是图片的路径。

<table background="./img/1.png" align="left" bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">

在这里插入图片描述
??小媛：哈哈哈，好花呀，这个不算，还有啥吗？

八、合并单元格

??：那就合并水平单元格？合并垂直的单元格？

??小媛：勉强算你及格吧。

??：合并单元格只需要在某一个单元格 td 抱歉中添加一个 colspan 的属性，并且指定合并单元格的数量即可，例如如下示例。

<table align="left" bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">
    <caption>动漫战斗力统计</caption>
    <thead valign="bottom">
        <tr>
            <th>昵称</th>
            <th>等级</th>
            <th>战力</th>
            <th>种族</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr bgcolor="red">
            <td colspan="2">萌王 战斗力 yyds</td>
            <td>天花板</td>
            <td>史莱姆</td>
        </tr>
    </tfoot>
    <tbody align="right">
        <tr>
            <td valign="middle">鹿娘</td>
            <td>99</td>
            <td>190000</td>
            <td>兽族</td>
        </tr>
        <tr>
            <td align="center">莱茵</td>
            <td>999</td>
            <td>9990000</td>
            <td>吸血鬼</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述
??小媛：这不就是表示占有几个格吗？垂直的怎么做呢？

??：垂直的只需要使用rowspan 属性就可以了。

<table align="left" bgcolor="yellow" width="400" height="500" border="1" bordercolor="blue" cellspacing="15" cellpadding="5">
    <caption>动漫战斗力统计</caption>
    <thead valign="bottom">
        <tr>
            <th>昵称</th>
            <th>等级</th>
            <th>战力</th>
            <th>种族</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr bgcolor="red">
            <td colspan="2">萌王 战斗力 yyds</td>
            <td>天花板</td>
            <td>史莱姆</td>
        </tr>
    </tfoot>
    <tbody align="right">
        <tr>
            <td valign="middle">鹿娘</td>
            <td rowspan="2">99</td>
            <td>190000</td>
            <td>兽族</td>
        </tr>
        <tr>
            <td align="center">莱茵</td>
            <td>9990000</td>
            <td>吸血鬼</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述
??：好了，没了，一点都没了。

??小媛：好的，问题不大，期待下一期学习。

目录

【前端就业课 第一阶段】HTML5 零基础到实战（九）列表
【前端就业课 第一阶段】HTML5 零基础到实战（八）表单详解
【前端就业课 第一阶段】HTML5 零基础到实战（七）文字及图片样式
【前端就业课 第一阶段】HTML5 零基础到实战（六）表格详解
【前端就业课 第一阶段】HTML5 零基础到实战（五）基础元素
【前端就业课 第一阶段】HTML5 零基础到实战（四）伪类与伪元素
【前端就业课 第一阶段】HTML5 零基础到实战（三）一篇文CSS基础入门
【前端就业课 第一阶段】HTML5 零基础到实战（二）超链接
【前端就业课 第一阶段】HTML5 零基础到实战（一）基础代码结构详解

m0_67401935
关注
专栏目录
HTML5中怎么用表格制作一个课程表
Lv200299的博客
09-12 1208
table标签中的border属性表示边框外围的粗细值 solid属性可以控制边框的颜色 background-color可以改变单元格的颜色。表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）单元格：表格中行与列相交所产生的区域。行：表格中的水平间隔；列：表格中的垂直间隔；
2021年web前端开发视频教程零基础自学HTML/VUE/JS全栈项目实战全套课程
DaiMaGe3的博客
03-12 3699
【web前端开发课程介绍】： 随着移动互联网的深入发展，多屏互动和多端兼容友好的界面成为目前系统重要的需求，让前端开发工程师一跃成为目前市场紧俏的人才。 本课程内容包含目前的Vue、React前端框架，把全栈工程师要掌握的前端技术、Node.js相关后台技术、HTML5移动方向开发技术做了系统整合， 致力于培养中高等前端工程师。 为什么选择前端开发？ 1、专业无限制：计算机专业、非计算机专业占比3：4 2、适合零基础：专业、性别不限，没有基础也能学习 3、技术上手快：4个月，快速学习、系统掌握 4、职业生涯
HTML5图表案例，表格+饼图
12-11
js+HTML5，表格可与饼图交互,适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
HTML5表格简单应用案例之[招聘需求表]
穆雄雄的博客
10-22 1233
首先先来看一下实现的效果： 源代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #tab{ width
HTML5 （五） 表格的使用
Lin_junhan的博客
08-16 4115
表格标签的基本使用： 表格标签在过去使用非常多，绝大多数网站都是使用表格标签来制作的，也就是说表格标签是一个时代的代表。 什么是表格标签： 表格标签是用来给一堆数据添加表格语义。 表格是一种数据的展现形式，当数据量非常大时，表格这种展示风格的形式是被认为最为清晰的一种形式。 表格标签的格式： &lt;table&gt; &lt;tr&gt; &lt;td&gt...
JavaScript基础入门：项目实战与语法详解
5. **项目实践**：课程通过项目展示的形式，让学生将所学知识运用到实践中，例如回顾HTML基础知识，掌握常用的HTML标签（如`<html>`、`<head>`、`<title>`、`<body>`等）和表格元素的使用，这有助于巩固理论知识，并...
第七篇：HTML文字与图片属性
m0_66451927的博客
02-02 4834
这是第七篇文章，有一些属性在上一节表格详情里提到一些属性，例如对齐align、颜色color和边框border等，有一些属性在文字或图片里也有，可以联系表格属性学习下面文字和图片的属性。 一、文字属性<font> 1、对齐属性：align 文字的对齐属性和表格的对齐属性一样，设置表格在网页中的水平对齐方式，常用属性值都是left、right、center 2、font标签 face属性用于设置所有字体属性。设置的属性是按顺序的： "font-style font-variant .
第八篇 表单详情 form
m0_66451927的博客
02-08 783
一、表单 1.1基础 表单<from> 1、表单重要属性：action，表示当前表单需要提交的地址 以注册为例，在web开发中，用户需要填写信息并提交完成注册操作，当我们点击提交按钮时，页面会把我们的信息给与到action属性对应的链接里，所以在action后面添加的是一个链接地址， <from action="url链接地址"> </from> 2、<name>属性 了添加<name>会比较规范，容易识别，如果我们添加<na
web全栈前端学习路线-20个真实web开发项目集合
banmajiaoyu的博客
01-03 1297
目前web前端工程师日均岗位缺口已经超过50000，随着互联网+的深入发展，html5作为前端展示技术，市场人才需求量将呈直线上涨。 Web前端工程师的岗位职责是利用HTML、CSS、Java、DOM等各种web技能结合产品的界面开发，制作标准化纯手工代码，并增加交互功能，丰富互联网的Web开拓，致力于改进用户体验。现如今，Web前端工程师已经成为各大互联网公司不可或缺的热门职位，从业者队伍日渐庞大，这其中不乏零基础学习者和转行人士。为了方便大家系统而全面的掌握前端基础知识，小编特意整理了web前端开发入门
完整的漂亮手机模板UI库html5
06-25
完整的漂亮手机模板UI库html5，导航控件，列表控件，表单控件，搜索组件，面板，组件库，对话框，按钮等等；是一个完整的组件库。
表格自适应手机页面
08-27
表格自适应手机站，给父元素添加.table-responsive类，这样宽度不会变，超出的会出现横向滚动条。互联网上最合适的表格自适应布局，你值得拥有。
手机端各DEMO展示列表
03-09
手机端各DEMO展示列表 (提示：浏览器请切换到手机模式) 手机端弹出框 手机端上拉或下拉刷新 手机端列表 手机端启动或关闭遮罩加载 手机端banner滑动
HTML5 表单小案例
Bowen的博客
02-09 936
最近在复习HTML5，手写了一个表单案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 表单小案例</title> <!--引入JQuery--> <script src="plugin/jque...
HTML 5 表单知识点+案例
小柒的前端之旅
04-05 1002
回顾表单 ◆form 表单(form)是网页中最常见的控件之一，可看做容器。 form元素的常见属性： 1: action 用于设置处理表单数据程序的地址。如Inex.html 2: method 用于定义数据传送到服务器的方式。常用方式有GET或POST 3: name 定义表单的名称 4: target 指定输入数据结果显示在哪个窗口，某些情况需要与f...
HTML====表格案例
sumuqi的博客
03-09 631
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" width="600px" height="300p...
HTML_表格实例
热门推荐
Twilight's Blog
01-01 1万+
html表格的几种形式
html5中制作表格,(html5表格的制作.doc
weixin_42342032的博客
06-17 679
(html5表格的制作教学项目五 HTML中表格的制作【教学内容】讲解HTML中制作表格的标志【教学目的】使学生掌握简单表格的制作【教学重点】表格中单元格的合并操作【教学难点】理解属性rowspan与colspan的含义【教学方式】案例分析式、项目教学【教学参考】1．HTML网页制作教程 材义语编著 铁道出版社2、HTML基础与实例 程耀编著 电子工业出版社表格基本标志(1)(2...
HTML5表格，表单的实现过程
z020729的博客
03-21 1706
本篇博客读完，看着图片能够一步一步做出表格就算达到目的，看到表单的图片之后，可以先思考一下自己会如何实现。 从行着手是我发现的一个核心点，大部分表单都可以拆分为一行一行，奇妙的地方在于行里面可能是一张照片，一个文件，所以有些表单给人的感觉就是不太规则，无从下手。 言归正传，看上面图片从所属单位这一行开始（包括这一行），下面所有的内容都是一个正正经经的表格，我们可以想到用table标签来实现这一块的内容。 <h2 style="width: 500px;text-align: cen
HTML5与CSS3：前端开发解决方案与新增特性详解
HTML5与CSS3 Web前端开发技术习题答案是一份针对学习者设计的文档，旨在帮助理解和掌握这两种关键技术在现代Web开发中的关键角色。本资源首先关注HTML5相对于HTML4的主要改进和解决的问题： 1. **兼容性问题**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值