Bagaimana untuk menyediakan jadual Html

Jadual HTML ialah salah satu elemen yang biasa digunakan dalam pembangunan web. Melalui jadual, data boleh dipersembahkan kepada pengguna dalam bentuk yang jelas dan teratur, memudahkan pengguna mendapatkan maklumat.

Dalam artikel ini, kami akan memperkenalkan cara mencipta jadual dalam HTML dan cara menetapkan sifat jadual, termasuk sempadan jadual, penjajaran sel, pengepala jadual, dsb. Jom mula belajar!

1. Buat jadual

Dalam HTML, gunakan teg f5d188ed2c074f8b944552db028f98a1 Berikut ialah contoh mudah yang menunjukkan cara membuat jadual dengan hanya 3 baris dan 2 lajur:

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

Dalam blok kod di atas, teg f5d188ed2c074f8b944552db028f98a1 tag bermakna mencipta Baris jadual, label b6c5a531a458a2e790c1fd6421739d1c Dalam jadual, setiap sel mesti diletakkan dalam teg a34de1251f0d9fe1e645927f19a896e8

2. Tetapkan jidar jadual

Jika anda ingin menambah jidar di sekeliling meja, anda perlu menggunakan gaya CSS untuk menetapkan atribut jidar jadual. Berikut ialah contoh dengan sempadan biru:

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

Dalam contoh di atas, teg c9ccee2e6ea535a969eb3f532ad9fe89 digunakan untuk menentukan gaya CSS. Atribut sempadan jadual ditetapkan kepada 1 piksel lebar dan biru, manakala atribut sempadan sel juga biru dan 1 piksel lebar. Ini akan membolehkan anda menambah sempadan pada jadual.

3. Tetapkan penjajaran sel

Jika anda mahu kandungan dalam sel dijajarkan, anda boleh menggunakan atribut penjajaran teks gaya CSS. Berikut ialah contoh yang menunjukkan cara menjajarkan tengah kandungan sel:

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

Dalam contoh di atas, sifat penjajaran teks gaya CSS digunakan pada semua sel. Ini bermakna semua kandungan sel dalam jadual akan dipusatkan.

4. Tetapkan pengepala jadual

Dalam jadual, anda boleh menggunakan teg b4d429308760b6c2d20d6300079ed38e untuk membalut kandungan baris pertama sel dan menandakannya sebagai pengepala jadual. Pada masa ini, sel akan ditebalkan untuk menunjukkan bahawa ia adalah pengepala. Berikut ialah contoh yang menunjukkan cara menambah pengepala:

<style>
  th {
    background-color: gray;
    color: white;
    font-weight: bold;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

Dalam contoh di atas, teg b4d429308760b6c2d20d6300079ed38e digunakan untuk sel pengepala. Gaya CSS digunakan untuk menukar warna, latar belakang, saiz fon dan atribut lain pengepala jadual untuk menjadikannya boleh dibezakan secara visual daripada kandungan sel.

Ringkasan

Melalui pengenalan di atas, saya percaya pembaca telah memahami penggunaan asas jadual HTML dan cara menukar jadual melalui gaya CSS. Akhir sekali, saya ingin mengingatkan semua orang bahawa dalam pembangunan sebenar, jadual sering menggunakan JavaScript atau teknologi lain untuk berinteraksi dengan pelayan, menjadikan jadual sebagai alat yang lebih berguna.

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