Format Tabel Dalam Halaman Web

 Format Tabel Dalam Halaman Web

Tabel adalah suatu tempat untuk menaruh data-data didalam kolom, tabel terdiri dari kolom dan baris, lalu bagaimana dengan tabel di HTML. Pada HTML tabel menggunakan 3 elemen yaitu  <table>, <tr> (table rows) untuk membuat baris, dan <td> (table data) yang digunakan untuk membuat kolom-kolom. Berikut beberapa contoh penggunaan tabel pada HTML. Berikut yang harus anda pahami tag yang berfungsi untuk pembuatan sebuah tabel:

Tag	Fungsi
<table>…</table>	Tag harus ditulis yang berguna sebagai pembuka dan penutup sebuah tabel
<caption>…</caption>	Membuat judul tabel
<th>…</th>	Membuat judul kolom
<tr>…</tr>	Menentukan sebuah baris dalam tabel
<td>…</td>	Membuat sel data

1. Tabel Sederhana

<table border="1">
<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>

- Hasil

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

2. Tabel Dengan Ukuran

<table border="1" style="height:100px;width:200px;">
<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>

- Hasil

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

3. Menggabungkan Baris Pada Tabel

<table border="1">
<tr>
<td rowspan="2">Baris 1 dan 2 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
</tr>
</table>

- Hasil

Baris 1 Kolom 1	Baris 1 Kolom 1
	Baris 2 Kolom 1

4. Menggabungkan Kolom Pada Tabel

<table border="1">
<tr>
<td colspan="2">Baris 1</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

-Hasil

Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2

5. Membuat Judul Pada Tabel

<table border="1">
<tr>
<th>Judul Kolom 1</th>
<th>Judul 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>

- Hasil

Judul Kolom 1	Judul Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

6. Menambah Background Pada Tabel

<table border="1" style="background: red;">
<tbody>
<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>
</tbody></table>

- Hasil

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Tweet