Cara membuat Table di Blog

Untuk membuat tabel, ada beberapa unsur elemenatau atribut html yang kita butuhkan, yaitu :

- Table width : nilai lebar tabel keseluruhan.
- Border : nilai ketebalan garis
- Baris tabel ditandai dengan tag awal dan tag akhir
- Kolom tabel ditandai dengan tag awal dan tag akhir


Silahkan anda perhatikan cara penulisan kode untuk membuat tabel :


1. Tabel 1 kolom, dan 1 baris

<table width="400" border="1">
<tr> <td><div align="center">
Tabel 1 kolom, dan 1 baris</td> </tr>
</table>

Hasilnya:

Tabel 1 kolom, dan 1 baris

2. Tabel 1 kolom, dan 2 baris
Untuk membuat tabel 2 baris dan seterusnya, kita tinggal menambahkan elemen tag






diantara tag
yaitu :

<table width="400" border="1">
<tr>
<td>Tabel 1 kolom, dan baris pertama</td>
</tr>
<tr>
<td>Tabel 1 kolom, dan baris kedua</td>
</tr>
</table>

Hasilnya:

Tabel 1 kolom, dan baris pertama

Tabel 1 kolom, dan baris kedua

3. Tabel 2 kolom, dan 1 baris
Untuk membuattabel 2 kolom dan seterusnya kita tinggal menambahkan elemen tag diantara
yaitu :

<table width="400" border="1">
<tr>
<td> Kolom Pertama</td>
<td>Kolom Kedua</td>
</tr>
</table>

Hasilnya:

Kolom Pertama

Kolom Kedua

4.Tabel 2 kolom dengan 2 baris

<table width="400" border="1">
<tr>
<td>Baris pertama dan Kolom Pertama</td>
<td>Baris pertama dan Kolom Kedua </td>
</tr>
<tr>
<td>Baris Kedua dan Kolom Pertama</td>
<td>Baris Kedua dan Kolom Kedua</td>
</tr>
</table>

Hasilnya:

Baris pertama dan Kolom Pertama	Baris pertama dan Kolom Kedua
Baris Kedua dan Kolom Pertama	Baris Kedua dan Kolom Kedua

5.Tabel dengan garis tebal

<table width="400" border="5">
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>

Hasilnya:

Teks

6.Tabel dengan garis berwarna

<table width="400" border="1" bordercolor="#3083FF">
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>

Hasilnya:

Teks

7.Tabel dengan warna background sama

<table width="500" border="1" bgcolor="#00FF00">
<tr>
<td><div align="center">Teks</div></td>
<td><div align="center">Teks</div></td>
</tr>
</table>

Hasilnya:

Teks

Teks

8.Tabel dengan warna beda

<table width="400" border="1">
<tr>
<td bgcolor="#D9F5FF"><div align="center">Teks</div></td>
<td bgcolor="#E1FACD"><div align="center">Teks</div></td>
</tr>
</table>

Hasilnya:

Teks

Teks

9.Tabel dengan Judul

<table width="400" border="1">
<tr> <th colspan="100%" scope="col"bgcolor="#FFF7DB">JUDUL TABEL</th> </tr>
<tr>
<td bgcolor="#E4FADE"><div align="center"><strong>Judul Kolom 1</strong></div></td>
<td bgcolor="#EDFBFF"><div align="center"><strong>Judul Kolom 2</strong></div></td>
<td bgcolor="#FDF0FF"><div align="center"><strong>Judul Kolom 3</strong></div></td>
</tr>
<tr>
<td bgcolor="#E4FADE"><div align="center">Teks</div></td>
<td bgcolor="#EDFBFF"><div align="center">Teks</div></td>
<td bgcolor="#FDF0FF"><div align="center">Teks</div></td>
</tr>
<td bgcolor="#E4FADE"><div align="center">Teks</div></td>
<td bgcolor="#EDFBFF"><div align="center">Teks</div></td>
<td bgcolor="#FDF0FF"><div align="center">Teks</div></td>
</tr>
</table>

Hasilnya:

JUDUL TABEL
Judul Kolom 1	Judul Kolom 2	Judul Kolom 3
Teks	Teks	Teks
Teks	Teks	Teks

Sumber : http://www.tutorialblognoer.co.cc

10.Tabel lain 2

<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th rowspan="2">Table header</th><td>BADBOY1 </tr> <tr> <td>BADBOY2</td> </tr> </table>
<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th rowspan="2">Table header</th><td>BADBOY1 </tr> <tr> <td>BADBOY2</td> </tr> </table>


Hasilnya:

Table header	BADBOY1
	BADBOY2

Tertanda