CSS 基础教程：表格（二）

hudson 译原文

CSS表格-空单元格

CSS中的empty-cells属性用于控制表格“空”的单元格的渲染，所谓空单元，指没有内容或以其他方式被视为“空”的单元格。 empty-cells属性仅适用于表格和表格单元格。

此属性可以具有以下两个值之一：

show：它表示空单元格应该用边框和间距显示，就好像它们包含内容一样。这是默认值。
hide ：它表示空单元格应该被隐藏，并且不占用任何空间。空单元格的边框和间距将不会显示，这有助于更紧凑的布局。

下面示例演示如何使用empty-cells属性隐藏<table>元素中空单元格的边界。

<html>
<head>
<style>
   table {
      width: 350px;
      border-collapse: separate;
      empty-cells: hide;
   }
   td,th {
      padding: 5px;
      border-style: solid;
      border-width: 1px;
      border-color: #999999;
   }
</style>
</head>
<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></td>
         </tr>
      </tbody>
   </table>
</body>
</html>

在以下示例中，使用empty-cells: show; 属性显示<table>元素中空单元格的边界。

<html>
<head>
<style>
   table {
      width: 350px;
      border-collapse: separate;
      empty-cells: show;
   }
   td,th {
      padding: 5px;
      border-style: solid;
      border-width: 1px;
      border-color: #999999;
   }
</style>
</head>
<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></td>
         </tr>
      </tbody>
   </table>
</body>
</html>

CSS表格-表格布局

table-layout属性用于控制浏览器应该如何渲染或布局表格。

此属性可以具有以下值之一：

auto：设置为自动时，浏览器将根据其内容计算列和单元格的宽度。
fixed ：设置为固定时，浏览器将根据表的第一行为每列分配固定宽度。这意味着所有后续行都将遵守相同的列宽度，无论其内容如何。

注意：要创建具有一致列宽度的表格时，使用table-layout：fixed：可能是有益的，特别是在处理大量数据或想要维护特定设计时。

以下示例展示如何使用table-layout: fixed：

<html>
<head>
<style>
   table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed; /* Using fixed layout */
   }

   th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
   }
</style>
</head>
<body>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
         <td>Row 1, Column 3</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
      </tr>
   </table>
</body>
</html>

以下示例展示如何使用table-layout: auto:

<html>
<head>
<style>
   table {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto; /* Using auto layout */
   }
   th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
   }
</style>
</head>
<body>
   <table>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      <tr>
         <td>This is some longer content in Column 1</td>
         <td>Short content</td>
         <td>Even longer content that might wrap in Column 3</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
      </tr>
   </table>
</body>
</html>

CSS表格-高度和宽度

为了设置表格的高度和宽度，请使用以下属性：

<html>
<head>
<style>
   #myTable {
      width: 500px; /* Set the width of the table */
      height: 300px; /* Set the height of the table */
      border-collapse: collapse;
   }

   #myTable th, #myTable td {
      border: 5px solid black;
   }
</style>
</head>
<body>
   <table id=“myTable”>
      <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中，用于对齐表格的各种属性如下：

**text-align **

此属性设置表格单元格（<th>或<td>）中文本内容的水平对齐。它可以有以下值：

left
right
center
justify

注意：默认情况下，<th>元素的内容为中心对齐，<td>元素的内容左对齐。

下面示例展示了文本中心对齐 text-align: center:

<html>
<head>
<style>
table, td, th {
   border: 2px solid black;
}
table {
   border-collapse: collapse;
   width: 50%;
}
td {
   text-align: center;
}
</style>
</head>
<body>
   <h2>Text-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>

同样，要将文本对齐到左或右，请分别使用属性text-align：left或text-align：right。

text-align: justify 确保文本在每个单元格的左侧和右侧对齐，从而创建干净有序的外观。