How to center the table in html

In HTML, tables are one of the most common elements, especially in data display and layout scenarios. If no style is added, the table will be typeset in a left-aligned manner by default. In this case, you need to use styles to center the table.

The following are three methods to help you center the table horizontally and vertically on the page:

Method 1: Use CSS to center the table

This is the most common and recommended One method is to use the CSS text-align property to center the table content.

The code is as follows:

<style>
  table {
    margin: 0 auto;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

Set the table text content to be centered through the CSS text-align property. Among them, margin: 0 auto sets the table to be horizontally centered.

Method 2: Use HTML attributes

If you don’t want to use CSS, you can also use attributes in HTML to achieve horizontal centering of the table:

The code is as follows:

<table align="center">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

Center the table by adding the align="center" attribute to the table tag.

Method Three: Use Flexbox

Flexbox in CSS is a very useful layout method, which can easily achieve horizontal and vertical centering.

The code is as follows:

<style>
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .wrapper table{
    width: 200px;
  }
</style>

<div class="wrapper">
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>17</td>
      <td>上海</td>
    </tr>
  </table>
</div>

Center the table by setting display: flex;, justify-content: center; and align-items: center; in the div element, where height: 100vh ; Make the container element occupy the entire viewport height.

The above are three methods to achieve horizontal centering of tables. However, it is important to note that using attributes to set styles in HTML is not as easy to maintain and manage as using CSS. In actual development, it is recommended to use CSS to control the style of tables whenever possible to achieve better readability and maintainability.

The above is the detailed content of How to center the table in html. For more information, please follow other related articles on the PHP Chinese website!