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 <table> untuk membuat jadual. Pengepala jadual boleh ditakrifkan menggunakan teg <thead>, manakala badan jadual boleh ditakrifkan menggunakan teg <tbody>, 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 <tr> mewakili baris dalam jadual , dan teg <th> Mewakili lajur dalam pengepala jadual, dan teg <td> menunjukkan lajur dalam badan jadual. Perlu diingatkan bahawa tiga tag <thead>, <tbody> dan <tfoot> adalah pilihan, tetapi harus bersarang mengikut struktur jadual.

2. Tetapkan bilangan baris dan lajur dalam jadual

Kita boleh menggunakan atribut <table> 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 <table>, <thead>, <tbody> 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!