table, tr, td dan th
Cipta jadual asas dengan baris, sel data dan sel pengepala.
table, tr, td dan th ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Jadual HTML
Jadual memaparkan data dalam baris dan lajur. Gunakannya untuk data berbentuk jadual — bukan untuk susun atur halaman.
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Alice</td>
<td>95</td>
</tr>
<tr>
<td>Bob</td>
<td>87</td>
</tr>
</table>Elemen table, tr dan td
Elemen teras jadual:
<table>— bekas jadual<tr>— baris jadual<td>— sel data jadual<th>— sel pengepala jadual (tebal dan dipusatkan secara lalai)
th berbanding td
Gunakan <th> untuk sel pengepala — elemen ini mempunyai makna semantik:
<table>
<tr>
<th>Language</th> <!-- header: bold + centered by default -->
<th>Year Created</th>
<th>Type</th>
</tr>
<tr>
<td>HTML</td> <!-- data cell -->
<td>1991</td>
<td>Markup</td>
</tr>
</table>Struktur Asas Jadual
Jadual minimum tetapi lengkap:
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Widget Pro</td>
<td>$49.99</td>
<td>In Stock</td>
</tr>
<tr>
<td>Widget Lite</td>
<td>$19.99</td>
<td>Out of Stock</td>
</tr>
</table>Sempadan Jadual dengan CSS
Pelayar memaparkan jadual tanpa sempadan secara lalai. Tambahkannya dengan CSS:
table {
border-collapse: collapse; /* merge double borders into one */
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 0.75rem 1rem;
text-align: left;
}
th {
background-color: #f5f5f5;
font-weight: 600;
}Jadual Bukan untuk Susun Atur
Pada tahun 1990-an, jadual digunakan untuk susun atur halaman. Amalan ini sudah lapuk dan memudaratkan:
- Pembaca skrin mentafsir jadual sebagai data — jadual susun atur mengelirukan pengguna
- Jadual tidak fleksibel pada skrin kecil
- CSS Grid dan Flexbox telah menggantikan semua keperluan susun atur
- Gunakan
<table>hanya untuk data berbentuk jadual yang sebenar
Jadual Responsif
Jadual melimpah pada skrin kecil. Balut jadual supaya boleh ditatal secara mendatar:
<div class="table-wrapper" style="overflow-x: auto;">
<table>
<!-- table content -->
</table>
</div>
/* Or use CSS: */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}Sel Kosong
Kendalikan sel kosong dengan sengaja:
<tr>
<td>Alice</td>
<td>95</td>
<td></td> <!-- Empty: renders blank -->
</tr>
/* CSS to style empty cells */
td:empty::before {
content: '—';
color: #999;
}Pratonton thead dan tbody
Jadual hendaklah menggunakan <thead> dan <tbody> untuk memisahkan baris pengepala daripada baris data — perkara ini akan dibincangkan dalam pelajaran seterusnya:
<table>
<thead>
<tr><th>Name</th><th>Score</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>95</td></tr>
</tbody>
</table>col dan colgroup untuk Penggayaan Lajur
Gunakan gaya pada seluruh lajur dengan <colgroup> dan <col>:
<table>
<colgroup>
<col style="width: 200px; background: #f9f9f9;">
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
<tr>
<th>Name</th>
<th>Score</th>
<th>Grade</th>
</tr>
</table>Jalur Zebra dengan CSS
Gunakan warna baris berselang-seli untuk memudahkan pembacaan:
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #e3f2fd;
}
/* nth-child(even) for even rows instead */Semakan Pantas
Apakah perbezaan antara td dengan th dalam jadual?
Ulang Kaji: table tr td th
Asas jadual:
<table>— bekas jadual<tr>— baris jadual<td>— sel data<th>— sel pengepala (semantik dan tebal secara lalai)- Gunakan
border-collapse: collapseuntuk sempadan yang kemas - Jadual adalah untuk data sahaja — bukan susun atur halaman
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “table, tr, td dan th” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “table, tr, td dan th”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “table, tr, td dan th”?
Cipta jadual asas dengan baris, sel data dan sel pengepala. Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “table, tr, td dan th” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- table, tr, td dan th
- Struktur thead, tbody dan tfoot
- colspan dan rowspan untuk Rentangan
- Kebolehcapaian Jadual: scope, summary dan caption