Membuat Tabel pada HTML

HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Tabel tag setidaknya membutuhkan 3 buah tag, yaitu <tabel>, <tr>, dan <td>.

• <tabel> digunakan untuk memulai tabel
• <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
• <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.

Tag table menggunakan atribut border sebagai ukuran ketebalan garis, jika tanpa garis maka isi dengan 0.
Contoh penggunaan tag:

<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>
    <tr>
        <td> Baris 4, Kolom 1</td>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>

Hasil Output:

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 4, Kolom 1	Baris 4, Kolom 2	Baris 4, Kolom 3

Penggunaan atribut cellpadding dan cellspacing:
cellpadding => untuk jarak antara teks dengan garis
cellpacing   => untuk jarak antara garis pinggir cell

Memberi warna pada background cell/kolom/baris dengan atribut  bgcolor="";
Isi dengan nama warna dalam bahasa inggris, misalkan bgcolor="yellow";

Contoh Penggunaan:

<table border="1" cellpadding="5" cellspacing="5">
    <tr bgcolor="yellow">
        <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>
    <tr>
        <td> Baris 4, Kolom 1</td>
        <td bgcolor="orange"> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>

Hasil Output:

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 4, Kolom 1	Baris 4, Kolom 2	Baris 4, Kolom 3

Gunakan atribut width="" untuk menentukan lebar tabel/kolom
Kita dapat memerge cell dalam tabel seperti contoh berikut ini:

<table border="1" width="400" align="center">
  <tr>
    <td scope="col">Teks</td>
    <td colspan="3" scope="col" align="center">Teks</td>
  </tr>
  <tr>
    <td rowspan="2" align="center">Teks</td>
    <td>Teks</td>
    <td>Teks</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Teks</td>
    <td>Teks</td>
    <td>Teks</td>
  </tr>
</table>

Hasil Output:

Teks	Teks
Teks	Teks	Teks	Teks
	Teks	Teks	Teks

[no-sidebar]