Untuk menampilkam data yang terstruktur dari database kita biasa menggunakan table, trus gimana caranya membuat table dari html?
Sebelum kita mulai membuat table pada umumnta kita memnggunukan "tag" tersebut ::
- Tag
<table>untuk membuattabelnya - Tag
<thead>untuk membuatbagian kepala tabel - Tag
<tbody>untuk membuat bagian body dari tabel - Tag
<tr>(tabel row) untuk membuat baris - Tag
<td>(table data) untuk membuat sel - Tag
<th>(table head) untuk membuat judul pada header
Mari kita mulai dengan contoh pertama :
<html>
<head>
<title>Baru Belajar</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td> Baris 2, Kolom 3</td>
</tr>
<tr>
<td> Baris 3, Kolom 1</td>
<td> Baris 3, Kolom 2</td>
<td> Baris 3, Kolom 3</td>
</tr>
<tr>
<td> Baris 4, Kolom 1</td>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body
></html>
<head>
<title>Baru Belajar</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td> Baris 2, Kolom 3</td>
</tr>
<tr>
<td> Baris 3, Kolom 1</td>
<td> Baris 3, Kolom 2</td>
<td> Baris 3, Kolom 3</td>
</tr>
<tr>
<td> Baris 4, Kolom 1</td>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body
></html>
Hasilnya :
Nah trus gimana si cara buat table garis antara baris dan kolom, gini bang boscu caranya kita hanya perlu menambahkan colspan dan rowspan :
<html>
<head>
<title>Baru Belajar</title>
</head>
<body>
<table border="1" width="600">
<tr>
<th>Baris 1, kolom 1</th>
<th>Baris 1, kolom 2</th>
<th>Baris 1, kolom 3</th>
</tr>
<tr>
<td>Baris 2, kolom 1</td>
<td colspan="2" align="center">Baris 2 Gabungan Kolom 2 dan 3</td>
</tr>
<tr>
<td colspan="2" align="center">Baris 3 Gabungan kolom 1 dan 2</td>
<td rowspan="2" align="center">Gabungan Baris 2 dan 3 di kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, kolom 2</td>
</tr>
</table>
</body>
</html>
<head>
<title>Baru Belajar</title>
</head>
<body>
<table border="1" width="600">
<tr>
<th>Baris 1, kolom 1</th>
<th>Baris 1, kolom 2</th>
<th>Baris 1, kolom 3</th>
</tr>
<tr>
<td>Baris 2, kolom 1</td>
<td colspan="2" align="center">Baris 2 Gabungan Kolom 2 dan 3</td>
</tr>
<tr>
<td colspan="2" align="center">Baris 3 Gabungan kolom 1 dan 2</td>
<td rowspan="2" align="center">Gabungan Baris 2 dan 3 di kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya :
Mungkin cukup sekian artikel kali ini, semoga bermanfaat :)
Posting Komentar