Cara Membuat Tabel Dengan HTML

Cara Membuat Tabel di Blog - Terkadang sebuah tabel diperlukan oleh seorang penulis blog atau website untuk mengelompokkan tulisan atau data berdasarkan jenis atau maksud tertentu. Untuk membuat tabel dihalaman weblog memang tidak semudah seperti jika kita membuatnya di program-program komputer, MS Office misalnya. Namun bukan tidak mungkin jika kita ingin menampilkan tabel pada blog kita. Yang kita perlukan adalah mengetahui kode HTML yang digunakan untuk membuat si-tabel ini.

Nah, di kesempatan sore yang sejuk ini, saya ingin berbagi wawasan kepada temen-temen bolgger tentang bagaimana cara membuat tabel dengan kode HTML.

Kode HTML dasar yang digunakan untuk membuat tabel adalah <table> serta tag penutupnya </table>, <tr> dan tag penutupnya </tr> , <td> dan tag penutupnya </td> <th> dan tag penutupnya </th>
Selain kode HTML diatas tadi ada beberapa attribut yang harus kita kenal sebelum membuat tabel.

• bgcolor : digunakan untuk mengatur warna yang ditampilkan background table
• border : berfungsi untuk mengatur border atau garis tepi pada table
• align : mengatur tata letak teks daidalam tabel. Misalnya rata tengah, rata kanan, dsb.
• cellpadding : mengatur jarak antara tepi cell dan isi cell pada tabel
• cellspacing : mengatur jarak tiap cell
• widh : untuk mengatur lebar baris dan kolom
• hight : untuk mengatur tinggi baris dan kolom
• colspan : mengatur kolom tabel
• rowspan : mengatur row atau baris tabel

Sisanya nanti dicari sendiri ya?. Kita akan langsung saja ke tutorial membuat tabel.

1. Membuat tabel sederhana

Contoh kode :

<table border="1">
<tr>
<td>Tabel cell 1</td><td>Tabel cell 2</td>
</tr>
</table>

Hasilnya :

Tabel cell 1

Tabel cell 2

2. Membuat tabel dengan Header

Contoh kode :

<table border="1">
<tr>
<th>Tabel header 1</th><th>Tabel header 2</th>
</tr>
<tr>
<td>Tabel cell 1</td><td>Tabel cell 2</td>
</tr>
</table>

Hasilnya :

Tabel header 1	Tabel header 2
Tabel cell 1	Tabel cell 2

3. Mengatur baris dan kolom tabel

Contoh kode :

<table border="1" style="width:80%;">
<tr><th rowspan="2" style="width: 25%;">Tabel header</th><td>Tabel cell 1
</tr>
<tr><td>Tabel cell 2</td>
</tr>
</table>

Hasilnya :

Tabel header	Tabel cell 1
	Tabel cell 2

4. Memberi background pada tabel

Contoh kode :

<table bgcolor="white" border="1" style="width: 500px;"><tbody>
<tr bgcolor="green"><td align="center" color="white">Header 1</td> <td align="center" color="white">Header 2</td> </tr>
<tr bgcolor="yellow"><td align="center">Tabel cell 1</td><td align="center">Tabel cell 2</td></tr>
<tr bgcolor="yellow"><td align="center">Tabel cell 3</td><td align="center">Tabel cell 4</td></tr>
<tr bgcolor="yellow"><td align="center">Tabel cell 5</td><td align="center">Tabel cell 6</td></tr>
</tbody></table>

Hasilnya :

Header 1	Header 2
Tabel cell 1	Tabel cell 2
Tabel cell 3	Tabel cell 4
Tabel cell 5	Tabel cell 6

Silahkan dipelajari untuk berkreasi dengan tabel HTML :) Happy blogging

Ceritakan ini di :

Facebook Google+ Twitter Digg

Tentang Penulis :

Ansory Esce
Dia bukanlah seseorang yang memiliki segudang ilmu untuk bisa diceritakan. Bukan juga seorang Blogger profesional yang bisa menggurui kalian tentang ilmu Blogging atau tentang ilmu Internet lainnya. Dia hanyalah seorang Blogger "alakadarnya" yang memiliki keterbatasan pengetahuan. Menulis di Blog ia lakukan sekedar untuk mengenal banyak teman baru serta sebagai media untuk belajar dan saling berbagi. Selengkapnya..
Berteman dengannya di: Facebook | Twitter | Google+