Bagaimana untuk memusatkan jadual dalam html

Dalam HTML, jadual ialah salah satu elemen yang paling biasa, terutamanya dalam paparan data dan senario reka letak. Jika tiada gaya ditambahkan, jadual akan ditetapkan mengikut cara dijajar kiri secara lalai Dalam kes ini, anda perlu menggunakan gaya untuk memusatkan jadual.

Berikut ialah tiga kaedah untuk membantu anda memusatkan jadual secara mendatar dan menegak pada halaman:

Kaedah 1: Gunakan CSS untuk memusatkan jadual

Ini adalah yang paling biasa dan disyorkan Satu kaedah ialah menggunakan sifat penjajaran teks CSS untuk memusatkan kandungan jadual.

Kod adalah seperti berikut:

<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>

Tetapkan kandungan teks jadual untuk dipusatkan melalui sifat penjajaran teks CSS. Di mana, margin: 0 auto menetapkan jadual untuk berpusat secara mendatar.

Kaedah 2: Gunakan atribut HTML

Jika anda tidak mahu menggunakan CSS, anda juga boleh menggunakan atribut dalam HTML untuk memusatkan jadual secara mendatar:

Kodnya ialah seperti berikut:

<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>

Pusatkan jadual dengan menambahkan atribut align="center" pada teg jadual.

Kaedah 3: Gunakan flexbox

Flexbox dalam CSS ialah kaedah reka letak yang sangat berguna, yang boleh mencapai pemusatan mendatar dan menegak dengan mudah.

Kod adalah seperti berikut:

<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>

Pusat jadual dengan menetapkan paparan: flex;, justify-content: center dan align-item: center; 100vh ; Jadikan elemen kontena menduduki keseluruhan ketinggian viewport.

Di atas adalah tiga kaedah untuk mencapai pemusatan mendatar jadual. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa menggunakan atribut untuk menetapkan gaya dalam HTML tidak semudah untuk diselenggara dan diuruskan seperti menggunakan CSS. Dalam pembangunan sebenar, adalah disyorkan untuk menggunakan CSS untuk mengawal gaya jadual apabila mungkin untuk mencapai kebolehbacaan dan kebolehselenggaraan yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk memusatkan jadual dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!