Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan susun atur jadual ringkas menggunakan HTML dan CSS
Bagaimana untuk melaksanakan susun atur jadual ringkas menggunakan HTML dan CSS
- 王林asal
- 2023-10-19 10:34:48866semak imbas
Cara menggunakan HTML dan CSS untuk melaksanakan susun atur jadual ringkas
HTML dan CSS ialah dua bahasa yang paling biasa digunakan dalam pembangunan bahagian hadapan dan boleh digunakan untuk mencipta dan mencantikkan halaman web. Jadual adalah salah satu elemen biasa dalam halaman web dan digunakan untuk memaparkan data. Bagaimana untuk menggunakan HTML dan CSS untuk melaksanakan susun atur jadual mudah? Langkah-langkah khusus diterangkan di bawah, dengan contoh kod disediakan.
Langkah 1: Buat struktur HTML
Pertama, kita perlu mencipta fail HTML dan menambah struktur asas jadual pada fail. Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>简洁表格布局</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
<tr>
<td>数据7</td>
<td>数据8</td>
<td>数据9</td>
</tr>
</tbody>
</table>
</body>
</html>Dalam kod di atas, kami mencipta struktur HTML asas, termasuk jadual dan kandungan jadual.
Langkah 2: Tambah gaya CSS
Seterusnya, kita perlu menggunakan CSS untuk mencantikkan jadual. Buat fail CSS bernama style.css dan masukkannya dalam fail HTML. Kodnya adalah seperti berikut:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #f5f5f5;
}
Dalam kod di atas, kami mencantikkan jadual dengan menetapkan gaya CSS. Gaya khusus termasuk:
- Tetapkan lebar jadual kepada 100% dan gunakan atribut runtuhan sempadan untuk menggabungkan sempadan menjadi satu baris.
- Tetapkan gaya untuk pengepala jadual dan kandungan jadual, termasuk pelapik dan penjajaran teks.
- Tetapkan warna latar belakang pengepala kepada kelabu muda.
- Gunakan pemilih kelas pseudo anak ke-n untuk menambah warna latar belakang pada baris genap di tengah-tengah jadual.
- Tetapkan warna latar belakang baris jadual pada tetikus.
Langkah 3: Laraskan gaya meja
Seperti yang diperlukan, kita boleh melaraskan lagi gaya meja. Sebagai contoh, anda boleh menetapkan sempadan dan warna teks jadual dan melaraskan gaya pengepala jadual dan kandungan jadual.
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
color: #333;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #f5f5f5;
}Dalam kod di atas, kami menambah gaya sempadan dan menetapkan warna teks kepada hitam. Pada masa yang sama, kami juga menyerlahkannya dengan menetapkan fon pengepala menjadi tebal.
Pada ketika ini, kami telah menyelesaikan pelaksanaan susun atur jadual yang mudah. Pelarasan gaya selanjutnya boleh dibuat mengikut keperluan sebenar.
Ringkasan:
Dengan menggunakan HTML dan CSS, kami boleh melaksanakan susun atur jadual ringkas dengan mudah. Pertama, kita perlu mencipta fail HTML dan menambah struktur asas jadual dalam fail. Kemudian, gunakan gaya CSS untuk mencantikkan jadual dan tetapkan sempadan jadual, penjajaran teks, warna latar belakang dan atribut lain. Akhir sekali, laraskan lagi gaya meja mengikut keperluan untuk menjadikannya lebih konsisten dengan keperluan reka bentuk. Pada masa yang sama, kami juga boleh menggunakan CSS untuk mencapai beberapa kesan interaktif, seperti menukar warna baris jadual apabila tetikus melayang.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur jadual ringkas menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!