Bagaimana untuk menggayakan jadual dengan css

Dalam reka bentuk web, jadual adalah salah satu elemen yang biasa digunakan. Melalui penggunaan jadual, kita boleh memaparkan maklumat dan data dengan lebih baik. Walau bagaimanapun, apabila menggunakan jadual, jika anda tidak menetapkan gaya, halaman akan kelihatan membosankan dan membosankan, yang tidak kondusif untuk menyampaikan maklumat. Jadi, artikel ini akan menunjukkan kepada anda cara menggayakan jadual menggunakan CSS.

1. Tetapkan gaya asas jadual

Kita boleh menggunakan teg jadual untuk mentakrifkan jadual, dan kemudian gunakan CSS untuk menetapkan gayanya. Berikut ialah contoh kod jadual paling asas:

<table>
    <tr>
        <th>数字</th>
        <th>字母</th>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <td>B</td>
    </tr>
</table>

Kod ini mentakrifkan jadual yang mengandungi dua lajur dan tiga baris Baris atas ialah pengepala dan dua baris bawah ialah kandungan jadual. Seterusnya, kita boleh menetapkan gaya asas untuk jadual, seperti menetapkan sempadan jadual, padding sel dan jarak antara sel (jarak sel).

table {
    border-collapse: collapse;  /* 合并边框 */
    border-spacing: 0;  /* 设置单元格之间的距离为 0 */
    width: 100%;
}

th, td {
    padding: 8px;  /* 设置单元格内边距 */
    border: 1px solid #ccc;  /* 设置边框 */
}

Dalam kod di atas, kami telah menggunakan border-collapse: collapse untuk menggabungkan sempadan jadual supaya kelihatan lebih kemas. border-spacing: 0 Tetapkan jarak antara sel kepada 0 untuk menjadikan jadual kelihatan lebih padat. Tetapkan width: 100% untuk membuat jadual menyesuaikan diri dengan saiz tetingkap penyemak imbas. Seterusnya, kami menggunakan pemilih th,td untuk menggayakan sel. Tetapan padding: 8px boleh melaraskan saiz padding sel untuk menjadikan kandungan jadual lebih cantik. Tetapan border: 1px solid #ccc boleh menetapkan sempadan untuk sel, di sini warna kelabu (#ccc) digunakan.

2. Tetapkan gaya pengepala jadual

Pengepala jadual ialah bahagian penting dalam jadual dan biasanya ditandakan sebagai elemen <th>. Kita boleh menggayakan tajuk secara individu.

th {
    background-color: #f2f2f2;  /* 设置表头背景颜色 */
    font-weight: bold;  /* 设置表头文本加粗 */
    text-align: left;  /* 设置表头文本左对齐 */
}

Dalam kod di atas, kami menggunakan background-color: #f2f2f2 untuk menetapkan warna latar belakang pengepala jadual. Tetapan font-weight: bold boleh menjadikan teks pengepala tebal dan menjadikannya lebih menonjol. Gunakan text-align: left untuk menjajarkan teks pengepala ke kiri.

3. Tetapkan gaya baris berselang-seli untuk jadual

Untuk menjadikan jadual lebih mudah dibaca, kita boleh menetapkan gaya berselang-seli untuk baris ganjil dan genap jadual.

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

Dalam kod di atas, kami menggunakan nth-child(even) pemilih kelas pseudo untuk memilih baris genap jadual dan kemudian menetapkan warna latar belakangnya kepada kelabu (#f2f2f2).

4. Tetapkan gaya keadaan tetikus meja

Apabila tetikus melayang di atas baris jadual, kita boleh menetapkan gaya yang berbeza untuknya untuk meningkatkan interaktiviti.

tr:hover {
    background-color: #ddd;  /* 设置鼠标悬停状态的背景颜色 */
}

Dalam kod di atas, kami telah menggunakan hover pemilih kelas pseudo untuk memilih baris atas tetikus dan kemudian menetapkan warna latar belakangnya kepada kelabu (#ddd).

Melalui langkah di atas, kita boleh menetapkan gaya untuk meja untuk menjadikannya lebih cantik dan jelas. Sudah tentu, kami juga boleh membuat lebih banyak tetapan gaya mengikut keperluan, seperti melaraskan saiz fon, warna, dll. Secara umum, penggayaan jadual boleh menjadikan halaman lebih berwarna dan lebih mudah dibaca dan difahami.

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