Dalam halaman web, tabel akan sangat dibutuhkan, apalagi jika website tersebut ingin menampilkan data-data yang cukup banyak. Sehingga sangat tidak cocok jika digunakan teks biasa untuk menampilkannya.
Untuk membuat tabel di dokumen HTML, anda hanya perlu memperhitungkan banyaknya baris dan kolom dari tabel tersebut. Lalu memasukkan data-data sesuai jumlah aslinya.
- Mulai sebuah tabel dengan tag <table> kemudian diikuti tag <tr>yang mendefinisikan baris dalam sebuah tabel.
- Kemudian isikan data-data dari tabel diantara tag <td> dan </td>.
- Setelah semua data diisi, tutup tag baris pertama dengan tag </tr>.
- Terakhir, akhiri tabel dengan </table>.
Contohnya bisa dilihat dibawah ini:
| baris 1 kolom 1 | baris 1 kolom 2 | baris 1 kolom 3 |
| baris 2 kolom 1 | baris 2 kolom 2 | baris 2 kolom 3 |
| baris 3 kolom 1 | baris 3 kolom 2 | baris 3 kolom 3 |
kodenya:
<table border="1">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
<tr> <td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
<td>baris 3 kolom 3</td>
</tr>
</table>- jumlah baris tabel ditentukan dg banyaknya <tr>...</tr> yg dituliskan dlm elemen tabel dari <table>...</table>
- sedangkan jumlah kolom ditentukan dg banyaknya <td>...</td> didalam setiap definisi baris, dari <tr>...</tr>
Untuk menentukan ketebalan border, anda bisa menambah nilai dari atribut
border="nilai"Misalnya Tabel-tabel berikut diisi dengan border yang berbeda:
| baris 1 kolom 1 | baris 1 kolom 2 | baris 1 kolom 3 |
| baris 2 kolom 1 | baris 2 kolom 2 | baris 2 kolom 3 |
| baris 3 kolom 1 | baris 3 kolom 2 | baris 3 kolom 3 |
| baris 1 kolom 1 | baris 1 kolom 2 | baris 1 kolom 3 |
| baris 2 kolom 1 | baris 2 kolom 2 | baris 2 kolom 3 |
| baris 3 kolom 1 | baris 3 kolom 2 | baris 3 kolom 3 |
jika anda ingin membuat header atau judul pada tabel, anda tinggal mengganti <td> dengan <th> pada baris pertama. contohnya:
<table border=2>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>Hasilnya:
| header1 | header2 | header3 |
|---|---|---|
| baris 1 kolom 1 | baris 1 kolom 2 | baris 1 kolom 3 |
| baris 2 kolom 1 | baris 2 kolom 2 | baris 2 kolom 3 |
Mengatur rowspan dan colspan pada tabel
Rowspan adalah baris yang melewati satu kolom atau ukurannya sama dengan dua kolom dibawahnya. contohnya bisa anda lihat dibawah:
| header1 | header2 | header3 |
|---|---|---|
| baris 1 kolom 1 | baris 1 kolom 2 dengan colspan | |
| baris 2 kolom 1 | baris 2 kolom 2 | baris 2 kolom 3 |
Kodenya:
<table border=2>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td rowspan="2">baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>Sedangkan colspan adalah kolom yang melewati atau ukurannya sama dengan dua baris. Contohnya seperti ini:
| header1 | header2 | header3 |
|---|---|---|
| baris 1 kolom 1 dengan rowspan | baris 1 kolom 2 | baris 1 kolom 3 |
| baris 2 kolom 2 | baris 2 kolom 3 |
kodenya:
<table border=2>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>baris 1 kolom 1</td>
<td colspanspan="2">baris 1 kolom 2 dengan colspan</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>
Post a Comment