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

最新推荐文章于 2024-06-20 10:34:39 发布
最新推荐文章于 2024-06-20 10:34:39 发布
阅读量716 收藏 1
点赞数
分类专栏： 前端 html 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54861649/article/details/123422240
版权
html 同时被 2 个专栏收录
51 篇文章 1 订阅
订阅专栏
前端
50 篇文章 3 订阅
订阅专栏

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桃花公主女

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

每日一小知识
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【基础知识09】HTML中table知识点
大前端开发工程师、互联网方向创业者
09-22 1062
HTML表格知识点详解
HTML 表格
方寸想法，编码宇宙
04-25 1859
文章目录表格简述表格代码框架表格属性1.table属性2.tr属性3.thead/tbody/tfoot属性4.td和th属性单元格合并表格嵌套表格组合表格宽度的变化表格布局 表格简述 表格是一个可自定义的容器，因而它就是我们用以实现页面构设的利器。把表格称作容器缘于表格的装载特性。表格是用于装载数据的， 与我们现实中所看到和理解的表格非常一致。表格不仅仅只能装载数据，它还被广泛地应用于网页的布局...
HTML第二章 “表格”详解 （附带详细代码与解释）！！！
a2499797637的博客
09-30 8399
1.表格的语法、2. 表格的可选标记、3. 表格的属性、4. 不规则的表格、5. 表格的大小
HTML表格使用全指南，真的很详细
最新发布
(黎子)人生编码
06-20 1485
通过使用CSS媒体查询和JavaScript，开发者可以创建出既美观又实用的表格，确保用户在任何设备上都能获得良好的浏览体验。通过合理的语义化标签使用，开发者可以创建出既美观又易于理解的表格。通过使用适当的属性和技巧，我们可以提高表格的可访问性。通过CSS样式设计和布局控制，HTML表格不仅可以提供清晰的数据展示，还能成为网页上的美观元素。跨行和跨列是表格设计中常用的技术，用于合并单元格，使表格布局更加灵活和紧凑。控制表格的布局对于确保数据的可读性和表格的整体美观至关重要。标签进行表格的语义化。
HTML—表格
Ywyyy231128的博客
11-14 4702
此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。***一个表格只能有一个标题，也就是只能有一个caption标签。***分析：在默认情况下，表格是没有边框的。***说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们具有以下区别。***说明：在表格中，有多少组“",就表示有多少行。
【HTML学习笔记】表格、列表、表单标签
有准备的人
09-19 431
HTML学习笔记
HTML-----第二章表格及样式
BUG专业户
05-20 3298
表格 CSS样式入门 基础选择器
HTML表格布局实际使用详解
09-28
本篇文章将深入探讨HTML表格的实际使用和布局计算。 首先，表格在HTML中以`<table>`标签开始，由`<tr>`（行）标签定义每一行，`<td>`（数据单元格）标签定义单元格，`<th>`（表头）标签用于创建表头单元格。表格的...
Android使用Jsoup解析Html表格的方法
09-03
本篇文章将详细介绍如何在Android应用中使用Jsoup来解析HTML表格。 首先，Jsoup是一个Java库，它提供了丰富的API来解析HTML，提取数据，并执行DOM操作。它的功能包括选择器（类似于CSS选择器）来定位元素，以及方便...
HTML5制作表格样式
09-27
本篇文章将详细介绍如何使用HTML5来制作一个美观、易于理解的表格，并通过CSS进行样式定制，使其更具吸引力。首先，我们来看一下基本的HTML结构。 ```html <!DOCTYPE html> <html> 表格 /* CSS样式代码 */ ...
html制作细线表格的简单实例
12-14
HTML表格是网页设计中常用的元素，用于展示结构化数据。在制作细线表格时，我们需要对HTML表格的一些属性进行精细调整，以达到理想中的视觉效果。...如果你在学习过程中遇到类似问题，希望这篇解释能为你提供帮助。
html5-demo报表挺全挺不错
11-07
html5-demo报表挺全挺不错html5报表开发必备资源 值得学习借鉴
HTML5报表统计静态页面
09-18
一份很好的静态页面，Html5编写的网页，支持移动端，Index首页打开
js 静态HTML表格排序功能实现
10-30
本篇将详细介绍如何使用JavaScript实现静态HTML表格的排序功能。 首先，我们需要一个包含数据的HTML表格结构。在提供的示例中，表格由`<table>`元素定义，包含表头`<th>`和数据行`<tr>`。每个数据单元格`<td>`中...
HTML基础之表格
拄着拐儿唱儿歌的博客
01-10 798
HTML基础之表格
html表格定义
weixin_51241884的博客
03-08 1511
table：定义表格 border：规定表格边框的宽度 width ：规定表格的宽度 cellspacing：规定单元格之间的空白 <table cellspacing="0" width="500" border="1"> tr ：定义行 align：定义表格行的内容对齐方式 td ：定义单元格 rowspan:规定单元格可横跨的行数 rowspan="x"后跟合并格数x colspan:规定单元格可横跨的列数 colspon="x"后跟合并格数x <tr>
原生 html 绘制表格
qq_41365048的博客
03-21 1133
心血来潮，打开自己电脑的 idea 找到 n 久之前自己练手的 demo, 觉得还挺有用的，就随手记录一下咯。如果各位看官有更加便捷的方式或插件绘制表格的方法也可以留言讨论一下哈。 实现效果： 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生成绩表</title> </head> <bod
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 8万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
07.HTML------03.表格的样式
weixin_52551539的博客
11-14 2296
我们可以对表格设置样式，在设置样式我们可以将表格当成块元素来处理（与块元素不同的是，他的宽度默认是由内容撑开的），我们可以设置表格的宽度，位置（左右边距、居中、边框border），也可以设置对单元格的样式（边框--不设置的话默认就没有，单元格之间的距离以及单元格边框合并，要注意的是这个样式要在table里面设置而不是在td里面）进行设置。 1. 设置表格table样式： 设置单元格边框之间的距离：border-spacing:多少像素；当距离设置为0时，相邻...
HTML表格标记详解与文档结构
"这篇教程主要介绍了HTML中的表格（TABLE）标记，这是HTML中用于创建表格的重要元素。在HTML中，表格是由、和等元素构成的。下面将详细阐述这些元素的功能及其使用方法。 首先，元素是定义表格的核心，每个表格都...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值