Tutorial HTML: Table

Dalam sebuah halaman web, tabel digunakan untuk menyajikan suatu data. Namun, tak sedikit yang menggunakan tabel untuk membuat layout halaman web. Hal tersebut sebenarnya kurang pas mengingat fungsi dari tabel itu sendiri untuk menyajikan data. Untuk penjelasan lebih lanjut mengenai pembuatan layout halaman web tanpa menggunakan tabel akan dibahas pada tutorial CSS.

Ada beberapa tag yang digunakan dalam tabel, namun dalam tutorial ini kita hanya menggunakan tag <table>, <tr>, dan <td>. Tambahkan beberapa baris kode berikut sebelum tag </body> pada file "webpertama.html".

<table>
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
        <td>Row 1, cell 3</td>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td>Row 2, cell 2</td>
        <td>Row 2, cell 3</td>
    </tr>
    <tr>
        <td>Row 3, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row 4, cell 1</td>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
    </tr>
</table>

Simpan dan coba buka menggunakan browser, maka akan tampak seperti gambar berikut:

Elemen table digunakan untuk mendefinisikan tabel. Elemen tr atau table row mendefinisikan row/baris tabel. Sedangkan elemen td atau table data mendefinisikan data cell/kolom data. Semua tag pada tabel harus diakhiri dengan tag penutup seperti pada contoh kode HTML di atas.

Jadi, apabila kita ingin membuat tabel dengan dimensi 3x4 berarti tabel tersebut memiliki 12 cell dengan demikian seharusnya elemen tr yang digunakan untuk mendefinisikan row/baris ada 4 tag <tr> dan elemen td untuk mendefinisikan data cell ada 3 sehingga total keseluruhan ada 12 elemen td.

***

Daftar Tutorial HTML:

1. Tutorial HTML: Mukadimah
2. Tutorial HTML: Tags, Attribute dan Element
3. Tutorial HTML: Page Title
4. Tutorial HTML: Paragraph
5. Tutorial HTML: Heading
6. Tutorial HTML: List
7. Tutorial HTML: Link
8. Tutorial HTML: Image
9. Tutorial HTML: Table
10. Tutorial HTML: Form