Cara membuat halaman paparan data menggunakan susun atur jadual HTML

Cara menggunakan reka letak jadual HTML untuk mencipta halaman paparan data

Jadual HTML ialah alat reka letak biasa yang boleh digunakan untuk mencipta halaman paparan data. Dengan menggunakan struktur dan atribut jadual secara rasional, anda boleh membuat halaman paparan data yang jelas, mudah dibaca dan cantik.

1. Struktur jadual asas

Dalam HTML, jadual terdiri daripada teg jadual, tr dan td. Teg jadual digunakan untuk menentukan jadual, teg tr digunakan untuk menentukan baris jadual, dan teg td digunakan untuk menentukan sel jadual. Berikut ialah contoh struktur jadual asas:

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

Dalam contoh di atas, bar tajuk ditakrifkan menggunakan teg ke dan baris data ditakrifkan menggunakan teg td. Teg ke biasanya digunakan dalam baris pertama jadual untuk memaparkan tajuk atau nama lajur, manakala teg td digunakan untuk memaparkan data jadual biasa.

2. Tetapkan gaya jadual

Gaya jadual boleh ditetapkan melalui CSS. Gaya yang berbeza boleh ditetapkan untuk teg jadual, tr dan td untuk mencapai tujuan menyesuaikan gaya jadual. Berikut ialah contoh mudah:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  
  th {
    background-color: #f0f0f0;
    font-weight: bold;
  }
</style>

Dalam contoh di atas, kami menetapkan lebar label jadual kepada 100%, supaya ia mengisi lebar bekas induk menggunakan atribut border-collapse: collapse, the border of the jadual boleh digabungkan ke dalam A; kedua-dua teg ke dan td menetapkan gaya sempadan dan teg juga menetapkan warna latar belakang dan keberanian font.

3. Gabungkan sel

Dalam sesetengah kes, kita mungkin perlu menggabungkan sel untuk memaparkan data yang lebih kompleks. HTML menyediakan atribut colspan dan rowspan untuk menggabungkan sel. Berikut ialah contoh penggabungan sel jadual menggunakan atribut colspan:

<table>
  <tr>
    <th colspan="2">合并单元格</th>
    <th>普通单元格</th>
  </tr>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
</table>

Dalam contoh di atas, kami menggunakan colspan="2" untuk menjadikan sel bar tajuk bagi baris pertama bergabung merentas dua lajur dan menggunakan rowspan="2" untuk membuat Sel-sel dalam lajur pertama digabungkan merentasi kedua-dua baris.

4 Gunakan pengepala jadual dan badan jadual untuk mengumpulkan data

Untuk set data yang besar, kita boleh meletakkan pengepala jadual dan badan jadual masing-masing dalam tag Ini menjadikan jadual lebih berstruktur dan mengoptimumkan prestasi dengan lebih baik semasa membuat persembahan. Berikut ialah contoh:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

Dalam contoh di atas, kami menggunakan teg untuk mentakrifkan pengepala jadual dan teg

Dengan menggunakan teknik di atas dengan betul, kita boleh mencipta halaman paparan data yang cantik dan mudah dibaca menggunakan susun atur jadual HTML. Sudah tentu, mengikut keperluan sebenar, kita boleh menambah gaya CSS untuk mencantikkan jadual, seperti menetapkan warna latar belakang, gaya sempadan, dll.

Saya harap kandungan di atas akan membantu anda dalam membuat halaman paparan data!

Atas ialah kandungan terperinci Cara membuat halaman paparan data menggunakan susun atur jadual HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!