Cara Membuat Tabel Dengan HTML

Di beberapa program HTML Editor ada yang sudah menyertakan toolbar tabel untuk membuat tabel, namun ada juga dan mungkin banyak yang tidak menyertakan toolbar tabel. Selain itu, dalam membuat blog, umumnya juga tidak tersedia toolbar tabel. Akan berarti bukan berarti tidak bisa menggunakan tabel, yakni tentu saja dengan menggunakan bahasa pemrograman html. Dalam html, sintaks tabel adalah sebagai berikut:

<table>
<tr>
<td> ..................................</td>
<tr/>
</table> 

Keterangan:

• <tabel>..............</table> menandakan bahwa kita akan membuat tabel
• <tr>.....................</tr> mendefenisikan baris tabel. 1 sintaks <tr>....................</tr> akan membuat 1 baris tabel. 2 sintaks <tr>....................</tr> akan membuat 2 baris tabel, begitu seterusnya.
• <td>..................</td> mendefenisikan kolom tabel. 1 sintaks <td>................</td> akan membuat 1 kolom tabel. 2 sintaks <td>................</td> akan membuat 2 kolom tabel, begitu terusnya.

Contoh:
Kita akan membuat tabel dengan jumlah kolom adalah 4 kolom dan jumlah baris adalah 3 baris, maka sintaksnya adalah:

<table>

<tr>

<td>Isi kolom 1 baris 1</td>

<td>Isi kolom 2 baris 1</td>

<td>Isi kolom 3 baris 1</td>

<td>Isi kolom 4 baris 1</td>

</tr>

<tr>

<td>Isi kolom 1 baris 2</td>

<td>Isi kolom 2 baris 2</td>

<td>Isi kolom 3 baris 2</td>

<td>Isi kolom 4 baris 2</td>

</tr>

<tr>

<td>Isi kolom 1 baris 3</td>

<td>Isi kolom 2 baris 3</td>

<td>Isi kolom 3 baris 3</td>

<td>Isi kolom 4 baris 3</td>

</tr>

</table>

Hasilnya:

Isi kolom 1 baris 1	Isi kolom 2 baris 1	Isi kolom 3 baris 1	Isi kolom 4 baris 1
Isi kolom 1 baris 2	Isi kolom 2 baris 2	Isi kolom 3 baris 2	Isi kolom 4 baris 2
Isi kolom 1 baris 3	Isi kolom 2 baris 3	Isi kolom 3 baris 3	Isi kolom 4 baris 3

Tampak pada contoh di atas bahwa garis (border) tabel tidak tampak, dan untuk menampakkan garis tabel, kita harus menambahkan atribut border pada tabel. Sintaksnya:

border="angka" contoh border="1"

Contoh:

<table border="1">

<tr>

<td>Isi kolom 1 baris 1</td>

<td>Isi kolom 2 baris 1</td>

<td>Isi kolom 3 baris 1</td>

<td>Isi kolom 4 baris 1</td>

</tr>

<tr>

<td>Isi kolom 1 baris 2</td>

<td>Isi kolom 2 baris 2</td>

<td>Isi kolom 3 baris 2</td>

<td>Isi kolom 4 baris 2</td>

</tr>

<tr>

<td>Isi kolom 1 baris 3</td>

<td>Isi kolom 2 baris 3</td>

<td>Isi kolom 3 baris 3</td>

<td>Isi kolom 4 baris 3</td>

</tr>

</table>

Hasilnya:

Isi kolom 1 baris 1	Isi kolom 2 baris 1	Isi kolom 3 baris 1	Isi kolom 4 baris 1
Isi kolom 1 baris 2	Isi kolom 2 baris 2	Isi kolom 3 baris 2	Isi kolom 4 baris 2
Isi kolom 1 baris 3	Isi kolom 2 baris 3	Isi kolom 3 baris 3	Isi kolom 4 baris 3

Mudah bukan! Selamat Mencoba!

Nantikan posting selanjutnya mengenai cara membuat tabel dengan html ini.