Seringkali artikel membuat tabel begitu rumit. Kali ini saya berusaha membuatnya lebih mudah dimengerti, terutama bagi pemula. Semoga :) ...
Seringkali artikel membuat tabel begitu rumit. Kali ini saya berusaha membuatnya lebih mudah dimengerti, terutama bagi pemula. Semoga :)
Code untuk membuat sebuah tabel adalah
Contoh 1. Tabel yang terdiri dari satu
Hasil untuk Contoh 1.
Contoh 2. Tabel yang terdiri dari dua dan atau lebih
Hasil untuk Contoh 2.
Penomoran 1.1, 1.2, dan seterusnya memudahkan kita mengenali mana baris dan mana kolom. Jadi, nomor 1.1 berarti baris ke-1 kolom ke-1, nomor 1.2 berarti baris ke-1 kolom ke-2.
Bila Anda tidak melihat ada tabel maka tambahkan bingkai atau batas tepi agar terlihat bentuk tabelnya. Caranya tambahkan atribut border. Lebih jelas lihat contoh berikut.
Contoh 3.
Hasil untuk Contoh 3.
Atribut border ini bisa diatur menggunakan CSS, itu artinya Anda tidak perlu menambahkan atribut border setiap kali membuat tabel. Atau dengan kata lain Anda dapat mengubah tampilan sebuah tabel melalui CSS.
CSS tersebut akan menambahkan border selebar 1 px dan berwarna hijau pada setiap tabel yang Anda buat walaupun Anda tidak menambahkan atribut border='1'.
Perbedaan Header dan Caption sangat mudah dipahami dengan melihat contoh berikut.
Hasil.
Lebih jelas lihat contoh berikut, saya akan menggabungkan kolom 1.1 dengan kolom 1.2.
HTML sebelum gabung.
Hasilnya.
HTML Setelah gabung.
Hasilnya.
Coba perhatikan kolom 1.3! Keluar dari tabel bukan? Oleh karena itu Anda harus menghapus kolom 1.3 itu.
HTML setelah gabung dan hapus kolom 1.3
Hasilnya.
Selamat belajar.
Code untuk membuat sebuah tabel adalah
<table>
, <tr>
, dan <td>
. Sebuah tabel yang paling sederhana setidaknya terdiri dari elemen <table>
yang berisi dua atau lebih <tr>
, dimana <tr>
akan berisi dua atau lebih <td>
. <table>
adalah table atau tabel, <tr>
adalah table row dan <td>
adalah table data. Table row sama dengan row atau baris pada pembuatan tabel di Microsoft Word, sedangkan table data sama dengan kolom.
Mengapa harus dua atau lebih <tr>
dan <td>
? Sebab, jika hanya satu berarti hanya terdiri dari satu baris dan satu kolom saja, akan terlihat sebuah kotak saja.Contoh 1. Tabel yang terdiri dari satu
<tr>
dan <td>
<table>
<tr>
<td>1.1</td>
</tr>
</table>
Hasil untuk Contoh 1.
1.1 |
Contoh 2. Tabel yang terdiri dari dua dan atau lebih
<tr>
dan <td>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
Hasil untuk Contoh 2.
1.1 | 1.2 | 1.3 |
2.1 | 2.2 | 2.3 |
Penomoran 1.1, 1.2, dan seterusnya memudahkan kita mengenali mana baris dan mana kolom. Jadi, nomor 1.1 berarti baris ke-1 kolom ke-1, nomor 1.2 berarti baris ke-1 kolom ke-2.
Bila Anda tidak melihat ada tabel maka tambahkan bingkai atau batas tepi agar terlihat bentuk tabelnya. Caranya tambahkan atribut border. Lebih jelas lihat contoh berikut.
Contoh 3.
<table border='1'>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
Hasil untuk Contoh 3.
1.1 | 1.2 | 1.3 |
2.1 | 2.2 | 2.3 |
Atribut border ini bisa diatur menggunakan CSS, itu artinya Anda tidak perlu menambahkan atribut border setiap kali membuat tabel. Atau dengan kata lain Anda dapat mengubah tampilan sebuah tabel melalui CSS.
Contoh Mengubah Tampilan Tabel dengan CSS dengan Menambahkan Border
Letakkan CSS berikut dalam template Anda.table, th, td { border:1px solid green; }
CSS tersebut akan menambahkan border selebar 1 px dan berwarna hijau pada setiap tabel yang Anda buat walaupun Anda tidak menambahkan atribut border='1'.
Menambahkan Header dan Judul Tabel (Caption)
Perbedaan Header dan Caption sangat mudah dipahami dengan melihat contoh berikut.
<table border="1">
<caption>Judul Tabel</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
Hasil.
Header 1 | Header 2 | Header 3 |
---|---|---|
1.1 | 1.2 | 1.3 |
2.1 | 2.2 | 2.3 |
Menggabungkan Sel-Sel Tabel (Merge Cell)
Ada dua atribut yang dapat Anda gunakan untuk tujuan ini, yaitucolspan
untuk menggabungkan kolom tabel dan rowspan
untuk menggabungkan baris tabel. Nilai rowspan
dan colspan
menunjukkan jumlah sel yang ingin disatukan. Berbeda dengan menggabungkan sel pada Microsoft Word. Bayangkan Anda memiliki sebuah tabel dengan tiga kolom pada MS Word. Jika Anda menggabungkan kolom 1 dan 2 maka tabel Anda akan otomatis menjadi dua kolom saja, yaitu kolom 1 dan 2 yang sudah menjadi satu kolom dan kolom 3. Sedangkan tabel HTML tidak demikian. Jika Anda menggabungkan kolom 1 dan 2 maka lebar kolom 1 akan bertambah lebarnya, dan kolom 2 akan tergeser ke kanan dengan pas, dan kolom 3 juga akan tergeser ke kanan ke luar tabel. Oleh karena itu Anda harus menghapus kolom 3 agar bentuk tabel Anda benar.Lebih jelas lihat contoh berikut, saya akan menggabungkan kolom 1.1 dengan kolom 1.2.
HTML sebelum gabung.
<table border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>
Hasilnya.
Header 1 | Header 2 | Header 3 |
---|---|---|
1.1 | 1.2 | 1.3 |
2.1 | 2.2 | 2.3 |
HTML Setelah gabung.
<table border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td colspan='2'>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>
Hasilnya.
Header 1 | Header 2 | Header 3 | |
---|---|---|---|
1.1 | 1.2 | 1.3 | |
2.1 | 2.2 | 2.3 |
Coba perhatikan kolom 1.3! Keluar dari tabel bukan? Oleh karena itu Anda harus menghapus kolom 1.3 itu.
HTML setelah gabung dan hapus kolom 1.3
<table border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td colspan='2'>1.1</td><td>1.2</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>
Hasilnya.
Header 1 | Header 2 | Header 3 |
---|---|---|
1.1 | 1.2 | |
2.1 | 2.2 | 2.3 |
Selamat belajar.
This comment has been removed by the author.
ReplyDelete