如何使用 CSS 设置 HTML 表格样式
在 Web 开发的早期,HTML 表格非常基础,缺乏广泛的样式选项。然而,今天,大多数表格的样式都旨在为用户创造更美观和更实用的体验。
CSS 为样式表提供了许多属性。这些属性允许您(除其他外)分隔表格中的单元格、指定表格边框以及指定表格的宽度和高度。
本教程将通过示例讨论如何使用 CSS 设置表格样式。在本教程结束时,您将成为这方面的专家。
HTML 表格
HTML 代码定义了表格的结构。您使用 <table> 标记来定义表格。<tr>、<th> 和 <td> 标记分别指定行、表头和内容单元格。
让我们看一个 HTML 表格的例子。在下面的示例中,我们有一个表格,其中列出了 2020 年 3 月 23 日这一周纽约时报畅销书排行榜上的前五本书:
我们表的代码如下:
<table><tr><th>Book Name</th><th>Author</th><th>Weeks on List</th></tr><tr><td>The Mirror & the Light</td><td>Hilary Mantel</td><td>New this Week</td></tr><tr><td>Journey of the Pharaohs</td><td>Clive Cussler and Graham Brown</td><td>New this Week</td></tr><tr><td>Where the Crawdads Sing</td><td>Delia Owens</td><td>79</td></tr><tr><td>American Dirt</td><td>Jeanine Cummings</td><td>8</td></tr><tr><td>Little Fires Everywhere</td><td>Celeste Ng</td><td>57</td></tr>
</table>
该表包括三列六行,包括一个标题行。
CSS 表格
CSS用于样式表。虽然上表以有组织的方式显示数据,但它是用纯 HTML 编写的(不存在样式)。通过使用 CSS,您可以使表格更美观。
您可以使用许多 CSS 函数来设置表格样式。使用 CSS,您可以:
- 添加边框
- 折叠边框
- 调整边框间距
- 调整表格的宽度和高度
- 添加填充
- 水平对齐文本
- 垂直对齐文本
- 添加鼠标悬停(悬停)功能
- 定义单元格颜色
- 定义空单元格的显示方式
我们在下面的讨论中涵盖了所有这些主题。
边框
假设我们要在表格周围或其中的元素周围添加边框。
要添加边框,我们可以使用边框属性。这是一个使用边框属性为表格及其单元格(包括标题单元格)添加边框的示例:
table, th, td {border: 1px black solid;
}
在我们的代码中,我们定义了一个实心的、1 像素宽的黑色边框。这是我们的代码的结果:
请注意,我们的表格包含双边框。这是因为我们为表格本身 (<table>)、它的标题 (<th>) 和它的单元格 (<td>) 应用了边框。要将双边框合并为单边框,我们可以使用border-collapse 属性。找
边框折叠
border-collapse 属性将表格中的双边框转换为单边框。border-collapse 属性的默认值是折叠的。如果为border-collapse 属性分配了值collapse
,则表格周围的边框将被折叠。
下面是一个实际使用的border-collapse 属性示例:
table {border-collapse: collapse;
}
我们的代码返回:
我们的表格和它的内容现在有一个单一的边框。
边框间距
您可以使用border-spacing 属性来设置表格中单元格之间的间距。border-spacing 属性定义了单元格之间的水平和垂直间距——它按照这个顺序进行。
这是一个在我们的初始表格(没有折叠边框的表格)上使用边框间距属性的示例:
table {border-spacing: 10px 10px;
}
我们的代码返回:
我们的每个单元格在水平和垂直边缘都有 10 像素的间距。
宽度和高度
您可以使用 width 和 height 属性指定表格的宽度和高度及其属性。
假设我们希望上表的宽度(带有折叠边框的那个)是网页本身的宽度。并且,假设我们希望每个表头的高度为 30 像素高。我们可以使用以下 CSS 代码来做到这一点:
table {width: 100%;
}th {height: 30px;
}
我们的代码返回:
如您所见,我们的表格现在是网页的宽度。此外,我们表中的列标题为 30 像素高。
填充
您可以使用 padding 属性在表格中单元格的边框和这些单元格的内容之间添加一定量的空间。padding 属性可用于 <td> 和 <th> 标签。
假设我们想在表格单元格的内容周围添加 10 像素的填充 - 包括标题单元格。我们可以使用以下代码来做到这一点:
th, td {padding: 10px;
}
我们的代码返回:
现在,我们每个表格行和标题的内容在所有边缘都有 10 像素的填充。
水平文本对齐
您可以使用 text-align 属性水平对齐存储在表格中 <th> 或 <td> 标记中的文本。默认情况下,<th> 元素居中对齐,<td> 元素左对齐。
text-align 属性最常用的值是:
- 左、中、右(除 Microsoft Edge 和 Internet Explorer 之外的所有浏览器都支持)
- 开始和结束(除 Microsoft Edge 和 Internet Explorer 之外的所有浏览器都支持)
假设我们要将表格中的 <td> 元素居中,并将 <th> 元素与每个单元格的左侧对齐。我们可以使用以下代码来做到这一点:
th {text-align: left;
}td {text-align: center;
}
我们的代码返回:
在此示例中,我们居中对齐非标题单元格文本和左对齐标题单元格文本。
垂直文本对齐
CSS vertical-align 属性用于指定 <th> 或 <td> 标记中内容的垂直对齐方式。默认情况下,vertical-align 属性的值设置为middle
,这意味着内容垂直对齐到单元格的中间。
假设我们想要将 <td> 单元格中的文本与单元格底部对齐。我们可以使用以下代码来做到这一点:
td {
height: 40px;
vertical-align: bottom;
}
我们的代码返回:
在此示例中,我们将每个 <td> 单元格的高度设置为 40 像素。然后我们将这些单元格的内容垂直对齐到单元格的底部。
水平边框
创建表格时,您可能决定只希望边框出现在每个单元格的底部。您可以将border-bottom 属性应用于<th> 和<td> 单元格以执行此操作。
这是我们可以用来为表格中的每个单元格创建水平下边框的代码:
th, td {border-bottom: 1px solid black;
}
我们的代码返回:
在此示例中,我们为表格中的每个单元格创建了一个纯黑色、1 像素宽的底部边框。
鼠标悬停(:悬停)
如果您在代码中使用 :hover 选择器,当用户将鼠标悬停在表格行上时,浏览器将突出显示表格行。
:hover 选择器很有用,因为它可以让您的表格更具交互性。它还可以帮助用户在查看表格时更好地可视化各个行。
假设我们希望表中行 (<tr>) 的背景颜色在用户将鼠标悬停在它们上方时变为浅灰色。我们可以使用以下代码来做到这一点:
tr:hover {
background-color: lightgray;
}
我们的代码返回:
当我们将鼠标悬停在表格行上时,该行的颜色变为浅灰色。在这种情况下,我们将鼠标悬停在表格的第四行上,因此该行的颜色变为浅灰色。
表格颜色
您可以使用 color 属性来指定表格中元素的背景颜色和文本颜色。假设我们希望表格标题单元格具有灰色背景和白色文本。我们可以使用下面的代码来设置表格的样式:
th {background-color: gray;color: white;
}
我们的代码返回:
在此示例中,我们表格的标题单元格 (<th>) 具有灰色背景。我们还将每个标题单元格中的文本设置为白色。我们使用 CSS color 属性定义了这两个特征。
条纹设计
在设计表格时,您可能希望使用斑马风格的方法。在这种风格中,行颜色在两种颜色之间交替。这会产生条纹状斑马状效果。为了完成这个任务,我们可以使用 nth-child() 选择器。
这是我们将用于创建条纹设计的代码,其中我们将每隔一行的背景颜色设置为浅灰色:
tr:nth-child(even) {background-color: lightgray;
}
我们的代码返回:
我们将表格中每个偶数行的背景颜色设置为浅灰色。
如果我们想将表格中奇数行的背景颜色设置为浅灰色,我们可以在上面的代码中指定“奇数”而不是“偶数”。
空单元格
如果单元格不包含任何文本,我们使用 empty-cells 属性来指定单元格是否应该有任何边框或背景。
empty-cells 属性采用以下两个值之一:隐藏或显示。当用户指定这些值之一时,CSS 会执行以下操作来清空单元格:
- hide:隐藏背景颜色和边框。
- show:显示背景颜色和边框。
空单元格 CSS 属性仅在边框折叠设置为分离时才有效。这意味着边界没有折叠。
假设我们在上面的表格中有一个空单元格,并且想要隐藏该空单元格的背景和边框。我们可以使用下面的代码来完成这个任务:
table {empty-cells: hide;border-collapse: separate;
}
我们的代码返回:
在此示例中,我们删除了 Crawdads SingWeeks on List
书的值。因为该单元格不包含任何值,所以当我们为空单元格属性指定值 hide 时,表格将隐藏边框元素,否则该元素将应用于该单元格。
结论
CSS 提供了许多用于样式表的属性。其中包括 padding 属性(在单元格内容及其边框之间添加空间)和 text-align 属性(对齐单元格内的文本)。
本教程通过示例讨论了如何使用 CSS 设置表格样式。现在您已经准备好开始像专业人士一样在 CSS 中设置表格样式了!
如何使用 CSS 设置 HTML 表格样式相关推荐
- CSS设置无需表格的菜单
CSS设置无需表格的菜单 项目列表的符号可以设置list-style-type属性值为none,然后,制作各种各样的菜单和导航条,来显示项目的列表. 首先,建立一个HTML结构,将菜单的各个项用项目列 ...
- javafx css样式_使用CSS设置JavaFX饼图样式
javafx css样式 渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在2 ...
- 使用CSS设置JavaFX饼图样式
渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在RMOUG Training ...
- css设置流光文字样式
css设置流光文字样式 主要属性:-webkit-background-clip:text 表示元素的背景保留在前景内容中(文字) 和其形状大小相同 -webkit-text-fill-color:t ...
- CSS设置链接的样式
链接是从一个网页到另一个网页的连接,CSS可通过不同属性以各种不同方式来设置链接的样式.下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法,希望对大家有所帮助. 在讨论CSS属性之前,先了解链接 ...
- css设置html表格边框颜色,互联网常识:CSS如何设置htmltable表格边框样式
设置表格边框样式的方法:1.给table元素添加"border:边框宽度 边框样式 边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...
- Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
目录 一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性 二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
- css实现虚线表格样式
我们在建立table的时候,会发现它会具有一些默认的样式,比如单元格td之间会有间距,所以我们通常开头是这样写的: <table border="0" cellspacing ...
- css设置滚动条的样式
1. webkit下面的CSS设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端 ...
- 表格样式css制作html5,利用css实现的表格样式展示
本文为大家展示了几款美观的表格样式,希望大家可以喜欢. 1.单像素边框CSS表格 table.gridtable { font-family: verdana,arial,sans-serif; fo ...
最新文章
- 构建人工智能产学研生态体系,中国软件行业协会智能应用服务分会在京正式成立
- 【原创】QT在嵌入式系统中显示中文的方法
- 带你学python基础:字符串
- 使用MAT做jvm的GC Roots溯源
- 每周一题 —— 3n+1问题
- eclipse maven jetty插件方式启动项目
- 我真out了,高端人士都这样玩儿?
- Android中Services简析
- idea连接不了5.6mysql_IDEA无法连接mysql数据库的6种解决方法大全
- iview关闭抽屉弹层时清空Select弹框高亮样式
- windows下virtualenv中安装MySQL-python
- 触发器(Trigger)的使用方法详解
- 未能找到类型名称MembershipProvider
- jQuery源码解析(30)
- 瑞星搜狐畅游合作 “云安全”首次嵌入网游客户端
- 开源机器学习项目的简单介绍
- 基于XP系统的asp.net运行环境的安装与配置
- Win10桌面极简美化
- mysql 修改wait_timeout
- 怎么用计算机给u盘加密文件,win10电脑怎么给U盘文件夹加密
热门文章
- MySQL分库分表dble初次尝试
- 通过监听手势滑动解决DrawerLayout只能边缘打开抽屉问题
- php怎么将农历转换成公历,PHP实现阳历到农历转换的类实例
- 基于crontab的服务器恶意程序
- python 栅格转矢量_python 矢量数据转栅格数据代码实例
- 包误差率(PER)与BER相关
- c#应用:简单的图片查看器
- Python批量爬取某图片网站图片
- Android 面试题(答案最全) 转:http://www.jobui.com/mianshiti/it/android/2682/
- win7电脑如何提升开机速度?