2024年1月6日发(作者：)
HTML5表格
1.1 普通表格
简单的表格由一个table元素，以及一个或者多个tr和td元素组成，其中tr定义行，td定义列。
| 锄禾日当午 |
| 汗滴禾下土 |
1.2 列标题
在数据表格中，每列应包含一个标题，在数据库中这个标题为字段，在HTML中被称为表头单元格。使用th元素定义表头单元格。
默认状态下，th内文本呈现为居中，粗体显示，而td内文本为左对齐的普通文本。
| 单价 | 数量 |
|---|---|
| 50 | 300 |
1.3 表格标题
使用Caption元素可以定义表格标题。表格标题必须随table元素之后，且只能对每个表格定义一个标题。
| 星期一 | 星期二 |
|---|---|
| 张三 | 李四 |
1.4 表格行分组
使用thead, tfoot和thody元素可以对表格进行分组。其中thead定义表头区域，tbody定义数据区域，tfoot定义表注区域，对表格进行分组。
| 信号灯 | 说明|
|---|---|
| 红色 | 禁止通行 |
| 绿色 | 可以通行 |
| 黄色 | 等待通行 |
1.5 表格列分组
使用col和colgroup元素可以对表格列进行分组。主要作用: 为表格一列或多列定义样式。
| 慈母手中线 | 游子身上衣。 | 临行密密缝， |
| 意恐迟迟归。 | 谁言寸草生， | 抱得三春晖。 |
2 表格标签包含大量属性, 其中大部分属性都可以使用CSS属性代替使用，也有几个属性无法使用。
2.1 分离单元格
使用cellpadding属性可以定义单元格边沿与其内容之间的空白，使用cellspacing属性，以定义单元格之间的空格。这两个属性的取值单位为像素或者百分比。
| 值 | 说明 |
|---|---|
| none | 没有线条。 |
| groups | 位于行组和列组之间的线条。 |
| rows | 位于行之间的线条。 |
| cols | 位于列之间的线条。 |
| all | 位于行和列之间的线条。 |
2.2细线边框
使用
| 值 | 说明 |
|---|---|
| none | 没有线条。 |
| groups | 位于行组和列组之间的线条。 |
| rows | 位于行之间的线条。 |
| cols | 位于列之间的线条。 |
| all | 位于行和列之间的线条。 |
2.3 跨单元格显示
Colspan和rowspan属性分别用来定义单元格可跨行或跨列显示。如果取值为0，则表示浏览器横跨到列的最后一列或者行的最后一行。
| 课程表 | ||||
|---|---|---|---|---|
| 星期一 | 星期二 | 星期三 | 星期四 | 星期五 |
| 上午 | ||||
| 语文 | 物理 | 数学 | 语文 | 美术 |
| 数学 | 语文 | 体育 | 英语 | 音乐 |
| 语文 | 体育 | 数学 | 英语 | 地理 |
| 地理 | 化学 | 语文 | 语文 | 美术 |
| 下午 | ||||
| 作文 | 语文 | 数学 | 体育 | 化学 |
| 生物 | 语文 | 物理 | 自修 | 自修 |
2.4 表头单元格
使用scope属性可以将单元格与表头单元格联系起来，取值如下：
Row: 将当前行的所有单元格和表头单元格绑定起来。
Col: 将当前列的所有单元格和表头单元格绑定起来。
Rowgroup: 将单元格所在的行组和表头单元格绑定起来。
Colgroup: 将单元格所在的列组和表头单元格绑定起来。
Scope属性很难在视觉中产生效果。
| 月份 | 金额 | |
|---|---|---|
| 1 | 9 | $100.00 |
| 2 | 4/ | $10.00 |
2.5 绑定表头
使用header属性可以为单元格指定表头，该属性是一个表头名称的字符串，这些属性是用id属性定义的不同表头单元格的名称。
| 类别 | 预算 | 支出 | 差额 |
|---|---|---|---|
| 汽车 | 20000000 | 1800000 | 200000 |
2.6 单元格分类
使用axis属性可以对单元格进行分类，用于对相关的信息进行组合。在一个大型数据表格中，表格里通常塞满了数据，通过分类属性axis，浏览器可以快速检索特定信息。
| 类别 | 预算 | 支出 | 差额 |
|---|---|---|---|
| 汽车 | 20000000 | 1800000 | 200000 |
总结: 在网页设计中，我们要有限度的使用表格。如果使用列表结构或者其它结构标签，会事半功倍，费力不讨好
发布者：admin，转转请注明出处：http://www.yc00.com/news/1704497394a1354643.html
相关推荐
Word表格断开到下一页？教你如何轻松连到上一页
Word表格断开到下一页？教你如何轻松连到上一页 在日常办公和学习中，Word文档是我们常用的文字处理工具，用于撰写报告、论文、简历等各种文档。在这些文档中，表格作为一种重要的数据组织和展示方式，经常被广泛使用。然而，在使用Word表格时
win10电脑无法联网，设置IPv4，点击属性无法打开，闪退
win10设置IPv4，点击属性无法打开，闪退 问题:win10设置IPv4，点击属性无法打开，闪退 问题:win10设置IPv4，
word-重复表格标题
步骤 1、选中要重复的表格标题 2、右击找到表格属性 3、在弹出的对话框里面点击行，在选项里面勾选☑️“在各页顶端以标题行形式重复出现”，默认是未勾选状态，然后确认。 结果
Win7文件夹属性没有位置选项怎么解决
我们在使用电脑的时候，经常会对文件夹的属性进行设置，但是最近不少用户在使用电脑查看的win7系统文件夹属性的时候，发现位置属性不见了，那么Win7文件夹
win7更改计算机属性,win7修改系统属性OEM信息的方法
win7修改系统属性OEM信息的方法分析给大家，我们都知道更改电脑属性里面OEM信息，让电脑更加个性化，OEM就是代工的意思，OEM版一般是Window
visual studio windows 系统环境路径配置（和属性管理器配置）和一些使用问题和解决方法
记录自用，之前遇到的一些使用问题和解决方法。 #include <iostream>的位置： C:Program Files (x86)Microsoft Visual Studi
OverleafLatex：表格过宽太长怎么办？
使用overleaf写表格时候，报出了BUG，显示表格过长 使用简单的缩放指令即可将表格长度进行控制，只要修改scalebox{0.7}{}中的数字即可修改比例 be
imx6ull 通过nfs方式加载armbian定义的文件系统orangepione
U-Boot 2024.04 (Jul 21 2024 - 18:20:25 0800)CPU: i.MX6ULL rev1.1 792 MHz (running at 396 MHz)CPU: Industrial temper
计算机控制面板属性在哪里打开,win7如何打开系统属性面板|win7打开系统属性面板的方法...
win7如何打开系统属性面板？网上讲解关于win7打开系统属性面板的方法有很多种，有时候由于工作需要会打开系统属性面板，查看详细信息。还是有部分用户不知道如何在win7打开系
consider defining a bean of type没有定义类
真TM的搞笑呢,因为这个 exclude{DataSourceAutoConfiguration.class} 多写了这个，导致我扫描不到我的某一个mapper,但是其他的mapper都可以扫描到࿰
评论列表（0条）