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