Pertama-tama, saya ingin menunjukkan kepada Anda bagaimana sel dalam baris dapat dihubungkan secara kolom. Dengan begitu, sebuah kolom dalam baris yang bersangkutan dapat meluas melintasi beberapa kolom.
Contoh:
<table border="1">
<tr>
<th colspan="2">Jadwal</th>
</tr>
<tr>
<td>11.4.2014</td>
<td>12.4.2012</td>
</tr>
<tr>
<td>13.4.2014</td>
<td>14.4.2014</td>
</tr>
<tr>
<td>15.4.2014</td>
<td>16.4.2014</td>
</tr>
</table>Sebelumnya, tentang elemen th yang digunakan di sini. Dengan elemen ini, kita menandai sel kepala. Biasanya, browser menampilkan sel-sel ini dalam huruf tebal dan terpusat. Dan inilah hasilnya di browser:
Dalam elemen th pengantar, atribut colspan diatur. Sebagai nilai, diharapkan jumlah kolom yang ingin dijangkau oleh sel saat ini. Pastikan untuk memeriksa apakah jumlah kolom yang ditentukan sesuai, karena jika tidak, hasilnya bisa tidak bagus. Pada contoh ini, baris kepala yang ditandai oleh th harus meluas selama dua kolom. Dalam dua baris lainnya, masing-masing terdapat dua sel.
Sebuah catatan mengenai menghubungkan baris. Selama tahap pengembangan, tentukan bingkai tabel (border). Dengan demikian, Anda dapat langsung melihat apakah penghubungannya berhasil sesuai keinginan.
Meleburkan sel dalam satu kolom secara berbaris
Dengan atribut rowspan, Anda dapat menggabungkan beberapa sel dalam satu kolom. Sel yang bersangkutan kemudian memanjang di sepanjang beberapa baris dalam kolom. Berikut adalah contohnya:
<table border="1">
<tr>
<th rowspan="2">Warna</th>
<td>Biru</td>
</tr>
<tr>
<td>Hijau</td>
</tr>
<tr>
<th rowspan="2">Ukuran</th>
<td>1,70</td>
</tr>
<tr>
<td>1,80</td>
</tr>
</table>Dalam tampilan browser, itu akan terlihat seperti ini:
Pada atribut rowspan, diberikan nilai numerik. Nilai tersebut menentukan sebenarnya jumlah baris dalam satu kolom di mana sel tersebut harus meluas. Demikian pula, pastikan jumlah baris yang ditentukan sesuai dengan kondisi sebenarnya.
Meleburkan sel secara bersamaan berbaris dan berkolom
Dua atribut rowspan dan colspan sebenarnya dapat digabungkan. Dengan demikian, sel dapat didefinisikan yang secara bersamaan melintasi beberapa baris dan kolom. Ini juga dapat dijelaskan dengan contoh.
<table border="1">
<tr>
<th colspan="2" rowspan="2">Apartemen</th>
<td>5 Kamar</td>
</tr>
<tr>
<td>154 m2</td>
</tr>
<tr>
<td>Charlottenburg</td>
<td>Tempat Parkir</td>
<td>Pemanas Lantai</td>
</tr>
</table>
Di browser, hasilnya akan tampak seperti ini:
Ketika menggabungkan kedua atribut tersebut, tentu saja perhatian ekstra diperlukan untuk memastikan jumlah selyang tepat pada akhirnya.
Memberi label pada tabel
Suatu cara yang sangat menarik untuk membuat tabel lebih mudah dipahami adalah dengan menggunakan elemen caption. Melalui ini, Anda dapat menambahkan judul atau legenda kepada sebuah tabel. Konten dari caption akan ditampilkan di luar tabel, meskipun definisinya berada di dalam tabel.
Berikut adalah aplikasi khas untuk caption:
Di atas tabel, akan ditampilkan judul tabel. Secara default, judul tersebut biasanya terletak di bagian atas tengah tabel. Tentu saja, hal ini bisa diubah dengan CSS secara individual.
Elemen caption didefinisikan langsung setelah <table> pengantar.
Berikut adalah sintaks lengkap dari contoh yang telah ditunjukkan sebelumnya:
<table border="1">
<caption>Data Media</caption>
<colgroup><col /><col /><col /><colgroup>
<thead>
<tr>
<th>Tema</th>
<th>Tampilan</th>
<th>Kecenderungan</th>
</tr>
<thead>
<tfoot>
<tr>
<td colspan="3">Status Juni 2014</td>
</tr>
<tfoot>
<tbody>
<tr>
<td>HTML5</td>
<td>12.245</td>
<td>+</td>
</tr>
<tr>
<td>CSS3</td>
<td>12123</td>
<td>+</td>
</tr>
<tr>
<td>JavaScript</td>
<td>11.546</td>
<td>+</td>
</tr>
</tbody>
</table>Merancang Tabel
Untuk merancang tabel, dalam versi HTML yang lebih awal terdapat banyak atribut. Berikut beberapa contoh hal yang dapat diatur menggunakan atribut-atribut tersebut. (Tentu saja, browser masih mendukung atribut-atribut ini hingga saat ini. Namun, dalam HTML5 sebaiknya atribut-atribut ini tidak lagi digunakan).
• Bingkai luar
• Bingkai dalam tabel
• Pengaturan lebar dan tinggi
• Garis kisi
• Penyusunan isi sel
• Warna
• Gambar latar
Kalian bisa melihat bahwa semua ini sebenarnya dapat diatur melalui atribut-atribut HTML yang sesuai. Contoh tabel berikut menunjukkan pemanfaatan fitur-fitur tersebut secara rumit:
<table border="1">
<tr>
<td width="200" height="100" bgcolor="#999933">Satu</td>
<td width="200" bgcolor="#00ffff">Dua</td>
<td width="200">Tiga</td>
</tr>
<tr bgcolor="#ff00ff">
<td height="100">Empat<</td>
<td bgcolor="#996666">Lima</td>
<td bgcolor="#003333">Enam</td>
</tr>
</table>
Melihat hasilnya, kita mendapatkan hasil yang diinginkan.
Meskipun terlihat seperti apa yang seharusnya, sintaks di baliknya tidaklah efektif. Lebih baik jika sifat-sifat tabel diatur menggunakan CSS. Berkat fitur-fitur CSS baru, kita tidak hanya dapat menggantikan atribut lama dengan sintaks yang lebih modern. Namun, fungsionalitas tambahan juga dapat diimplementasikan. Misalnya, sekarang memudahkan untuk mewarnai baris tabel secara bergantian.
Pada masa lalu HTML dan CSS, untuk mendapatkan hasil seperti ini, kadang kala kita harus melakukan perubahan kode yang kompleks. Jika kita konsisten menggunakan kemungkinan-kemungkinan yang CSS tawarkan saat ini, hal tersebut bisa dilakukan dengan mudah.
tr:nth-child(even) {
background-color: #fd9d5d;
}
tr:nth-child(odd) {
background-color: #c0f390;
}
table {
border-spacing: 0px;
}
Seperti yang sudah dijelaskan sebelumnya, saya akan membahas CSS secara mendalam dalam rangkaian ini.
