Tabel Dalam HTML

Sebuah tabel akan sangat berguna untuk menyajikan informasi secara lengkap dan interaktif. Selain itu, dengan tabel, informasi yang disajikan tidak akan begitu memakan banyak tempat karena bentuknya yang efisien yang hanya menampilkan bagian-bagian yang penting-penting saja.

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:

Tabel dengan border 8

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

Tabel dengan border 15

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>
<td>baris 1 kolom 3</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>

Tags: HTML tutorial umum web

Share: