CSS 基础教程：表格（一）

最新推荐文章于 2024-06-13 01:26:35 发布

m0_65012566

最新推荐文章于 2024-06-13 01:26:35 发布

阅读量478

点赞数

分类专栏： css 文章标签： css 前端

原文链接：https://www.tutorialspoint.com/css/css_tables.htm

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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属性将没有任何效果。

m0_65012566

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础教程：表格（一）

表格是一个HTML元素，用于以带有行和列的结构化格式显示数据。表格使用HTML中的<table>标签创建，并且可以使用CSS属性进行样式设置。本章讨论如何使用CSS设置HTML表格的不同属性。首先看看下面的示例，它演示了一个简单的HTML表格：</</</</</</</</</</</</</</</</</</上述示例中的表格是数据的简单显示，可以使用CSS进行样式设置。widthheighttext-alignborder让我们看看如何在以下各节中使用这些属性的示例。
复制链接

扫一扫

专栏目录