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

news2024/11/16 20:43:07

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

今天聊聊 table。HTML <table> 元素用于创建表格，它是一种将数据按行和列组织排列的结构，用于在网页中呈现复杂的数据集。HTML 表格具有以下 2 种主要用途：

1、显示数据： 最常见的用途是以表格形式展示数据，如产品价格、学生成绩、电影时间表等。表格可以清晰地展示数据的结构和关系。

2、创建表单： 表格可以用于创建网页表单，通过在表格单元格中放置表单控件（如文本框、复选框、下拉菜单等），用户可以方便地输入数据。

HTML 表格由多个标签组成，主要包括以下几个核心标签：

<table>：定义表格的整体结构。

<tr>：定义表格中的行。

<th>：定义表格中的表头单元格（标题单元格）。

<td>：定义表格中的数据单元格（普通单元格）。每个单元格可以包含各种类型的内容，包括文本、图像、链接等。此外，单元格还可以包含其他 HTML 元素，如段落、列表、表单等。

<caption>：定义表格的标题。

这些标签一起构成了一个完整的 HTML 表格结构，用于在网页中呈现数据和信息。

来开始直接上案例吧。

案例

1、基础表格

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简单表格示例</title>
  </head>
  <body>
    <h2>学生成绩</h2>

    <table border="1">
      <thead>
        <tr>
          <th>学生编号</th>
          <th>姓名</th>
          <th>数学成绩</th>
          <th>科学成绩</th>
          <th>英语成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>90</td>
          <td>85</td>
          <td>88</td>
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>95</td>
          <td>92</td>
          <td>90</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

效果如下：

图片

上面表格效果双线的有点丑，对不对，怎么变成单线的呢？只需要，在 table 上，加一个设置表格边框合并为单线的 CSS，加载在 head 标签 里面。如下代码。

<style>
  table {
    border-collapse: collapse; /* 设置表格边框合并为单线 */
  }
</style>

效果如图。

图片

然而，有时候，为了使得表格内容更加清晰、易读，基础表格无法满足，这时候，跨行，跨列就起作用了。

2、单元格跨行 & 单元格跨列 实例

当我们在设计表格时，有时候需要让单元格横跨多行或多列，这就是 rowspan 和 colspan 的作用。

rowspan 表示纵向跨度，用于指定一个单元格要横跨的行数。

colspan 表示横向跨度，用于指定一个单元格要横跨的列数。

通过这两个属性，我们可以控制单元格的跨度，使得表格布局更加灵活，能够满足不同的设计需求。比如：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生信息表格</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>学生信息表格</h2>

    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th colspan="3">地址</th>
          <!-- 地址单元格跨三列,所以后面不需要再写了 -->
        </tr>
        <tr>
          <th></th>
          <th>省份</th>
          <th>市区</th>
          <th>详细地址</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>广东省</td>
          <td>深圳市</td>
          <td>南山区某某街道</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>北京市</td>
          <td>北京市</td>
          <td>朝阳区某某路</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

这里呢，姓名的下一行空着，地址的右边空着，如图。如果姓名能和下边合并是不是更好看，地址单元格和右边合并是不是更合理？

图片

所以这时候，就要用到上面提到的 2 个属性了。

怎么写呢？

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生信息表格</title>
    <style>
      table {
        border-collapse: collapse;
        width: 800px;
      }
      th,
      td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>学生信息表格</h2>

    <table>
      <thead>
        <tr>
          <th rowspan="2">姓名</th>
          <!-- 姓名单元格占2行 -->
          <th colspan="3">地址</th>
          <!-- 表头单元格跨越3列，用于显示地址信息 -->
        </tr>
        <tr>
          <!-- <th></th>  这个注释掉，因为，姓名单元格跨行已经占住这一个单元格了-->
          <th>省份</th>
          <th>市区</th>
          <th>详细地址</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>广东省</td>
          <td>深圳市</td>
          <td>南山区某某街道</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>北京市</td>
          <td>北京市</td>
          <td>朝阳区某某路</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

以上，对于我们新手呢，在学习的时候，要注意一下 3 点；

1) 在编写 HTML 代码时，注意 colspan 和 rowspan 的位置和属性值，确保语法正确。

2) 注意合并单元格后的布局和样式，确保合并后的表格仍然清晰易读。

3) 确保合并的单元格数不超过实际存在的单元格数，避免出现错位或错列的情况。

尤其最后 1 点，一定要数清占用的行数，被占用，该去掉的一定要去掉，否则，表格就有 bug 了，如图。

图片

表格格式设置

案例讲完了，现在呢，详细学习关于 HTML 表格格式设置的属性，这些还是比较简单的。

1、单元格对齐（align）属性：用于控制表格中单元格内容的水平对齐方式。

可选取值：left（左对齐）、right（右对齐）、center（居中对齐）。

示例代码：<td align="center">内容</td>

2、表格和单元格的背景颜色（bgcolor）属性：用于设置表格或单元格的背景颜色。

可以使用颜色名称、十六进制值或 RGB 值。

示例代码：<table bgcolor="#f0f0f0"> 或 <td bgcolor="lightblue">内容</td>

3、单元格内边距（cellpadding）属性：用于设置单元格内部内容与边框之间的间距。

取值为像素值或百分比值，项目里通常都是0，扁平化的。

示例代码：<table cellpadding="10"> 或 <td cellpadding="5">内容</td>

4、单元格间距（cellspacing）属性：用于设置单元格之间的间距。

取值为像素值或百分比值，项目里通常都是0。

示例代码：<table cellspacing="5">

5、表格框架形态（frame）属性：用于设置表格边框的框架规则，包括以下几种取值：

可选取值：void（无边框，默认值）、above（在表格上方显示边框）、below（在表格下方显示边框）、hsides（显示上部和下部的外侧边框）、vsides（显示左边和右边的外侧边框）、lhs（在左侧显示边框）、rhs（在右侧显示边框）、border（显示完整边框）。

示例代码：<table frame="void"> 或 <table frame="hsides">

好，那一起来看个案例吧。

<table cellpadding="10" cellspacing="0" frame="vsides">
  <!-- 表格的边框为1个像素 -->
  <!-- 单元格的内边距为10像素 -->
  <!-- 单元格之间的间距为0像素 -->
  <!-- 边框规则为两侧边框 -->
  <caption>
    学生表
  </caption>
  <!-- 表头 -->
  <thead>
    <tr>
      <th bgcolor="#777" align="center">学号</th>
      <th bgcolor="#777" align="center">姓名</th>
      <th bgcolor="#777" align="center">年龄</th>
      <th bgcolor="#0f0" align="center">性别</th>
    </tr>
  </thead>
  <!-- 表格内容 -->
  <tbody>
    <tr>
      <td align="center">1001</td>
      <td align="center">张三</td>
      <td align="center">20</td>
      <td align="center">男</td>
    </tr>
    <tr>
      <td bgcolor="#0ff" align="center">1002</td>
      <td align="right">李四</td>
      <td align="center">22</td>
      <td align="center">女</td>
    </tr>
  </tbody>
</table>

效果如下图：

图片

需要注意的是，这里面的属性，最不常用的就是 frame 属性。为什么呢？

虽然 frame 属性可以控制表格边框的显示方式，但是它的功能相对简单，无法实现复杂的边框效果。如果更具体的的样式，还是要依托于 CSS 会更好，这个后续会详细写到。

虽然 frame 属性可以控制表格边框的显示方式，但是它的功能相对简单，无法实现复杂的边框效果。如果更具体的的样式，还是要依托于 CSS 会更好，这个后续会详细写到。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1526586.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

java方法的引用传递和值传递

java方法的引用传递和值传递

1、方法的值参数传递 下面代码&#xff0c;它会在控制台输出什么&#xff1f; public class ArrayTest {public static void main(String[] args) {int number 100;System.out.println(number);change(number);System.out.println(number);}public static void change(int n…
阅读更多...
Qt学习--继承（并以分文件实现）

Qt学习--继承（并以分文件实现）

基类 & 派生类 一个类可以派生自多个类&#xff0c;这意味着&#xff0c;它可以从多个基类继承数据和函数。定义一个派生类&#xff0c;我们使用一个类派生列表来指定基类。类派生列表以一个或多个基类命名。 总结&#xff1a;简单来说&#xff0c;父类有的&#xff0c;子…
阅读更多...
【Paper Reading】6.RLHF-V 提出用RLHF的1.4k的数据微调显著降低MLLM的虚幻问题

【Paper Reading】6.RLHF-V 提出用RLHF的1.4k的数据微调显著降低MLLM的虚幻问题

分类 内容 论文题目 RLHF-V: Towards Trustworthy MLLMs via Behavior Alignment from Fine-grained Correctional Human Feedback 作者 作者团队&#xff1a;由来自清华大学和新加坡国立大学的研究者组成&#xff0c;包括Tianyu Yu, Yuan Yao, Haoye Zhang, Taiwen He, Y…
阅读更多...
[SaaS] 淘宝设计AI

[SaaS] 淘宝设计AI

“淘宝设计AI” 让国际大牌造世界双11超级品牌 超级发布https://mp.weixin.qq.com/s/xFVDARQHxlweKAYG91DtYw下面是一个完整的品牌营销海报设计流程&#xff0c;AIGC起到了巨大作用&#xff0c;但是仍然很难去一步解决这个问题&#xff0c;还是逐步修改的一个过程。 Midjouner…
阅读更多...
java 面向对象--equals方法

java 面向对象--equals方法

Object 类的使用 类 java.lang.Object是类层次结构的根类&#xff0c;即所有其它类的父类。每个类都使用 Object 作为超类。 Object类型的变量与除Object以外的任意引用数据类型的对象都存在多态引用 method(Object obj){…} //可以接收任何类作为其参数 Person o new Person…
阅读更多...
【NTN 卫星通信】 TN和多NTN配合的应用场景

【NTN 卫星通信】 TN和多NTN配合的应用场景

1 场景描述 此场景描述了农村环境&#xff0c;其中MNO (运营商TerrA)仅在城市附近提供本地地面覆盖&#xff0c;而MNO (SatA)提供广泛的NTN覆盖。SatA使用GSO轨道和NGSO轨道上的卫星。SatA与TerrA有漫游协议&#xff0c;允许:   所有TerrA用户的连接&#xff0c;当这些用户不…
阅读更多...
超分之SwinIR

超分之SwinIR

SwinIR: Image restoration using Swin TransformerSwinIR: 使用Swin Transformer 进行图像恢复Liang J, Cao J, Sun G, et al.Proceedings of the IEEE/CVF international conference on computer vision. 2021: 1833-1844. 摘要 首先&#xff0c;介绍了Image restoration的含…
阅读更多...
Ingress 基于URL路由多个服务

Ingress 基于URL路由多个服务

文章目录 前言一、基于请求地址转发不同应用的pod1.创建一个nginx的pod和一个apache的pod及其各自的service2.创建ingress实现一个地址两个path分别访问nginx和apache3.验证根据域名web2.study.com的两个路径/foo和/bar来访问到不同的pod4.分别在nginx和apache的pod里创建网站目…
阅读更多...
win32汇编弹出对话框

win32汇编弹出对话框

之前书上有一个win32 asm 的odbc例子&#xff0c;它有一个窗体&#xff0c;可以执行sql&#xff1b;下面看一下弹出一个录入数据的对话框&#xff1b; 之前它在.code段包含2个单独的asm文件&#xff0c;增加第三个&#xff0c;增加的这个里面是弹出对话框的窗口过程&#xff0…
阅读更多...
Python--类中作用域

Python--类中作用域

1、在面向对象编程中&#xff0c;主要的变量就是成员变量&#xff08;属性&#xff09;和局部变量 class Cat:# 属性name Noneage None# n1, n2, result为局部变量def cal(self, n1, n2):result n1 n2print(f"result{result}") 2、作用域的分类&#xff1a;属性…
阅读更多...
Vue3-03_组件基础_上

Vue3-03_组件基础_上

单页面应用程序 什么是单页面应用程序 单页面应用程序&#xff08;英文名&#xff1a;Single Page Application&#xff09;简称 SPA&#xff0c;顾 名思义&#xff0c;指的是一个 Web 网站中只有唯一的一个 HTML 页面&#xff0c;所有的 功能与交互都在这唯一的一个页面内完…
阅读更多...
09｜代理（上）：ReAct框架，推理与行动的协同

09｜代理（上）：ReAct框架，推理与行动的协同

应用思维链推理并不能解决大模型的固有问题&#xff1a;无法主动更新自己的知识&#xff0c;导致出现事实幻觉。也就是说&#xff0c;因为缺乏和外部世界的接触&#xff0c;大模型只拥有训练时见过的知识&#xff0c;以及提示信息中作为上下文提供的附加知识。如果你问的问题超…
阅读更多...
Fitten Code对JetBrains支持再升级，新增7大功能

Fitten Code对JetBrains支持再升级，新增7大功能

十科技基于计图框架&#xff0c;推出基于代码大模型的 AI 代码助手 ——Fitten Code&#xff0c;今天&#xff0c;Fitten Code再升级&#xff0c;新增7大功能。特此转载。 「一键开启编程新时代&#xff0c;Fitten Code 对 JetBrains 支持再升级&#xff01;」 Fitten Code代码…
阅读更多...
新火种AI|英伟达GTC大会在即，它能否撑住场面，为AI缔造下一个高度？

新火种AI|英伟达GTC大会在即，它能否撑住场面，为AI缔造下一个高度？

作者&#xff1a;小岩 编辑&#xff1a;彩云 英伟达不完全属于AI行业&#xff0c;但神奇的是&#xff0c;整个AI领域都有着英伟达的传说。因为几乎所有的AI巨头都需要英伟达的芯片来提供算力支持。 也正因此&#xff0c;纵使AI赛道人来人往&#xff0c;此起彼伏&#xff0c;…
阅读更多...
zabbix企业微信接入结合海螺问问编写的shell脚本

zabbix企业微信接入结合海螺问问编写的shell脚本

前言 博客懒得写详细了&#xff0c;视频剪的累死了&#xff0c;看视频就好了 白帽小丑的个人空间-白帽小丑个人主页-哔哩哔哩视频 shell脚本 #!/bin/bash #set -x CorpID"" #我的企业下面的CorpID Secret"" #创建的应用那…
阅读更多...
阿里云服务器计算型、通用型、内存型各实例计算、存储等性能介绍

阿里云服务器计算型、通用型、内存型各实例计算、存储等性能介绍

在阿里云目前的活动中&#xff0c;属于计算型实例规格的云服务器有计算型c7、计算型c7a、计算型c8a、计算型c8y这几个实例规格&#xff0c;属于通用型实例规格的云服务器有通用型g7、通用型g7a、通用型g8a、通用型g8y&#xff0c;属于内存型实例规格的云服务器有内存型r7、内存…
阅读更多...
Linux信号机制（二）

Linux信号机制（二）

目录 一、信号的阻塞 二、信号集操作函数 三、sigprocmask函数 四、pause函数 五、sigsuspend函数 一、信号的阻塞 有时候不希望在接到信号时就立即停止当前执行&#xff0c;去处理信号&#xff0c;同时也不希望忽略该信号&#xff0c;而是延时一段时间去调用信号处理函数。…
阅读更多...
【闲聊】-后端框架发展史

【闲聊】-后端框架发展史

框架&#xff0c;是为了解决系统复杂性&#xff0c;提升开发效率而产生的工具&#xff0c;主要服务于研发人员。 当然&#xff0c;框架还有更深层的作用&#xff0c;框架的沉淀是一种高级的抽象&#xff0c;会将人类的业务逐步抽象为统一标准又灵活可变的结构&#xff0c;为各行…
阅读更多...
Java-CAS 原理与 JUC 原子类

Java-CAS 原理与 JUC 原子类

由于 JVM 的 synchronized 重量级锁涉及到操作系统&#xff08;如 Linux&#xff09; 内核态下的互斥锁&#xff08;Mutex&#xff09;的使用&#xff0c; 其线程阻塞和唤醒都涉及到进程在用户态和到内核态频繁切换&#xff0c; 导致重量级锁开销大、性能低。 而 JVM 的 synchr…
阅读更多...
影响汇率的因素？fpmarkets澳福总结几个

影响汇率的因素？fpmarkets澳福总结几个

汇率对于刚刚开始外汇交易的新手来说非常重要&#xff0c;这不是没有道理的&#xff0c;了解汇率如何变化以及怎么变化有助于在外汇交易中获得稳定的利润。那么影响汇率的因素有哪些&#xff1f;fpmarkets澳福总结几个。 任何国家货币的汇率都是由市场决定的。主要的市场因素是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023