CSS 基础教程：表格（三）

hudson 译原文

CSS表格-垂直对齐

vertical-align属性设置<th>或<td>中内容的垂直对齐方式。

它可以有以下值：

top
middle
bottom

注意：默认情况下，<th>和<td>元素内容的垂直对齐是中间的。

下面是一个将垂直对齐设置为顶部的示例：

<html>
<head>
<style>
   table, td, th {
      border: 2px solid black;
   }
   table {
      border-collapse: collapse;
      width: 50%;
   }
   td {
      height: 50px;
      vertical-align: top;
   }
</style>
</head>
<body>
   <h2>Vertical-align Property</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
</body>
</html>

CSS表格-边框

在CSS中，有几个可以应用于表格的边框属性：

border：该属性设置表格边框四边的宽度、样式和颜色（例如，border: 1px solid black;）。
border-collapse：该属性设置边框是否应合并为单个边框或在单元格之间分开。
border-width：该属性设置边框的宽度（例如，border-width: thin|medium|thick|2px;）。
border-style：该属性设置表格边框的样式（例如，border-style: dotted|dashed|solid|double;）等。
border-color：该属性设置表格边框的颜色（例如，border-color: red;或 border-top-color: red;）。
border-radius：该属性将表格边框的角进行圆角处理（例如，border-radius: 5px|50%）。

让我们看一个设置表格边框的示例：

<html>
<head>
<style>
   table {
      border-collapse: collapse;
      border-radius: 50%;
      border-style: inset;
      border-color: blue;
      width: 100%;
   }
   td {
      border: 2px dashed red;
      height: 50px;
      vertical-align: middle;
      text-align: center;
   }
</style>
</head>
<body>
   <h2>Border property</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
</body>
</html>

CSS表格-背景颜色

背景颜色属性可以应用于表格本身、表格单元格或表格行。

为了设置背景颜色，请使用以下代码：

/* To set the background color of table */
table {
  background-color: #f2f2f2;
}
/* To set the background color of a cell or a row */
td {
  background-color: #f2f2f2;
}
tr {
  background-color: #ffffff;
}

让我们看一个例子：

<html>
<head>
<style>
   table {
      border: 2px solid black;
      background-color: rgb(237, 181, 237);
      width: 100%;
      border-collapse: collapse;
   }
   td {
      height: 50px;
      vertical-align: middle;
      text-align: center;
   }
</style>
</head>
<body>
   <h2>Background color property</h2>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
         <th>Header 4</th>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
   </table>
</body>
</html>

CSS表格-字体样式

表格内容的字体可以使用与字体相关的属性进行样式化，例如<th>和<td>元素上的字体大小、字体系列、字重等。

<html>
<head>
<style>
   table.one {
      border-collapse: collapse;
      width: 400px;
   }
   th {
      font-size: large;
      font-family: ‘Lucida Sans’, sans-serif;
   }
   td {
      font-size: small;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
   }
</style>
</head>
<body>
   <h2>font styles</h2>
   <div>
      <table class = “one” border = “1”>
         <th>Heading</th>
         <tr>
         <td>Cell value</td>
         </tr>
         <tr>
         <td>Cell value</td>
         </tr>
      </table>
   </div>
</body>
</html>