hujung hadapan web
html tutorial
Bagaimana untuk melaksanakan susun atur jadual ringkas menggunakan HTML dan CSS
Bagaimana untuk melaksanakan susun atur jadual ringkas menggunakan HTML dan CSS
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1384
52
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
