Sekilas tentang Tabel (table)
Tabel (table) sangat diperlukan pada saat kita akan menampilkan data yang berbentuk kolom-kolom. Dulunya sebelum ada CSS, table sangat berperan penting pada website karena digunakan untuk membuat layout website itu sendiri akan tetapi untuk saat ini sudah jarang dipakai sebagai layout dikarenakan faktor file yang cenderung lebih besar dibanding CSS sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan serta pengeditannya pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Cara membuat tabel.
Untuk membuat tabel sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian diikuti dengan tag <tr> (table row) untuk membuat baris pada tabel serta tag <td> (table data) untuk membuat kolom pada tabel.
Kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita akan memasukkan data-data yang nantinya akan kita tampilkan.
Berikut adalah contoh tabel yang tediri dari 3 baris dan 2 kolom.
Dalam contoh diatas memang sengaja ditambahkan atribut border supaya kita dapat melihat posisi dari tabel tersebut, dikarenakan secara default nilai border ini adalah 0 jika kita tidak sertakan didalam tag <table>.
Cara mengatur lebar dan tinggi tabel.
Untuk menngatur lebar tabel kita gunakan atribut “width” atau bisa juga menggunakan CSS dengan properti “width” serta kita juga dapat mengatur lebar dan tinggi dari sebuah table data dengan menggunakan atribut style dengan properti width dan height.
<table border="1">
<tr>
<td>Cell1 - Baris1 Kolom1</td>
<td>Cell2 - Baris1 Kolom2</td>
</tr>
<tr>
<td>Cell3 - Baris2 Kolom1</td>
<td>Cell4 - Baris2 Kolom2</td>
</tr>
<tr>
<td>Cell5 - Baris3 Kolom1</td>
<td>Cell6 - Baris3 Kolom2</td>
</tr>
</table>
| Cell1 - Baris1 Kolom1 | Cell2 - Baris1 Kolom2 |
| Cell3 - Baris2 Kolom1 | Cell4 - Baris2 Kolom2 |
| Cell5 - Baris3 Kolom1 | Cell6 - Baris3 Kolom2 |
Dalam contoh diatas memang sengaja ditambahkan atribut border supaya kita dapat melihat posisi dari tabel tersebut, dikarenakan secara default nilai border ini adalah 0 jika kita tidak sertakan didalam tag <table>.
Cara mengatur lebar dan tinggi tabel.
Untuk menngatur lebar tabel kita gunakan atribut “width” atau bisa juga menggunakan CSS dengan properti “width” serta kita juga dapat mengatur lebar dan tinggi dari sebuah table data dengan menggunakan atribut style dengan properti width dan height.
Berikut ini adalah contoh tabel dengan lebar 75% serta lebar dan tinggi dari table data baris pertama width = 50% height = 40px.
Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.
Cara menggabungkan kolom dalam tabel.
Table Cell atau baris dan kolom dari sebuah tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang kita inginkan.
Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.
Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.
<table border="1" style="width: 75%px;">
<tr>
<td style="height: 40px; width: 50%;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 1</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
| Baris 1 Kolom 1 | Baris 1 Kolom 1 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
| Baris 3 Kolom 1 | Baris 3 Kolom 2 |
Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.
Cara menggabungkan kolom dalam tabel.
Table Cell atau baris dan kolom dari sebuah tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang kita inginkan.
Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.
<table border="1" style="width: 75%px;">
<tr>
<td colspan="2">Gabungan Kolom 1 & 2 Baris 1</td>
</tr>
<tr>
<td style="width: 50%;">Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
| Gabungan Kolom 1 & 2 Baris 1 | |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
| Baris 3 Kolom 1 | Baris 3 Kolom 2 |
Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.
<table border="1" width="75%">
<tr>
<td style="width:50%" rowspan="2">Gabungan Baris 1 & 2 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
| Gabungan Baris 1 & 2 Kolom 1 | Baris 1 Kolom 2 |
| Baris 2 Kolom 2 | |
| Baris 3 Kolom 1 | Baris 3 Kolom 2 |
Cara mengatur jarak kolom pada tabel.
Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.
<table border="1" width="75%" cellpadding="8">
<tr>
<td style="width:50%;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
| Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
Sedangkan cellspasing adalah pengaturan sisi dari bagian luar cell.
<table border="1" width="75%" cellspacing="8">
<tr>
<td style="width:50%">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
| Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
Cara membuat judul (titel) pada tabel.
Untuk menunjang tampilan tabel yang telah kita buat, kita juga bisa manambahkan judul (titel) pada tabel kita dengan cara menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.
Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.
<table border="1" width="75%">
<caption>Judul (titel)</caption>
<tr>
<th style="width:50%;">Header Kolom 1</th>
<th>Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
| Header Kolom 1 | Header Kolom 2 |
|---|---|
| Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
Cara membuat background pada tabel.
Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.
Berikut ini adalah contoh table dengan background warna kuning muda dengan heading warna merah.
Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.
Berikut ini adalah contoh table dengan background warna kuning muda dengan heading warna merah.
<table style="background:#ffc" width="75%" border="1">
<tr>
<th style="background:red;width:50%;">Header Kolom 1</th>
<th style="background:red;">Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
| Header Kolom 1 | Header Kolom 2 |
|---|---|
| Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
Selamat mencoba, semoga bermanfaat.,.