tetapan jadual html

Tetapan Jadual HTML

Jadual HTML ialah elemen halaman web yang biasa digunakan Ia boleh membentangkan data kepada pengguna dalam bentuk jadual, dan boleh diindahkan dan berinteraksi melalui gaya CSS dan JavaScript. Dalam artikel ini, kami akan memperkenalkan cara untuk menetapkan baris, lajur, sempadan, latar belakang dan atribut lain jadual dalam HTML untuk menjadikan jadual anda lebih cantik dan mudah dibaca.

1. Cipta jadual HTML

Jadual HTML terdiri daripada pengepala jadual dan badan jadual. Kita boleh menggunakan tag f5d188ed2c074f8b944552db028f98a1 untuk membuat jadual. Pengepala jadual boleh ditakrifkan menggunakan teg ae20bdd317918ca68efdc799512a9b39, manakala badan jadual boleh ditakrifkan menggunakan teg 92cee25da80fac49f6fb6eec5fd2c22a, seperti yang ditunjukkan di bawah:

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
</table>

dengan teg a34de1251f0d9fe1e645927f19a896e8 mewakili baris dalam jadual , dan teg b4d429308760b6c2d20d6300079ed38e Mewakili lajur dalam pengepala jadual, dan teg b6c5a531a458a2e790c1fd6421739d1c menunjukkan lajur dalam badan jadual. Perlu diingatkan bahawa tiga tag ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a dan 06669983c3badb677f993a8c29d18845 adalah pilihan, tetapi harus bersarang mengikut struktur jadual.

2. Tetapkan bilangan baris dan lajur dalam jadual

Kita boleh menggunakan atribut f5d188ed2c074f8b944552db028f98a1 dan rowspan dalam teg colspan untuk menetapkan bilangan baris dan lajur dalam jadual, seperti yang ditunjukkan di bawah:

<table>
  <tr>
    <td rowspan="2">数据1</td>
    <td>数据2</td>
  </tr>
  <tr>
    <td>数据3</td>
  </tr>
  <tr>
    <td colspan="2">数据4</td>
  </tr>
</table>

Antaranya, atribut rowspan digunakan untuk menetapkan bilangan baris yang direntangi sel dan atribut colspan digunakan untuk menetapkan bilangan lajur bahawa sel itu merentang. Dalam contoh di atas, sel pertama dalam baris pertama merentangi dua baris, dan sel dalam baris ketiga merentangi dua lajur.

3. Tetapkan jidar, jidar dan latar belakang jadual

Kita boleh menggunakan atribut border, padding dan background-color dalam gaya CSS untuk menetapkan sempadan dan jidar bagi jadual dan latar belakang, seperti yang ditunjukkan di bawah:

table {
  border-collapse: collapse; /* 合并边框 */
  border: 1px solid black; /* 边框样式 */
  width: 100%; /* 宽度100% */
  margin-bottom: 20px; /* 底部边距20px */
  background-color: white; /* 背景颜色为白色 */
}

th, td {
  padding: 8px; /* 单元格边距为8px */
  border: 1px solid black; /* 单元格边框样式 */
}

Perlu diambil perhatian bahawa atribut border-collapse boleh digunakan untuk menggabungkan sempadan jadual untuk menjadikan jadual lebih cantik.

4. Tetapkan penjajaran jadual

Kita boleh menggunakan atribut text-align dan vertical-align dalam gaya CSS untuk menetapkan penjajaran teks dalam jadual, seperti yang ditunjukkan di bawah:

table {
  text-align: center; /* 水平居中对齐 */
}

th, td {
  vertical-align: middle; /* 垂直居中对齐 */
}

Dalam contoh di atas, atribut text-align digunakan untuk menetapkan penjajaran mendatar teks dan atribut vertical-align digunakan untuk menetapkan penjajaran menegak teks. Perlu diingat bahawa atribut vertical-align hanya berfungsi pada baris dalam jadual, jadi gunakannya pada teg th dan td.

Ringkasan

Jadual HTML ialah elemen yang kerap digunakan dalam penghasilan halaman web Kita perlu menguasai cara menggunakan f5d188ed2c074f8b944552db028f98a1, ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a dan teg lain untuk membuat jadual, dan. cara menggunakan atribut rowspan, colspan untuk menetapkan bilangan baris dan lajur dalam jadual. Selain itu, kita juga perlu membiasakan diri dengan atribut border, padding, background-color, text-align dan vertical-align dalam gaya CSS untuk menjadikan jadual lebih cantik dan boleh dibaca.

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