jadual tetapan html

Jadual dalam HTML ialah bahasa penanda yang digunakan untuk mempersembahkan data. Dalam reka bentuk susun atur halaman web, jadual merupakan elemen penting dan boleh dibuat untuk mempersembahkan kesan yang lebih cantik melalui beberapa tetapan. Artikel ini akan memperkenalkan beberapa teknik untuk menetapkan jadual dalam HTML untuk membantu pembaca menguasai penggunaan jadual dengan lebih baik.

1. Tetapkan sempadan jadual

Dengan menetapkan sempadan jadual, anda boleh menjadikan jadual kelihatan lebih jelas dan lebih mudah untuk dibezakan oleh pembaca. Kaedah tetapan biasa ialah menggunakan atribut sempadan. Sifat sempadan boleh menetapkan lebar dan warna sempadan jadual. Kod sampel adalah seperti berikut:

<table border="1">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

di mana sempadan="1" bermaksud lebar sempadan ialah 1 piksel. Sudah tentu, anda juga boleh menetapkan nilai yang lebih besar untuk meningkatkan lebar sempadan. Jika anda ingin mengawal warna dan gaya sempadan, anda juga boleh menggunakan sifat CSS untuk menetapkannya.

2. Tetapkan lebar jadual

Apabila terdapat terlalu banyak kandungan dalam jadual, jadual akan menjadi lebih luas secara automatik, tetapi jika bekas di mana jadual terletak mempunyai lebar terhad, kandungan jadual akan menjadi bekas Limpahan. Untuk mengelakkan situasi ini, anda boleh mengawal saiz jadual dengan menetapkan lebar jadual. Terdapat banyak cara untuk menetapkan lebar jadual Artikel ini memperkenalkan dua cara biasa.

(1) Gunakan atribut lebar. Atribut lebar boleh menetapkan lebar jadual, yang boleh menjadi peratusan atau nilai piksel. Kod sampel adalah seperti berikut:

<table width="50%">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

(2) Gunakan gaya CSS. Anda boleh mempunyai kawalan yang lebih baik ke atas saiz dan gaya jadual melalui gaya CSS. Kod sampel adalah seperti berikut:

<style>
  table {
    width: 50%;
    border-collapse: collapse;
  }
  th,td {
    border: 1px solid black;
    padding: 5px;
  }
</style>

<table>
  <tr>
    <th>第一列</th>
    <th>第二列</th>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

Dalam kod sampel di atas, kami menggunakan gaya CSS untuk menetapkan lebar, jarak sempadan dan padding sel jadual.

3. Tetapkan pengepala jadual dan badan jadual

Dalam jadual, beberapa data adalah penting dan mungkin perlu dikenal pasti menggunakan pengepala jadual. Jika pengepala tidak ditetapkan, mungkin sukar bagi pembaca untuk mencari maklumat yang mereka perlukan dengan cepat daripada jadual. Jadi apabila menyediakan jadual, kita perlu menandakan pengepala dan badan jadual. Kod sampel adalah seperti berikut:

<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>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

Dalam kod sampel di atas, kami menggunakan teg thead dan tbody untuk membahagikan jadual kepada dua bahagian: pengepala jadual dan badan jadual.

4. Gabungkan baris dan lajur

Dalam jadual, jika kandungan beberapa sel adalah sama, anda boleh mengurangkan saiz jadual dengan menggabungkan baris dan lajur. Kandungan pendua. Kod sampel adalah seperti berikut:

<table border="1">
  <tr>
    <td rowspan="2">第一列</td>
    <td>第二列</td>
    <td colspan="2">第三列</td>
  </tr>
  <tr>
    <td>第四列</td>
    <td>第五列</td>
  </tr>
</table>

Dalam kod sampel di atas, kami menggunakan atribut rowspan untuk menggabungkan sel lajur pertama kepada dua baris dan atribut colspan untuk menggabungkan sel lajur ketiga menjadi dua lajur.

5. Tetapkan warna latar belakang sel dan warna fon

Jika anda perlu menyerlahkan maklumat tertentu dalam jadual, anda boleh menetapkan warna latar belakang sel dan warna fon untuk mencapai tujuan. Tetapan yang biasa digunakan ialah menggunakan gaya CSS dan sifat bgcolor. Kod sampel adalah seperti berikut:

<style>
  td.red { background-color: red; color: white; }
  td.green { background-color: green; color: white; }
</style>

<table>
  <tr>
    <td class="red">第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td class="green">第三列</td>
    <td>第四列</td>
  </tr>
</table>

或者

<table>
  <tr>
    <td bgcolor="red" color="white">第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td bgcolor="green" color="white">第三列</td>
    <td>第四列</td>
  </tr>
</table>

Dalam kod sampel di atas, kami menggunakan gaya CSS dan sifat bgcolor/warna untuk menetapkan warna latar belakang dan warna fon sel.

Ringkasan

Jadual dalam HTML ialah bahasa penanda yang biasa digunakan, yang boleh membantu pembaca memahami dengan lebih baik data dalam jadual melalui tetapan yang munasabah. Artikel ini memperkenalkan beberapa teknik untuk menetapkan jadual dalam HTML, termasuk menetapkan sempadan jadual, lebar jadual, pengepala jadual dan badan jadual, menggabungkan baris dan lajur serta menetapkan latar belakang sel dan warna fon. Dengan menguasai kemahiran ini, kami boleh menggunakan teg jadual dengan lebih baik dan mencipta reka letak halaman web yang lebih cantik.

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