上查看所有课程
表格是 HTML 元素，以行和列的格式组织数据。例如，
上面的例子显示了默认表格和 CSS 样式表格。
创建表格
表格是借助 table、tr、th 和 td 标签创建的。例如，
<table>
<tr>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>James</td>
<td>Chicago</td>
</tr>
<tr>
<td>Robert</td>
<td>New York</td>
</tr>
</table>浏览器输出
在上面的示例中，默认表格在没有任何样式的情况下看起来不好。
样式化你的表格
我们可以为表格添加以下样式，
- 表格边框
- 合并表格边框
- 边框间距
- 表格大小
- 表格布局
- 水平对齐
- 垂直对齐
- 背景颜色
- 表格内边距
- 分割行
- 悬停效果
让我们详细了解它们。
表格边框
border 属性为表格添加边框。例如，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Table Border</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>James</td>
<td>Chicago</td>
</tr>
<tr>
<td>Robert</td>
<td>New York</td>
</tr>
<tr>
<td>Charlie</td>
<td>Boston</td>
</tr>
</table>
</body>
</html>/* applies border to the table */
table,th,td {
border: 1px solid black;
}浏览器输出
在上面的例子中：
border: 1px solid black在表格元素周围添加了 1px 的实心 黑色 边框。
合并表格边框
border-collapse 属性将表格单元格之间的边框合并成单个边框。例如，
table {
border-collapse: collapse;
}浏览器输出
在这里，表格单元格之间的边框合并成单个边框。
边框间距
border-spacing 属性指定相邻单元格边框之间的间隙。例如，
table {
border-spacing: 20px;
}浏览器输出
这里，在相邻的边框单元格之间添加了 20 像素的间隙。
表格大小
可以使用 width 和 height 属性更改表格的大小。例如，
table {
border-collapse: collapse;
border: 1px solid black;
width: 80%;
height: 170px;
}浏览器输出
这里，表格占用了文档 80% 的宽度，高度增加到 170 像素。
表格布局
table-layout 属性指定表格的结构和行为。
它可以接受以下值之一
-
auto：根据内容自动调整列宽 fixed：指定固定列宽
让我们看一个例子，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Table Layout</title>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>
This table cell contains large amount of the text.
</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</body>
</html>/* styles table with fixed layout */
table {
width: 500px;
table-layout: fixed;
}
table, th , td {
border: 1px solid black;
border-collapse: collapse;
}浏览器输出
在上面的示例中，表格的 table-layout 属性设置为 fixed，width 设置为 500px。因此，表格的所有列都保持固定宽度。
现在，通过添加
table-layout: auto;将表格布局更改为 auto，将创建以下输出。
浏览器输出
在这里，auto 值使列具有弹性，允许它们根据内容的要求调整其宽度。
表格宽度仍固定为 500px，但列现在可以根据内容进行调整。
水平对齐
text-align 属性设置表格内容的水平对齐。例如，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Horizontal Alignment</title>
</head>
<body>
<h2>Horizontal alignment</h2>
<table>
<tr>
<th>text-align: left</th>
<th>text-align: right</th>
<th>text-align: center</th>
<th>text-align:justify</th>
</tr>
<tr>
<td class="first-data">Left</td>
<td class="second-data">Right</td>
<td class="third-data">Center</td>
<td class="fourth-data">Justify the content</td>
</tr>
</table>
</body>
</html>.first-data {
text-align: left;
}
.second-data {
text-align: right;
}
.third-data {
text-align: center;
}
.fourth-data {
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
}
table,th,td {
border: 1px solid black;
}浏览器输出
上面的示例显示了表格单元格中文本的不同对齐位置。
注意：默认情况下，表格单元格内的内容左对齐。
垂直对齐
vertical-align 属性设置表格内容的垂直对齐。
让我们看一个例子，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Vertical Alignment</title>
</head>
<body>
<h2>Vertical alignment</h2>
<table>
<tr>
<th>vertical-align: top</th>
<th>vertical-align: bottom</th>
<th>vertical-align: middle</th>
<th>vertical-align:baseline</th>
</tr>
<tr>
<td class="first-data">Top</td>
<td class="second-data">Bottom</td>
<td class="third-data">Middle</td>
<td class="fourth-data">Baseline</td>
</tr>
</table>
</body>
</html>.first-data {
vertical-align: top;
}
.second-data {
vertical-align: bottom;
}
.third-data {
vertical-align: middle;
}
.fourth-data {
vertical-align: baseline;
}
table {
width: 100%;
border-collapse: collapse;
}
table,th,td {
border: 1px solid black;
}
td {
height: 50px;
}浏览器输出
上面的示例显示了表格单元格中文本的不同垂直对齐位置。
注意：默认情况下，表格单元格中的内容垂直居中对齐。
背景颜色
表格可以用不同的背景颜色进行样式化。例如，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Background Color</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Location</th>
</tr>
<tr >
<td>James</td>
<td>Chicago</td>
</tr>
<tr >
<td>Robert</td>
<td>New York</td>
</tr>
</table>
</body>
</html>th {
background-color: greenyellow;
}
tr {
background-color: yellow;
}
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px solid black;
}浏览器输出
在上面的示例中，background-color 属性为表头添加了 greenyellow 颜色，为表格行添加了 yellow 颜色。
表格内边距
padding 属性在边框和内容之间添加空间。例如，
<!DOCTYPE html>
<html>
<head>
<title>Table padding</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>James</td>
<td>Chicago</td>
</tr>
<tr>
<td>Robert</td>
<td>New York</td>
</tr>
<tr>
<td>Charlie</td>
<td>Boston</td>
</tr>
</table>
</body>
</html>th,td {
padding: 15px;
}
table {
border-collapse: collapse;
}
table,th,td {
border: 1px solid black;
}浏览器输出
在上面的例子中：
padding: 15px在表格的边框和内容之间添加了 15 像素的间隙。
分割表格行
我们可以使用 border-bottom 属性在表格行之间创建水平分隔。例如，
th,td {
border-bottom: 1px solid gray;
padding: 12px;
text-align: center;
}浏览器输出
这里，border-bottom 属性分隔了表格中的行。
注意：我们可以在 <td> 元素中使用 border-right 或 border-left 属性来创建表格中的垂直分隔符。
可悬停表格
我们可以借助 hover 伪类选择器为表格元素添加悬停效果。例如，
tr:hover {
background-color: yellow;
}浏览器输出
| 名称 | 位置 |
|---|---|
| James | Chicago |
| Robert | New York |
在这里，当鼠标悬停在行上时，行的背景颜色会变为 yellow。