Tutorial Blog kali ini saya akan membahas bagaimana cara membuat tabel karena tabel sangat penting dan sering diperlukan ketika kita edit atau posting artikel pada web atau blog. Biasanya tabel digunakan untuk membuat Daftar atau forum. Tapi dengan tabel kita juga bisa membuat artikel kita menjadi beberapa Kolom atau Layout, seperti halnya yang sering kita lihat kolom-kolom yang ada di Koran atau majalah.
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 <tr> dan tag akhir </tr>
-
Kolom tabel ditandai dengan tag awal <td> dan tag akhir </td>
1. Tabel 1 kolom, dan 1 baris
<table width="500"
border="1">
<tr>
<td scope="col">Tabel 1 kolom, dan 1 baris</td>
</tr>
</table>
<tr>
<td scope="col">Tabel 1 kolom, dan 1 baris</td>
</tr>
</table>
Berikut 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
<tr></tr> diantara tag <table> </table>
yaitu :
<table width="500"
border="1">
<tr>
<td>Tabel 1 kolom, dan baris pertama</td>
</tr>
<tr>
<td>Tabel 1 kolom, dan baris kedua</td>
</tr>
</table>
Berikut 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 <td></td> diantara <tr></tr> yaitu :
<table width="500"
border="1">
<tr>
<td> Kolom Pertama</td>
<td>Kolom Kedua</td>
<td>Kolom Kedua</td>
</tr>
</table>
Berikut hasilnya :
Kolom Pertama
|
Kolom Kedua
|
4. Tabel 2 kolom dengan 2 baris
<table width="500"
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>
<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>
Berikut 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
Garis tebal
ditentukan oleh Nilai border, semakin besar
nilainya semakin Tebal garisnya dan terlihat seperti 3D (efek bevel)
<table width="500" border="5">
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>
Berikut hasilnya :
Teks
|
6. Tabel dengan garis berwarna
Untuk
memberi warna border kita tinggal menambah “bordercolor “
<table width="0"
border="1" bordercolor="#3083FF">
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>
<tr>
<td><div align="center">Teks</div></td>
</tr>
</table>
Berikut hasilnya :
Teks
|
7. Tabel dengan warna background sama
Untuk
memberi warna Background dengan warna sama seluruh tabel kita tinggal
menambah “bgcolor “.
<table width="500"
border="1" bgcolor="#00FF00">
<tr>
<td><div align="center">Teks</div></td>
<td><div align="center">Teks</div></td>
</tr>
</table>
<tr>
<td><div align="center">Teks</div></td>
<td><div align="center">Teks</div></td>
</tr>
</table>
Berikut hasilnya :
Teks
|
Teks
|
8. Tabel dengan warna beda
Untuk
memberi warna Background dengan warna berbeda pada setiap kolomnya :
<table width="500"
border="1">
<tr>
<td bgcolor="#D9F5FF"><div align="center">Teks</div></td>
<td bgcolor="#E1FACD"><div align="center">Teks</div></td>
</tr>
</table>
<tr>
<td bgcolor="#D9F5FF"><div align="center">Teks</div></td>
<td bgcolor="#E1FACD"><div align="center">Teks</div></td>
</tr>
</table>
Berikut hasilnya :
Teks
|
Teks
|
9. Tabel dengan Judul
<table width="500"
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>
<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>
Berikut hasilnya :
JUDUL TABEL
|
||
Judul Kolom 1
|
Judul Kolom 2
|
Judul Kolom 3
|
Teks
|
Teks
|
Teks
|
Teks
|
Teks
|
Teks
|
Silahkan anda bisa otak - atik sendiri sesuai selera anda.
Semoga
bermanfaat..........
wah...makasih infonya yah...
BalasHapuslain kali saya pake tutorialnya ^__^
ijin bookmark dulu sob....
Oke SOB...
HapusMakasih Udah mampir