Tetapkan css jadual

Dalam pembangunan web, jadual ialah elemen HTML biasa, biasanya digunakan untuk mempersembahkan data atau maklumat. Untuk menjadikan jadual lebih cantik dan mudah dibaca, kami boleh menyesuaikannya melalui gaya CSS. Dalam artikel ini, saya akan memperkenalkan cara untuk menetapkan gaya jadual CSS.

1. Tetapan gaya asas

1. Tetapan gaya sempadan jadual

table {
  border-collapse: collapse;  /*合并单元格边框*/
  border: 1px solid #ddd;  /*设置边框样式*/
}

2. Tetapan lebar dan ketinggian jadual

table {
  width: 100%; /*设置表格的宽度*/
  height: auto; /*设置表格的高度*/
}

3. Tetapan gaya pengepala jadual dan kandungan jadual

Dalam pengepala jadual (kepala) dan kandungan jadual (badan), kita boleh menetapkan gaya yang berbeza. Seperti yang ditunjukkan di bawah:

table thead th {
  background-color: #f2f2f2; /*设置表头背景色*/
  font-weight: bold; /*设置表头字体加粗*/
}

table tbody td {
  padding: 10px; /*设置单元格内边距*/
}

2. Tetapan gaya lanjutan

1. Tetapan gaya lintasan zebra jadual

Anda boleh menggunakan CSS untuk membuat baris genap dan ganjil daripada jadual Baris diberi warna latar belakang yang berbeza untuk menjadikannya lebih mudah untuk dibezakan.

table tr:nth-child(even) {
  background-color: #f2f2f2; /*设置偶数行背景色*/
}

table tr:nth-child(odd) {
  background-color: #fff; /*设置奇数行背景色*/
}

2. Penjajaran teks jadual dan tetapan pembalut baris

Penjajaran teks dan pembalut teks dalam jadual juga boleh ditetapkan melalui CSS.

table th {
  text-align: center; /*设置表头文字居中对齐*/
}

table td {
  text-align: left; /*设置表格内容文字左对齐*/
  white-space: nowrap; /*设置文本不换行*/
}

3. Tetapan gaya cantum sel jadual

Seperti yang ditunjukkan dalam rajah di bawah, kita boleh menggabungkan dua sel jadual untuk menunjukkan pembentangan data yang lebih kompleks.

<table>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>第一行第二列</td>
    <td>第一行第三列</td>
  </tr>
  <tr>
    <td colspan="2">第二行合并单元格</td>
  </tr>
</table>

Di atas adalah pengenalan kepada beberapa kaedah tetapan gaya CSS jadual. Saya harap ia boleh membantu semua orang. Melalui penggunaan CSS yang fleksibel, kami boleh mempersembahkan gaya dan kesan visual yang berbeza untuk jadual, menjadikan halaman lebih cantik dan lebih mudah dibaca.

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