saiz tetapan jadual html

HTML ialah bahasa penanda yang digunakan untuk mencipta halaman web dan merupakan salah satu kemahiran penting untuk pembangunan bahagian hadapan. Jadual ialah salah satu elemen web biasa dan boleh digunakan untuk memaparkan data, halaman susun atur, dsb. Dalam proses mencipta jadual, kita selalunya perlu menetapkan saiz jadual untuk memenuhi keperluan paparan halaman. Seterusnya, kami akan memperkenalkan cara menetapkan saiz jadual HTML.

1 Tetapkan saiz keseluruhan jadual

Untuk menetapkan saiz keseluruhan jadual, anda boleh menggunakan atribut gaya HTML untuk menentukan lebar dan tinggi jadual melalui lebar. dan atribut ketinggian dalam CSS.

Kod sampel adalah seperti berikut:

<table style="width: 500px; height: 300px;">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

Dalam kod di atas, lebar jadual ditetapkan kepada 500px dan ketinggian kepada 300px melalui atribut gaya.

2. Tetapkan saiz sel

Jika anda perlu menetapkan saiz setiap sel dalam jadual, anda boleh menggunakan atribut lebar dan ketinggian dalam CSS untuk menetapkan sel. Dalam HTML, anda boleh menetapkan saiz setiap sel menggunakan atribut gaya.

Kod sampel adalah seperti berikut:

<table>
  <tr>
    <td style="width: 100px; height: 50px;">第一行第一列</td>
    <td style="width: 150px; height: 50px;">第一行第二列</td>
  </tr>
  <tr>
    <td style="width: 100px; height: 100px;">第二行第一列</td>
    <td style="width: 150px; height: 100px;">第二行第二列</td>
  </tr>
</table>

Dalam kod di atas, dengan menetapkan atribut gaya untuk setiap sel dan menentukan atribut lebar dan ketinggian kepada nilai yang berbeza, anda boleh menetapkan gaya saiz setiap sel.

3. Tetapkan lebar lajur dan ketinggian baris

Selain menetapkan saiz untuk sel individu, anda juga boleh menetapkan saiz untuk keseluruhan lajur atau baris. Dalam HTML, anda boleh menggunakan kumpulan kol dan kol untuk menetapkan lebar lajur dan atribut lebar baris dan ketinggian untuk menetapkan ketinggian baris.

Kod sampel adalah seperti berikut:

<table>
  <colgroup>
    <col style="width: 100px;">
    <col style="width: 150px;">
  </colgroup>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td rowspan="2" style="height: 100px;">第二行第一列</td>
    <td style="height: 50px;">第二行第二列上</td>
  </tr>
  <tr>
    <td style="height: 50px;">第二行第二列下</td>
  </tr>
</table>

Dalam kod di atas, gunakan colgroup dan col untuk menetapkan lebar lajur pertama kepada 100px dan lebar lajur kedua kepada 150px. Gunakan atribut rowspan untuk merentangi baris kedua dan lajur pertama kepada dua baris dan tetapkan ketinggiannya kepada 100px. Selain itu, ketinggian berbeza ditetapkan untuk sel atas dan bawah dalam baris kedua dan lajur kedua.

Ringkasnya, untuk menetapkan saiz jadual melalui HTML, anda boleh menetapkan saiz untuk keseluruhan jadual atau sel tunggal melalui atribut gaya, dan anda juga boleh menetapkan lebar lajur dan ketinggian baris melalui atribut colgroup, col, rowspan dan ketinggian. Memahami kaedah menetapkan saiz jadual HTML ini akan menjadikan kita lebih fleksibel dan selesa dalam pembangunan web.

Atas ialah kandungan terperinci saiz tetapan jadual html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!