Tabel HTML adalah tulang punggung data terstruktur di web. Mereka tidak lagi hanya untuk spreadsheet. Anda dapat membentuknya, mewarnainya, dan mengontrol cara bernapasnya di dalam jendela browser. Metode jadul mengandalkan atribut presentasi tertentu. Mereka bekerja. Mereka langsung. Anda tidak memerlukan kerangka kerja CSS yang rumit untuk mendapatkan tata letak yang terlihat bagus.
Mengubah Warna Background Tabel
Mulailah dengan gambaran besarnya. Ingin seluruh grid muncul? Anda tidak memerlukan stylesheet terpisah. Cukup tempelkan atribut bgcolor pada tag
pembuka.
Contoh:
Ini menentukan panggungnya. Setiap sel mewarisi getaran itu kecuali Anda menimpanya.
Anda juga dapat memperbesar. Warnai satu baris atau satu sel tertentu saja. Masukkan bgcolor="color" ke dalam tag
atau
| .
Contoh:
|
Ini adalah detail kecil. Tapi itu mengubah cara mata bergerak melintasi data.
Ukuran Meja
Browser bersifat malas secara default. Mereka memperluas baris dan kolom agar sesuai dengan konten. Jika data Anda pendek, tabel akan melebar hingga memenuhi jendela. Kalau panjang, jadi panjang.
Terkadang Anda ingin kendali. Anda ingin dimensi tetap.
Tambahkan width dan height ke tag
awal. Anda dapat menggunakan piksel atau persentase.
Contoh:
Piksel memberi Anda batasan yang tegas. Persentase membuat tabel bernafas dengan area pandang. Yang mana yang Anda pilih bergantung pada tujuan desain Anda.
Anda juga dapat mengunci sel individual. Tambahkan width="value" ke tag
atau
| . Ini mengesampingkan pengaturan global untuk tempat tertentu.
Percobaan. Coba nilai piksel. Kemudian coba persentasenya. Lihat bagaimana ia pecah atau menyatu di berbagai layar.
Bantalan sel
Ruang adalah desain. Khususnya, spasi antara tepi sel dan teks di dalamnya.
Ini adalah pelapis sel. Dibutuhkan nilai piksel.
Gunakan di tag
awal.
Contoh 1:
Contoh 2:
Lima piksel ketat. Lima belas lapang. Isinya terasa berbeda. Terlihat lebih bersih dengan bantalan lebih banyak.
Jarak sel
Lalu ada celah antar sel.
Ini adalah jarak sel. Ini juga membutuhkan nilai piksel.
Tambahkan ke tag
.
Contoh 1:
Contoh 2:
Jarak sel yang kecil membuat grid terasa padat. Yang besar membuatnya tampak seperti daftar periksa.
Judul Tabel
Data membutuhkan struktur. Header menyediakan itu.
Untuk membuat kolom atau baris menonjol sebagai judul, tukar
dengan
| di baris pertama.
Ini secara otomatis membuat teks menjadi tebal. Ini juga memusatkannya.
Contoh:
|
| Kolom 1 |
Kolom 2 |
| A |
B |
| C |
| |
