 |
Assalammu'alaikum,..
Sudah lama nih admin tidak ngeposting, maklum lagi banyak kegiatan :) hehehe...
Oke, admin hari ini mau sharing cara membuat tabel dengan html. Lets doing!
Tabel HTML
Tabel ini biasanya digunakan untuk membuat layout dari suatu halaman web. Tabel juga bisa diisi dengan gambar, teks, form, bahkan juga bisa diisi dengan tabel lain. Tabel HTML memiliki tag pembuka <table> dan tag penutup </table>. Contoh sintaks penulisannya sebagai berikut:
<table>
<tr>
<td>Data Tabel</td>
<tr>
</table>
NB:
<tr>...</tr> digunakan untuk menentukan jumlah baris
<td>...</td> digunakan untuk menentukan jumlah kolom
Atribut yang bisa digunakan pada tag <table> yaitu :
Atribut yang bisa digunakan pada tag <tr> yaitu :
Atribut yang bisa digunakan pada tag <td> dan <th> yaitu :
- Atribut Width, Border, Bordercolor
<!DOCTYPE html>
<html>
<head>
<title>Atribut Width, Border, Bordercolor</title>
</head>
<body>
<table width="500" border="1" bordercolor="#FF0000">
<caption>Atribut Width, Border, Bordercolor</caption>
<tr>
<th width="200">Baris 1 Kolom 1</th>
<th width="180">Baris 1 Kolom 2</th>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya:
- Atribut Backround, Height, Cellspacing, Cellpadding
<!DOCTYPE html>
<html>
<head>
<title>Atribut Backround, height, cellspacing, cellpadding</title>
</head>
<body>
<table width="1024" border="3" background="WindowsXp.jpg" height="768" cellspacing="25" cellpadding="10" align="center">
<caption>Atribut Backround, height, cellspacing, cellpadding </caption>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya :
- Atribut Colspan, Rowspan, Valign
<!DOCTYPE html>
<html>
<head>
<title>Atribut Colspan, Rowspan, Valign </title>
</head>
<body>
<table width="500" border="1" bgcolor="#FFFF00" align="center">
<caption>Atribut Colspan, Rowspan, Valign </caption>
<tr>
<td colspan="2">Kolom 1 dan Kolom 2 Di Gabung</td>
</tr>
<tr>
<td rowspan="2" valign="top">Baris 2 dan Baris 3 Di Gabung</td>
<td bgcolor="#0000FF">Baris 2 Kolom 2</td>
</tr>
<tr>
<td bgcolor="red">Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya :
- Tabel dalam Tabel
<!DOCTYPE html>
<html>
<head>
<title>Tabel dalam Tabel</title>
</head>
<body>
<table border="1">
<tr><td>Parent 1</td>
<td><table border="1">
<tr>
<td>Child 1</td>
<td><table border="1">
<tr>
<td>Grandson 1</td>
<td>Grandson 2</td>
</tr>
<tr>
<td>Grandson 3</td>
<td>Grandson 4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Child 2</td>
<td>Child 3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Parent 2</td>
<td>Parent 3</td>
</tr>
</table>
</body>
</html>
Hasilnya :
Oke kawan-kawan, cukup itu dulu yang bisa admin jelaskan. Semoga dapat menambah ilmu kalian. Jangan lupa tetap kunjungi blog ini ya :) bye bye...
"Banyak Berlatih Akan Meningkatkan Keterampilan Kita"
