CSS 表格中的垂直和水平标题

在本文中，我们将介绍如何使用CSS样式来创建表格中的垂直和水平标题。

阅读更多：CSS 教程

1. 垂直标题

要在表格中创建垂直标题，我们可以使用CSS的writing-mode属性来实现。通过将writing-mode属性设置为vertical-rl，可以将文本垂直显示，并使其从右向左读取。

<style>
  th.vertical-header {
    writing-mode: vertical-rl;
  }
</style>

<table>
  <tr>
    <th class="vertical-header">标题1</th>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
  <tr>
    <th class="vertical-header">标题2</th>
    <td>数据3</td>
    <td>数据4</td>
  </tr>
  <tr>
    <th class="vertical-header">标题3</th>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>

上述代码将创建一个具有垂直标题的表格。通过添加vertical-header类来选择需要垂直显示的表头。你可以根据需要调整表格的样式和布局。

2. 水平标题

要在表格中创建水平标题，我们可以使用CSS的text-align属性来实现。通过将text-align属性设置为center，可以使表头文本水平居中对齐。

<style>
  th.horizontal-header {
    text-align: center;
  }
</style>

<table>
  <tr>
    <th class="horizontal-header">标题1</th>
    <th class="horizontal-header">标题2</th>
    <th class="horizontal-header">标题3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>

上述代码将创建一个具有水平标题的表格。通过添加horizontal-header类来选择需要水平居中对齐的表头。你可以根据需要调整表格的样式和布局。

3. 垂直和水平标题的组合

在一些需要显示更复杂表格结构的情况下，我们可以将垂直和水平标题结合使用。例如，我们可以在表格的左上角创建一个垂直标题，同时每列的表头也是水平标题。

<style>
  th.vertical-header {
    writing-mode: vertical-rl;
  }

  th.horizontal-header {
    text-align: center;
  }
</style>

<table>
  <tr>
    <th class="vertical-header"></th>
    <th class="horizontal-header">标题1</th>
    <th class="horizontal-header">标题2</th>
    <th class="horizontal-header">标题3</th>
  </tr>
  <tr>
    <th class="vertical-header">行1</th>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <th class="vertical-header">行2</th>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>

上述代码将创建一个具有垂直和水平标题的表格。通过添加vertical-header类来选择需要垂直显示的表头，同时添加horizontal-header类来选择需要水平居中对齐的表头。