Tabel HTML default terlihat sangat mengecewakan—meremasnya dengan beberapa efek CSS yang bagus.
Menambahkan tabel ke situs web Anda adalah cara yang berguna untuk menyajikan informasi dalam jumlah besar dengan jelas. Tabel juga menyediakan penggunaan ruang yang efisien, dan membuat Anda lebih mudah membaca dan membandingkan data yang rumit.
Anda dapat mendesain tabel agar lebih menarik secara visual menggunakan CSS. Melakukannya juga dapat meningkatkan pengalaman pengguna secara keseluruhan untuk situs web Anda.
Desain Baris dan Kolom Tunggal Modern
Anda dapat menambahkan desain tabel sederhana dengan baris dan kolom tunggal dan tanpa sel gabungan. Menata tabel juga memastikan halaman web Anda menarik bagi pengguna. Selain gaya meja, ada yang lain efek HTML keren Dan CSS menampilkan tata letak situs web Anda dapat menambahkan ke situs web Anda.
Anda dapat melihat kode untuk latihan ini di dalamnya repo GitHub.
- Dalam file HTML baru, tambahkan struktur kode HTML dasar:
html>
<html>
<kepala>
<judul>Meja Sederhanakujudul>
kepala>
<tubuh>
tubuh>
html> - Di dalam badan, tambahkan tag tabel:
<meja>
meja> - Elemen tabel HTML harus berisi baris tabel tag untuk setiap baris di dalam tabel. Baris atas biasanya digunakan untuk judul. Menggunakan tajuk tabel Tag HTML untuk mewakili setiap kolom dalam tabel:
<tr>
<th>Tajuk 1th>
<th>Tajuk 2th>
<th>Tajuk 3th>
tr> - Tambahkan lebih banyak baris di bawah baris tajuk. Menggunakan data tabel Tag HTML untuk menambahkan data ke setiap sel dalam tabel:
<tr>
<td>Baris 1, Kolom 1td>
<td>Baris 1, Kolom 2td>
<td>Baris 1, Kolom 3td>
tr>
<tr>
<td>Baris 2, Kolom 1td>
<td>Baris 2, Kolom 2td>
<td>Baris 2, Kolom 3td>
tr>
<tr>
<td>Baris 3, Kolom 1td>
<td>Baris 3, Kolom 2td>
<td>Baris 3, Kolom 3td>
tr>
<tr>
<td>Baris 4, Kolom 1td>
<td>Baris 4, Kolom 2td>
<td>Baris 4, Kolom 3td>
tr>
<tr>
<td>Baris 5, Kolom 1td>
<td>Baris 5, Kolom 2td>
<td>Baris 5, Kolom 3td>
tr> - Tambahkan tag gaya di dalam tag kepala. Tambahkan beberapa gaya umum ke tabel, seperti bayangan, sudut meja bundar, font, dan margin:
<gaya>
meja {
perbatasan-runtuh: runtuh;
lebar: 100%;
warna: #333;
font-family: Arial, Sans Serif;
ukuran huruf: 14px;
perataan teks: kiri;
radius perbatasan: 10px;
meluap: tersembunyi;
bayangan kotak: 0 0 20pxrgba(0, 0, 0, 0.1);
batas: mobil;
margin-atas: 50px;
margin-bawah: 50px;
}
gaya> - Berikan gaya pada tajuk tabel untuk memberinya warna latar belakang dan teks yang disejajarkan:
mejath {
warna latar belakang: #ff9800;
warna: #fff;
font-berat: berani;
lapisan: 10px;
transformasi teks: huruf besar;
spasi huruf: 1px;
perbatasan-atas: 1pxpadat#fff;
perbatasan-bawah: 1pxpadat#ccc;
} - Berikan gaya pada baris tabel untuk bergantian antara warna abu-abu dan putih, dan untuk menambahkan efek saat mengarahkan kursor ke baris:
mejatr:n-anak (genap)td {
warna latar belakang: #f2f2f2;
}mejatr:arahkantd {
warna latar belakang: #ffedcc;
} - Style data di dalam sel tabel:
mejatd {
warna latar belakang: #fff;
lapisan: 10px;
perbatasan-bawah: 1pxpadat#ccc;
font-berat: berani;
} - Buka file HTML Anda untuk melihat tabel di browser web:
Desain Meja Sel Multi-Berbaris
Beberapa tabel menyertakan kolom dengan baris gabungan untuk membentuk sel multi-baris.
- Hapus semua baris tabel saat ini, pertahankan hanya yang teratas dengan judul:
<meja>
<tr>
<th>Tajuk 1th>
<th>Tajuk 2th>
<th>Tajuk 3th>
tr>
meja> - Buat sel multi-baris menggunakan atribut rowspan. Ini akan memperluas sel itu melintasi jumlah baris yang ditentukan.
Bagian 1
<tr>
<tdbentang baris="2">Sel multi-baristd>
<td>Baris 1, Kolom 2td>
<td>Baris 1, Kolom 3td>
tr>
<tr>
<td>Baris 2, Kolom 2td>
<td>Baris 2, Kolom 3td>
tr> - Saat menambahkan baris bersel banyak lainnya dengan nilai rentang baris yang berbeda, tambahkan jumlah yang sesuai dari baris tabel tag HTML. Ini untuk mencocokkan tinggi atau jumlah baris yang dibentang oleh sel. Misalnya, jika sel memiliki bentang baris 3, Anda perlu menambahkan tiga baris ke kolom lain untuk menyelaraskan tabel dengan benar.
Seksi 2
<tr>
<tdbentang baris="3">Sel multi-baristd>
<td>Baris 3, Kolom 2td>
<td>Baris 3, Kolom 3td>
tr>
<tr>
<td>Baris 4, Kolom 2td>
<td>Baris 4, Kolom 3td>
tr>
<tr>
<td>Baris 5, Kolom 2td>
<td>Baris 5, Kolom 3td>
tr> - Buka file HTML Anda untuk melihat tabel di browser web:
Desain Tabel Baris Tergabung
Mirip dengan sel multi-baris, tabel juga dapat memiliki baris yang digabungkan menjadi beberapa kolom.
- Hapus semua baris tabel saat ini, pertahankan hanya yang teratas dengan judul:
<meja>
<tr>
<th>Tajuk 1th>
<th>Tajuk 2th>
<th>Tajuk 3th>
tr>
meja> - Tambahkan lebih banyak baris tabel ke tabel. Gunakan atribut colspan untuk menggabungkan salah satu baris di 3 kolom:
Bagian 1
<tr>
<tdgaya="warna latar belakang: #ffedcc"colspan="3">Q1td>
tr>
<tr>
<td>Baris 2, Kolom 1td>
<td>Baris 2, Kolom 2td>
<td>Baris 2, Kolom 3td>
tr>
<tr>
<td>Baris 3, Kolom 1td>
<td>Baris 3, Kolom 2td>
<td>Baris 3, Kolom 3td>
tr>
<tr>
<td>Baris 4, Kolom 1td>
<td>Baris 4, Kolom 2td>
<td>Baris 4, Kolom 3td>
tr> - Tambahkan baris gabungan lainnya untuk memisahkan bagian tabel:
Seksi 2
<tr>
<tdgaya="warna latar belakang: #ffedcc"colspan="3">Q2td>
tr>
<tr>
<td>Baris 6, Kolom 1td>
<td>Baris 6, Kolom 2td>
<td>Baris 6, Kolom 3td>
tr>
<tr>
<td>Baris 7, Kolom 1td>
<td>Baris 7, Kolom 2td>
<td>Baris 7, Kolom 3td>
tr>
<tr>
<td>Baris 8, Kolom 1td>
<td>Baris 8, Kolom 2td>
<td>Baris 8, Kolom 3td>
tr> - Buka file HTML Anda untuk melihat tabel di browser web:
Gunakan Tabel Menarik untuk Mengoptimalkan Data Anda
Tabel HTML adalah cara terbaik untuk menampilkan data terstruktur di situs web Anda. Anda dapat menatanya dengan CSS untuk meningkatkan tampilan default. Namun, pastikan Anda tidak terbawa suasana dan menggunakan tabel untuk tata letak—untuk alasan aksesibilitas, pertahankan hanya untuk data.
Tabel yang lebih besar bisa melelahkan untuk dibuat dan diperbarui, terutama jika Anda menggunakan kolom dan baris yang terbentang. Anda dapat menulis kode Anda sendiri untuk menghasilkan markup atau memanfaatkan sintaks yang lebih ramah seperti Markdown.
