CSS 表格样式

17 Mar 2025 | 6 分钟阅读

CSS 表格样式可以提高表格信息的可读性，并为原本平淡无奇的 HTML 表格增添吸引力。HTML 表格可以通过多种方式进行样式化。其中包括表格边框、行列高宽、字体颜色以及许多动效，包括悬停效果等。

在 CSS 中，表格用于将不同的样式特征应用于 HTML 表格组件，以便将数据适当地组织成行和列，甚至更复杂的结构。表格常用于数据分析、研究和交流。要显示表格的布局，请使用 CSS table-layout 属性。此属性控制用于排列表格单元格、行和列的算法。

CSS 的表格样式是什么意思？

让我们看一个只包含数据的简单 HTML 表格，即没有任何 CSS 样式。

我们也可以看到，列没有很好地对齐；没有边框来标示列的边界，并且它们很难阅读。当我们访问一个网站时，我们希望看到一些不一样的东西。

现在，让我们应用少量的 CSS 表格样式，看看效果如何。

我们如何在 CSS 中为表格添加样式？

在继续使用 CSS 装饰表格之前，我们首先需要开发一个基本的 HTML 表格，并理解与 HTML 表格相关的各种 HTML 组件的含义。

<html>
   <body>
    <table>
      <table border="1">
  <tr>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Country</th>
  </tr>
  <tr>
  <td>John</td>
  <td>David</td>
  <td>India</td>
  </tr>
  <tr>
   <td>Sam</td>
   <td>Jagan</td>
   <td>America</td>
  </tr>
</table>
 
   </body>
</html>

输出

输出中显示了一个没有任何 CSS 样式的非常简单的 HTML 表格。

HTML 表格标签

<tr>: 表示行
<td>: 用于创建数据单元格
<th>: 用于添加表头
<caption>: 用于为表格添加标题
<thead>: 为表格添加一个唯一的表头
<tbody>: 显示表格的主体内容
<tfoot>: 仅为表格创建一个唯一的表尾。

了解每个表格部件的含义后，我们就可以添加自己的样式，使它们在视觉上更具吸引力，并且更容易阅读。

在大多数情况下，当我们使用 CSS 来布局表格时，我们不添加任何额外的 class 或 id。相反，我们使用 CSS 属性直接将样式应用于 HTML 元素。如果我们需要提供一些自定义样式，例如只给一个单元格着色或对特定单元格应用特殊效果，我们可能需要提供一个 class 或一个 ID。

CSS 中的属性

1. Border (边框)

它用于指定表格的边界。

CSS 元素的边框可以使用 border 属性进行样式化。该属性是 border-width、border-style 和 border-color 这三个属性的简写形式。可以设置或返回 border-width、border-style 和 border-color 属性。

语法

默认值: 它的默认值是 initial。

属性值

width: 这个数字指定边框的粗细或宽度。
Style: 此值表示边框的样式，例如是实线、虚线还是点线。
Colour: 此值描述边框的颜色。

下面的代码演示了 CSS border 属性

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}
h1 {
color: red;
}
table,
th,
td {
/* Styling the border. */
border: 2px solid black;
}
</style>
</head>

<body>
<h1>Example for border property in CSS</h1>
<h2>Adding border to the table</h2>
<table>
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>Bindu</td>
<td>123</td>
</tr>
<tr>
<td>Priya</td>
<td>456</td>
</tr>
</table>
</body>
</html>

输出

Border Collapse (边框合并)

border-collapse 属性指示是应保留每个单元格的样式，还是应由浏览器管理相互接触的相邻边框的外观。

语法

默认值: 它的默认值为 separate。

属性值

Separate: 此属性用于定义单元格的独立边界。
Collapse: 用于通过合并相邻单元格来形成共享边界。
Initial: 使用 initial 将 border-collapse 属性设置为其默认值。
Inherit: 当 border-collapse 属性从其父元素继承时使用。

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}
h1 {
color: red;
}
table.one {
/* Styling border-collapse for table one. */
border-collapse: collapse;
}
table.two {
/* Styling border separate for table two. */
border-collapse: separate;
}
table,
td,
th {
border: 2px solid black;
}
</style>
</head>

<body>
<h1>Example for border-collapse</h1>
<h2>borders collapsed example</h2>
<table class="one">
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td>123</td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
<br>
<br>
<h2>borders separated example</h2>
<table class="two">
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td>123</td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
</body>
</html>

输出

Border Spacing (边框间距)

此值描述了相邻单元格边框之间的可用空间量。

border-spacing 属性指定表格中相邻单元格边框之间的距离。此属性仅在 border-collapse 属性设置为 no-collapse separate 时才有效。

默认值

2px

语法

属性值

Length-length: 用于提供相邻单元格边界之间的距离。不允许使用负值。
- 如果指定了两个数字，第一个指定水平间距，第二个指定垂直间距。
- 如果只指定一个数字，它将决定单元格边界之间的水平和垂直间距。
Initial: 此函数将属性返回到其默认值。

语法

<!DOCTYPE html>
<html>

<head>
<title>Example for border-spacing property</title>
<style>
table,
th,
td {
border: 2px solid black;
text-align: center;
}
#geeks {
border-collapse: separate;
background-color: none;
border-spacing: initial;
}
h1 {
color: red;
}
</style>
</head>

<body>
<center>
<h1>Example for border-spacing property</h1>
<h2>border-spacing Property</h2>
<table style="width:70%" id="geeks">
<tr>
<th>Name</th>
<th>Roll.No</th>
<th>Course</th>
</tr>
<tr>
<td>John</td>
<td>123</td>
<td>CSE</td>
</tr>
<tr>
<td>Priya</td>
<td>456</td>
<td>ECE</td>
</tr>
<tr>
<td>Ravi</td>
<td>788</td>
<td>IT</td>
</tr>
</table>
</center>
</body>

</html> 

输出

Caption Side (标题位置)

caption-side 属性用于指定标题在表格中出现的位置。标题会自动添加到表格上方。

此参数用于指示表格标题的位置。它存在于 HTML 表格中。此属性可以应用于任何 display 属性设置为 caption-side 的元素。

语法

caption-side: top|bottom|block-start|block-end|inline-start|inline-end|initial|inherit;

性质

Top: 这表示表格标题应出现在表格的顶部。这是默认设置。
Bottom: 此属性将表格标题定位在表格的底部。
Initial: 此函数将属性设置为其默认值。

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}
h1 {
color: red;
}
table.one {
border-collapse: separate;
border-spacing: 8px;
/* Setting caption on top */
caption-side: top;
}
table.two {
border-collapse: separate;
border-spacing: 8px;
/* Setting caption on bottom */
caption-side: bottom;
}
table,
td,
th {
border: 2px solid black;
}
</style>
</head>

<body>
<h1>Example for caption side property</h1>
<h2>Caption on top:</h2>
<table class="one">
<caption>Caption is set as the top of the table.</caption>
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td>123</td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
<br>
<br>
<h2>Caption at bottom:</h2>
<table class="two">
<caption> Caption is set as the bottom of the table </caption>
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td>123</td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
</body>

</html>

输出

Empty cells (空单元格)

此属性决定了表格中的空单元格是否应有边框和背景。此属性指定是否在表格的空单元格中显示边框。

语法

默认值: show

属性值

Show 属性: 此属性用于显示空单元格的边界。
Hide 属性: hide 属性用于隐藏表格中空单元格的边框。
Initial 属性: 默认属性使用此属性设置。
Inherit 属性: inherit 属性用于从其父元素继承属性。

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}
h1 {
color: red;
}
table.one {
border-collapse: separate;
border-spacing: 8px;
/* Hiding empty cells border */
empty-cells: hide;
}
table.two {
border-collapse: separate;
border-spacing: 8px;
/* Displaying empty cells border */
empty-cells: show;
}
table,
td,
th {
border: 2px solid black;
}
</style>
</head>

<body>
<h1>Example for empty cells</h1>
<h2>empty cells hide:</h2>
<table class="one">
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td></td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
<br>
<br>
<h2>empty cells show:</h2>
<table class="two">
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td></td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
</body>

</html>

输出

下一主题CSS 中的 Margin 和 Padding

CSS 表格样式

CSS 的表格样式是什么意思？

我们如何在 CSS 中为表格添加样式？

HTML 表格标签

CSS 中的属性

Border Collapse (边框合并)

Border Spacing (边框间距)

属性值

Caption Side (标题位置)

性质

Empty cells (空单元格)

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 表格样式

CSS 的表格样式是什么意思？

我们如何在 CSS 中为表格添加样式？

HTML 表格标签

CSS 中的属性

Border Collapse (边框合并)

Border Spacing (边框间距)

属性值

Caption Side (标题位置)

性质

Empty cells (空单元格)

相关帖子

CSS content property

CSS letter-spacing

CSS sticky

CSS order

CSS Button Hover Effects

CSS pointer-events

CSS Link

CSS Overflow

CSS icons

CSS 背景

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器