CSS 基础教程:表格(一)
表格是一个HTML元素,用于以带有行和列的结构化格式显示数据。表格使用HTML中的<table>
标签创建,并且可以使用CSS属性进行样式设置。
本章讨论如何使用CSS设置HTML表格的不同属性。
首先看看下面的示例,它演示了一个简单的HTML表格:
<html>
<head>
<style>
</style>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
上述示例中的表格是数据的简单显示,可以使用CSS进行样式设置。可以设置表格的以下CSS属性:
border-collapse
:指定浏览器是否应控制相邻边框的外观,使其相互接触,还是每个单元格应保持其样式。border-spacing
:指定单元格之间应出现的宽度。caption-side
:指定表格标题应显示的位置(顶部或底部)。empty-cells
:指定如果单元格为空,是否应显示边框。table-layout
:允许浏览器通过使用遇到的第一个宽度属性来加快表格的布局速度,而不是必须在渲染整个表格之前加载整个表格。width
和height
属性设置表格的高度和宽度。text-align
属性设置表格单元格中文本内容的水平对齐方式。border
属性可用于为表格及其单元格设置边框。background-color
属性可以应用于表格本身、表格单元格或表格行。font-size、font-family、font-weight、font-color
等设置表格字体。
让我们看看如何在以下各节中使用这些属性的示例。
CSS表格 - 边框合并
border-collapse
属性确保表格单元格之间的边框合并为单个边框,从而创建更干净的外观。该属性可以取值为collapse
或separate
(默认值)。
以下示例仅向单元格和表格的主体添加边框:
<html>
<head>
<style>
table {
border: 3px solid purple;
}
th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
现在添加border-collapse: collapse;
看看这如何消除表格单元格之间的间距,使边框重叠。
<html>
<head>
<style>
table {
border-collapse: collapse;
border: 3px solid purple;
}
th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS表格-边框间距
边框间距属性指定在表格中分隔相邻单元格边框的距离。此属性可以指定为一个或两个值:
border-spacing: 2px;
:如果传递一个值,则将间距应用于垂直和水平边框。border-spacing: 1cm 2em;
:如果传递两个值,则第一个值定义单元格之间的水平间距(即相邻列中单元格之间的间距),第二个值定义单元格之间的垂直间距(即相邻行中单元格之间的间距)。
现在让我们修改上一个示例并查看效果:
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 1em 0.5em;
padding: 0 2em 1em 0;
border: 3px solid purple;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
注意:边框间距属性仅在边框折叠设置为分离时有效。如果设置为折叠,边框间距属性将不起作用,边框将折叠成一行。
以下是说明上述观点的示例:
<html>
<head>
<style>
table {
border-collapse: collapse;
border-spacing: 1em 0.5em;
padding: 0 2em 1em 0;
border: 3px solid purple;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS表格-标题位置
CSS中的caption-side
属性用于控制与表格相关的表格标题的位置或对齐。
caption-side
属性可以具有以下值之一:
top
:标题放置在表格上方。bottom
:标题放置在表格下方。block-start
:标题框位于表格的块起始边缘。block-end
:标题框位于表格的块结束边缘。inline-start
:标题框位于表格的内联起始边缘。inline-end
:标题框位于表格的内联结束边缘。inherit
:值从父元素的caption-side属性继承。
让我们看一个示例:
<html>
<head>
<style>
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
</style>
<body>
<table class=“top”>
<caption>
Caption ABOVE the table
</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
<br />
<table class=“bottom”>
<caption>
Caption BELOW the table
</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
注意:
caption-side
属性仅适用于具有<caption>
元素的表。<caption>
元素用于为表提供标题或描述。 如果表格没有标题,caption-side
属性将没有任何效果。