Tutorial tabel: pengenalan dan cara membuat table dasar html

Terkadang, bila kita membaca sebuah artikel, pasti kita akan menemukan table-table dalam berbagai variasi dan modifikasi tertentu. Tahukah kamu bagaimana
cara membuat table?
Dan seperti apa kode-kode html nya??
Berikut ini adalah lanjutan dari postingan saya yang berjudul "pengenalan kode-kode html dasar".

Ada 3 (tiga) tag utama yang mendasar dalam setiap pembuatan table pada halaman html, yaitu:

1. <table>, tag utama yang pertama kali di tulis dalam pembuatan tabel. Dapat dikombinasikan dengan atribut-atribut seperti: [align, border, bordercolor, background, bgcolor, cellpadding, cellspacing, height, width, hspace, vspace, frame, rules, dan summary].
2. <tr> (table row/baris tabel) mendefinisikan setiap baris dalam table.Setiap tag <tr> terdapat beberapa tag <td> dan atau <th>. Dapat dikombinasikan dengan atribut-atribut seperti: [align, valign, bgcolor, dan background (dapat di isi dengan gambar)].
3. <td> (table data/data tabel), mendefinisikan setiap sel dari table. Tag ini dapat dikombinasikan dengan atribut-atribut seperti: [align, valign, width, height, colspan, rowspan, bgcolor, dan background].

<table>
<tr><td>anggur</td><td>januari</td></tr>
<tr><td>apel</td><td>pebruari</td></tr>
<tr><td>alpukat</td><td>maret</td></tr>

</table>

Hasil:

anggur	januari
apel	pebruari
alpukat	maret

catatan: table di atas adalah table tanpa border.

menambahkan border

Jika kamu hendak membuat border/batas pada table dan pada masing-masing sel-nya maka cukup tambahkan atribut border pada tag table: <table border="n"> dimana n adalah nilai dari tebal border. Contoh di bawah ini adalah n yang bernilai 1 (border="1"). Dapat juga kamu isi 2, 3 atau 4.

<table border="1">

hasil:

anggur	januari
apel	pebruari
alpukat	maret

Menambahkan judul tabel dan header table

Kita juga bisa menambahkan judul pada tabel dan header table dengan kode tag <caption>
dan <th>

<caption>Daftar nama-nama</caption> --> judul table

<tr><th>Nama buah</th><th>Nama bulan</th></tr> --> head table

Hasil:

Daftar nama-nama

Nama buah	Nama bulan
anggur	januari
apel	pebruari
alpukat	maret

catatan: Penambahan "caption" dan "head" ditempatkan di bawah tag <table> sebelum tag <td>

Sekian ulasan kali ini, lain kesempatan saya akan tulis mengenai atribut "colspan" dan "rowspan" pada table. Selamat mencoba,bro!!