Bagaimana untuk memusatkan jadual dalam html

下次还敢
Lepaskan: 2024-04-27 21:03:33
asal
1047 orang telah melayarinya

Dalam HTML, anda boleh menggunakan tiga kaedah untuk memusatkan jadual: Gunakan jidar: atribut auto untuk memusatkan jadual secara mendatar. Gunakan atribut text-align: center; untuk memusatkan jadual secara menegak dalam elemen induk. Gunakan atribut align untuk menentukan kedudukan jadual berbanding dengan elemen induk (tidak digunakan lagi).

Bagaimana untuk memusatkan jadual dalam html

Cara memusatkan jadual HTML

Dalam HTML, terdapat beberapa cara untuk memusatkan jadual:

1. Gunakan margin: auto;

    untuk menetapkan atribut membenarkan jadual dipusatkan secara mendatar.
  • margin: auto; 属性,可以让表格在水平方向上居中。

示例:

<code class="html"><table style="margin: auto;">
  <tr>
    <th>列 1</th>
    <th>列 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table></code>
Salin selepas log masuk

2. 使用 text-align: center;

  • 给表格的父元素设置 text-align: center; 属性,可以让表格在父元素内垂直居中。

示例:

<code class="html"><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></code>
Salin selepas log masuk

3. 使用 align 属性

  • 给表格设置 align 属性,可以指定表格相对于其父元素的位置。

示例:

<code class="html"><table align="center">
  <tr>
    <th>列 1</th>
    <th>列 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table></code>
Salin selepas log masuk

注意:

  • align 属性在 HTML5 中已弃用,应优先使用 margintext-align
  • Contoh:
  • rrreee
2 Gunakan text-align: center;🎜🎜🎜🎜 untuk menetapkan atribut text-align: center; kepada elemen induk jadual untuk dibuat. jadual dalam induk Berpusat secara menegak dalam elemen. 🎜🎜🎜🎜Contoh: 🎜🎜rrreee🎜🎜3 Gunakan atribut align🎜🎜🎜🎜 untuk menetapkan atribut align untuk jadual untuk menentukan kedudukan jadual berbanding elemen induknya. 🎜🎜🎜🎜Contoh: 🎜🎜rrreee🎜🎜Nota: 🎜🎜🎜🎜 atribut align tidak digunakan dalam HTML5, gunakan margin atau text- align atribut. 🎜🎜Jika lebar ditetapkan untuk meja, kesan pemusatan mungkin terjejas. 🎜🎜Kaedah di atas boleh digunakan untuk memusatkan meja secara mendatar atau menegak. 🎜🎜

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan