HTML表格（HTML 表格的使用，收藏这一篇就够了）

最新推荐文章于 2024-03-20 20:59:51 发布
最新推荐文章于 2024-03-20 20:59:51 发布
阅读量2.7w 收藏 91
点赞数 25
分类专栏： 前端 html 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67393413/article/details/123346945
版权
前端 同时被 2 个专栏收录
35 篇文章 5 订阅
订阅专栏
html
35 篇文章 0 订阅
订阅专栏

HTML 表格

文章目录

1. 表格的定义

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构；其中： <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格，具体在本文都有讲解；

2. 表格的标签

在HTML定义表格的时候，有以下标签供我们使用

NO

表格标签

用处

1

<table>

定义表格，生成的表格在一对<table></table>中；

2

<caption>

定义表格标题，当表格需要标题时，使用<caption>表格标题</caption>

3

<thead>

定义表格的页眉

4

<tbody>

定义表格的主体

5

<tfoot>

定义表格的页脚

6

<th>

定义表格的表头，一般是表头中的内容会被加黑；

7

<tr>

定义表格的行

8

<td>

定义表格单元格

9

<col>

定义用于表格列的属性

10

<colgroup>

定义表格列的组

3. 单元格边框(border)

表格边框：在使用<table border="1"></table> 的方式来定义，其中：数字表示边框的宽度，单位为像素；以下举三个边框的例子；

<!--无边框-->
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td>女</td>
    </tr>

</table>

<br>
<!--边框宽度为2-->
<table border="2">
    <tr>
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td>女</td>
    </tr>

</table>
<br>

<!--边框宽度为10-->
<table border="10">
    <tr>
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td>女</td>
    </tr>

</table>

上述代码效果：
在这里插入图片描述

4. 合并单元格

合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格），举例如下：

4.1 合并行单元格(colspan)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯</title>
</head>
<body>

<h4>合并行单元格：</h4>
<table border="1">
<caption>通讯录</caption>
<tr>
  <th>姓名</th>
  <th colspan="2">邮箱</th>
</tr>
<tr>
  <td>zhang kai</td>
  <td>123456@qq.com</td>
  <td>123456@163.com</td>
</tr>
</table>

</body>
</html>

上述代码效果：
在这里插入图片描述

4.2 合并列单元格(rowspan)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯</title>
</head>
<body>

<h4>合并列单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="3">邮箱</th>
  <td>123456@qq.com</td>
</tr>
<tr>
  <td>123456@163.com</td>
</tr>
<tr>
  <td>123456@sina.com</td>
</tr>
</table>

</body>
</html>

上述代码效果：
在这里插入图片描述

5. 表格格式设置

5.1 单元格的对齐（align）（居中，左对齐，右对齐）

在对应的标签上增加 align 键值对，生效方式为"就近原则"，如下例中，桃花公主单元格为left生效；

align 值

left

center

right

效果

左对齐

居中

右对齐

<table width="600" border="2">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left">马里奥</td>
        <td align="right">男</td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td>女</td>
    </tr>
</table>

上述代码效果（为了看清效果，所以设置了表格宽度 width=“600” ）：
在这里插入图片描述

5.2. 背景色&图片（bgcolor & background）

  • 添加背景色使用：bgcolor
  • 添加背景图片使用：background
5.2.1 单元格背景色&图片

在单元格的标签上增加 bgcolor 或者 background，就可以添加背景色或者背景图片，以背景色为例；

<table width="600" border="2">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right">男</td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td>女</td>
    </tr>
</table>

上述代码效果：
在这里插入图片描述

5.2.2 表格背景色&图片

在表格的标签上增加bgcolor 或者 background，就可以添加背景色或者背景图片，以背景图片为例；

<table width="600" border="2" background='https://p1.ssl.qhimgs1.com/sdr/400__/t01f04c2504aa62bab7.gif'>
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left">马里奥</td>
        <td align="right">男</td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td>女</td>
    </tr>

</table>

上述代码效果（由于我挑了一张动态图，所以这里的背景是动态的！）：
在这里插入图片描述

5.3 单元格的边距（cellpadding）

在<table></table>标签使用cellpadding 即可，方法与上面的图片一样，直接举例如下：

<table width="600" border="2" cellpadding="8">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right">男</td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td>女</td>
    </tr>
</table>

上述代码效果：
在这里插入图片描述

5.4 单元格间的距离(cellspacing)

在<table></table>标签使用 cellspacing 即可，方法与上面的图片一样，直接举例如下：

<table width="600" border="2" cellspacing="8">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right">男</td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td>女</td>
    </tr>
</table>

上述代码效果：
在这里插入图片描述

5.5 显示部分边框（frame & rules）

  • 可以在<table></table>标签内，增加 frame 键值对，控制表格外边框；键值对对应关系如下：

frame 键值

效果

void

不显示外侧边框

above

显示上部的外侧边框

below

显示下部的外侧边框

hsides

显示上部和下部的外侧边框

vsides

显示左边和右边的外侧边框

lhs

显示左边的外侧边框

rhs

显示右边的外侧边框

box

在所有四个边上显示外侧边框

border

在所有四个边上显示外侧边框

  • 可以在<table></table>标签内，增加 rules 键值对，控制表格外边框；键值对对应关系如下：

frame 键值

效果

none

没有线条

groups

位于行组和列组之间的线条

rows

位于行之间的线条

cols

位于列之间的线条

all

位于行和列之间的线条

  • frame 举例如下：

    编号 姓名性别
    1马里奥男
    2桃花公主女

输出效果：
在这里插入图片描述

  • rules举例如下：

    编号 姓名性别
    1马里奥男
    2桃花公主女

输出效果：
在这里插入图片描述

m0_67393413
关注
  • 25
    点赞
  • 踩
  • 91
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML-table表格详解
主营前端方向，技术栈是vue
11-17 1万+
table表格(结构设置tr行、td列，rowspan纵合并colspan横合并,spacing边距collapse边框合并，thead表头tbody表体tfoot表底，补充)
前端把html表格生成为excel表格的实例
08-29
下面小编就为大家带来一篇前端把html表格生成为excel表格的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html制作细线表格的简单实例
09-28
下面小编就为大家带来一篇html制作细线表格的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
表格-HTML基础
最新发布
2301_78835635的博客
03-20 785
在过去的web1.0时代，表格常用于页面布局。但在web2.0中，这种用表格的页面布局方式已经被抛弃，现在的网页布局都是使用CSS来实现的。但是表格并不是一无是处，表格在实际开发中是用得非常多的，因为使用表格可以更清晰地排列数据。
【HTML】HTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-18 7760
一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 ) 二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 ) 三、表头单元格标签 四、表格标题标签 五、合并单元格 1、合并单元格方式 2、合并单元格顺序 3、合并单元格流程 六、合并单元格示例 1、原始表格 2、跨行合并单元格 3、跨列合并单元格
HTML——表格
热门推荐
三三木木七的博客
05-19 1万+
🌳🌳🌳前言：本文总结了HTML表格的基础知识点 目录 🍄表格——创建 🍄表格——border 🍥表格——border 🍄表格——设置表格的宽、高 🌰举个例子——设置表格的宽、高 🍥表格——width 🍥表格——height 🍄表格——cellpadding 🌰举个例子——cellpadding 🍥表格——cellpadding 🍄表格——cellspacing 🌰举个例子——cellpadding 🍥表格——cellspacing 🍄表格——表格的标题 🌰举个例子...
HTML学习笔记11-HTML表格
doulihang的博客
08-08 243
一、HTML表格定义 1.<table>标签定义表格 2.<tr>标签定义表格的行 3.<td>标签定义单元格 接下来创建一个简单表格，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
html中table标签用法
chengxuzx的博客
05-29 1万+
1.<table> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>biaoge</title> </head> <body> <table border="1" cellpadding="0" cellspacing="8"> <tr> ...
HTML 中的Table标签
AI_dkx的博客
06-30 3533
Table标签如何使用，Table页面布局，Table属性介绍
HTML第二章 “表格”详解 （附带详细代码与解释）！！！
a2499797637的博客
09-30 7956
1.表格的语法、2. 表格的可选标记、3. 表格的属性、4. 不规则的表格、5. 表格的大小
HTML常用标签之表格table
weixin_45604020的博客
06-20 1985
表格由一对标签包裹，每一行由标签包裹，表头由标签包裹，行内容由标签包裹：表格默认没有边框，如果需要添加边框则需设置border，cellspacing="0"表示单元格之间距离为0
HTML—表格
Ywyyy231128的博客
11-14 4490
此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。***一个表格只能有一个标题，也就是只能有一个caption标签。***分析：在默认情况下，表格是没有边框的。***说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们具有以下区别。***说明：在表格中，有多少组“",就表示有多少行。
浅谈Html网页表格结构化标记的应用
09-28
下面小编就为大家带来一篇浅谈Html网页表格结构化标记的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML基础重点_一般标签、常用标签和表格
09-28
下面小编就为大家带来一篇HTML基础重点_一般标签、常用标签和表格。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
有关HTML表格边框的设置小技巧
09-28
下面小编就为大家带来一篇有关HTML表格边框的设置小技巧。小编觉得挺不错的，现在分享给大家，也给大家做个参考
html自适应表格的方法
09-22
小编今天为大家介绍一篇HTML自适应表格的方法，希望对大家有所帮助。
HTML表格
ZzStant的博客
09-19 336
[HTML表格] 目录[HTML表格]1.创建表格2.表格属性3.表格标签4.表格结构5.表格标题6.合并单元格7.总结表格 1.创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： 在浏览器显示如下： … … 单元格内的文字 在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr>&...
HTML创建表格
qq_51049931的博客
07-08 1万+
制作网页时，使用表格可以更清晰的排列数据，是网页制作中使用最多的形式之一。 一、创建并设置表格属性 1.表格的基本标记——table、tr、td 表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记） 行：表格中的水平间隔； 列：表格中的垂直间隔； 单元格：表格中行与列相交所产生的区域。 基本语法： ...
【HTML】如何使用html制作一个简易的表格？
萌萌白白的博客
02-16 3463
如何使用html制作一个简易的表格
请写一篇教程介绍HTML元素
03-27
HTML元素是构成HTML页面的基本组成部分，它们用于定义页面的结构、内容和样式。本教程将向您介绍HTML元素的基本语法和使用方法。 1. HTML元素的基本语法 HTML元素由一个开始标签、一个结束标签和它们之间的内容组成，如下所示： ``` <标签名>内容</标签名> ``` 开始标签通常以`<`开头，结束标签以`</`开头，标签名紧跟着。开始标签和结束标签之间可以包含元素的内容。 有些元素没有结束标签，它们是自闭合的，如`<br>`标签。 2. HTML元素的常见属性 HTML元素可以有属性，它们用于指定元素的特性和行为。常见的属性有： - `class`：指定元素的样式类名； - `id`：指定元素的唯一标识符； - `style`：指定元素的样式； - `src`：指定元素的资源路径； - `href`：指定元素的超链接目标； - `alt`：指定元素的替代文本。 属性通常包含在开始标签中，如下所示： ``` <标签名 属性名1="属性值1" 属性名2="属性值2">内容</标签名> ``` 3. HTML元素的常见类型 HTML元素有很多种类型，这里列举一些常见的类型及其作用： - 标题类型：用于定义页面的标题，包括`<h1>`、`<h2>`、`<h3>`、`<h4>`、`<h5>`和`<h6>`； - 段落类型：用于定义文本段落，包括`<p>`； - 列表类型：用于定义有序列表和无序列表，包括`<ol>`、`<ul>`和`<li>`； - 超链接类型：用于定义超链接，包括`<a>`； - 图像类型：用于定义图像，包括`<img>`； - 表格类型：用于定义表格，包括`<table>`、`<tr>`、`<th>`和`<td>`； - 表单类型：用于定义表单，包括`<form>`、`<input>`、`<label>`、`<select>`、`<textarea>`和`<button>`。 4. HTML元素的嵌套和层级关系 HTML元素可以相互嵌套和包含，形成层级关系。例如，一个列表项`<li>`可以包含一个超链接`<a>`，而一个超链接`<a>`可以包含一个图像`<img>`。 HTML元素的层级关系影响它们的样式和行为。例如，一个元素的样式可能会被它的父元素的样式所覆盖，而一个表单元素的行为可能会受到它所在表单的限制。 以上是HTML元素的基本介绍，希望对您有所帮助。如果您想深入了解HTML元素的使用方法，可以参考相关的教程和文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值