使用Twitter Bootstrap 2实现居中对齐的表格(CSS Center table with Twitter Bootstrap 2)

在本文中，我们将介绍如何使用Twitter Bootstrap 2来居中对齐一个表格。居中对齐表格可以使网页看起来更加整洁和专业。我们将通过一些示例来演示如何使用CSS来实现这一目标。

阅读更多：CSS 教程

1. 使用Bootstrap的class属性

Bootstrap提供了一些class属性，可以轻松地将表格居中对齐。通过为表格添加这些class属性，我们可以实现居中对齐的效果。

<div class="container">
  <table class="table table-bordered table-center">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</div>

在上述示例中，我们使用了Bootstrap的container类包裹了整个表格，并为表格添加了table、table-bordered和table-center三个class属性。其中，table类用于设置表格的基本样式，table-bordered类用于设置表格的边框样式，table-center类用于将表格居中对齐。

2. 使用自定义的CSS样式

除了使用Bootstrap提供的class属性，我们还可以通过编写自定义的CSS样式来实现居中对齐的表格。以下是一个示例：

<style>
  .center-table {
    margin: 0 auto;
    width: 50%;
  }
</style>

<div class="container">
  <table class="table table-bordered center-table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</div>

在上述示例中，我们定义了一个名为center-table的CSS类，通过设置margin属性为”0 auto”和width属性为”50%”，将表格水平居中对齐并限制其宽度为50%。