Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table>, dan menggunakan tag <tr> untuk membuat baris dan <td> untuk membuat kolom.
Untuk lebih mudah memahami dalam pembuatan table pada HTML, berikut saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML. Tag <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik, <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML. <td> atau dikenal dengan table data merupakan tag yang digunakan untuk membuat kolom dalam baris, dan tag <th> untuk membuat table head atau bagian kepala pada table.
Dibawah ini Contoh Pembuatan Tabel Sederhana pada HTML :
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</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>
<html>
<head>
<title>belajar membuat tabel di html</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>
Hasil yang terlihat pada browser anda akan seperti ini :
| baris 1 / kolom 1 | baris 1 / kolom 2 | baris 1 / kolom 3 |
| baris 2 / kolom 1 | baris 2 / kolom 2 | baris 2 / kolom 3 |
| baris 3/ kolom 1 | baris 3/ kolom 2 | baris 3/ kolom 3 |
| baris 4/ kolom 1 | baris 4/ kolom 2 | baris 4/ kolom 3 |
Dari contoh diatas dapat anda lihat sendiri fungsi dari masing-masing tag yang sudah kita bahas diatas. namun pada tag table saya memberikan atribut border=’1’. atribut border ini digunakan untuk memberikan garis pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel yang kita buat tadi ( 1 untuk membuat garis. Dan 0 jika tidak ingin menggunakan garis ).
Dan berikut ini adalah contoh membuat tabel HTML dengan menggunakan tag head atau bagian kepala tabel.
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Acil</td>
<td>Depok</td>
</tr>
<tr>
<td>2</td>
<td>Sopiyan</td>
<td>Subang</td>
</tr>
<tr>
<td>3</td>
<td>Suheli</td>
<td>Purwakarta</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Acil</td>
<td>Depok</td>
</tr>
<tr>
<td>2</td>
<td>Sopiyan</td>
<td>Subang</td>
</tr>
<tr>
<td>3</td>
<td>Suheli</td>
<td>Purwakarta</td>
</tr>
</table>
</body>
</html>
Maka akan terlihat seperti ini :
| No | Nama |
Alamat
|
|---|---|---|
1
|
Acil
|
Depok
|
2
|
Sopiyan
|
Subang
|
3
|
Suheli
|
Purwakarta
|
Penggabungan Kolom dan Baris
Menggabungkan beberapa kolom menjadi satu kolom menggunakan atribut colspan , sedangkan untuk menggabungkan baris menggunakan atribut rowspan. Contoh penggunaan:
Penggunaan Atribut colspan:
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1″>
<tr>
<td colspan="2″>Gabungan Kolom 1 dan 2 pada Baris 1</td>
</tr>
<tr>
<td style="width:50%">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>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1″>
<tr>
<td colspan="2″>Gabungan Kolom 1 dan 2 pada Baris 1</td>
</tr>
<tr>
<td style="width:50%">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>
Maka hasilnya akan seperti ini :
Penggunaan Atribut rowspan :
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">Gabungan Baris 1 dan 2 pada Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">Gabungan Baris 1 dan 2 pada Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>
Maka Hasilnya akan seperti ini :
Sekian untuk tutorial kali ini, Ulang terus pelajarannya sampai anda menguasainya, baru lanjut ke
"Cara Membuat Tag Iframe dalam Kode HTML".
Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
Kami menerima masukan dari anda jika memang ada pembahasan yang keliru.
kami sangat senang jika anda dapat berkontribusi untuk menyempurnakan postingan kami.
EmoticonEmoticon