How to center a table in html

In HTML, you can use three methods to center the table: Use the margin: auto; attribute to center the table horizontally. Use the text-align: center; attribute to vertically center the table within the parent element. Use the align attribute to specify the position of the table relative to the parent element (deprecated).

How to center an HTML table

In HTML, there are several ways to center a table:

1. Use margin: auto;

• to set the margin: auto; attribute to the table to center the table horizontally.

Example:

<table style="margin: auto;">
  <tr>
    <th>列 1</th>
    <th>列 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table>

2. Use text-align: center;

• to the table The parent element sets the text-align: center; attribute to center the table vertically within the parent element.

Example:

<div style="text-align: center;">
  <table border="1">
    <tr>
      <th>列 1</th>
      <th>列 2</th>
    </tr>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
    </tr>
  </table>
</div>

3. Use the align attribute

• to set the table align attribute, you can specify the position of the table relative to its parent element.

Example:

<table align="center">
  <tr>
    <th>列 1</th>
    <th>列 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table>

Note:

• align attribute in Deprecated in HTML5, use the margin or text-align attributes in preference.
• If the width is set for the table, the centering effect may be affected.
• The above methods can be used to center the table horizontally or vertically.

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