HTML 在TD内居中显示表格

在本文中，我们将介绍如何在HTML中使用CSS将表格居中显示在TD元素内。

阅读更多：HTML 教程

设置TD元素的样式

要将表格居中显示在TD元素内，首先需要设置TD元素的样式。可以通过CSS的text-align属性来实现：

<style>
  td {
    text-align: center;
  }
</style>

上述代码将会将所有的TD元素的文本内容居中显示。

在TD元素中嵌套居中显示的表格

要在TD元素内居中显示一个表格，可以通过在TD元素中嵌套一个居中显示的DIV元素，然后在DIV元素内放置表格来实现。

<style>
  td {
    text-align: center;
  }

  .centered-table {
    margin: 0 auto;
  }
</style>

<table>
  <tr>
    <td>
      <div class="centered-table">
        <table>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
          </tr>
          <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

在上述代码中，我们在TD元素中嵌套了一个带有.centered-table类的DIV元素，然后在DIV元素内放置了一个表格。通过为.centered-table类设置margin: 0 auto;，我们将表格水平居中显示在TD元素内。

使用Flexbox居中显示表格

除了嵌套DIV元素的方法，我们也可以使用CSS的Flexbox布局来居中显示表格。

<style>
  td {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

上述代码中，我们为TD元素设置了display: flex;，以使其成为一个Flex容器。然后通过justify-content: center;和align-items: center;将表格在容器内水平居中和垂直居中显示。

使用表格属性居中显示

另一种居中显示表格的方法是使用表格的属性。HTML中的table元素有一些与布局相关的属性，比如align和valign属性。

<table>
  <tr>
    <td align="center" valign="middle">
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

在上述代码中，我们通过align=”center”和valign=”middle”属性将表格水平居中和垂直居中显示在TD元素内。