Tabel HTML digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukan kelompok data dalam satu kesatuan. Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi baris (dengan tag <tr>), dan setiap baris dibagi ke dalam sel data (dengan tag <td>). td singkatan dari "tabel data", dan memegang isi dari sel data. Sebuah tag <td> dapat berisi text, links, images, lists, forms, tabel lain, dll.
1. Tabel border
Cara membuat border tabel dalam dokumen HTML :
<html>
<body>
<h4>Dengan border normal :</h4>
<table border="1">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
<h4>Dengan border tebal :</h4>
<table border="8">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
<h4>Dengan border yang sangat tebal:</h4>
<table border="15">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
</body>
</html> |
Preview kode html diatas dalam sebuah browser web :
2. Tabel tanpa border
Cara membuat tabel tanpa border dalam dokumen HTML :
<html>
<body>
<h4>Tabel ini tidak memiliki border:</h4>
<table>
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>400</td><td>500</td><td>600</td></tr>
</table>
<h4>Dan tabel ini tidak memiliki border:</h4>
<table border="0">
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>400</td><td>500</td><td>600</td></tr>
</table>
</body>
</html>
|
Preview kode html diatas dalam sebuah browser web :
3. Tabel header
Cara membuat tabel header dalam dokumen HTML :
<html>
<body>
<h4>Tabel Header</h4>
<table border="1">
<tr><th>Nama</th><th>No. Telp</th><th>No.HP</th></tr>
<tr><td>Marchelio</td><td>0431823999</td><td>081240044004</td></tr>
</table>
<h4>Vertikal header:</h4>
<table border="1">
<tr><th>Nama :</th><td>Marchelio</td></tr>
<tr><th>No. Telp</th><td>0431823999</td></tr>
<tr><th>No. HP</th><td>081240044004</td></tr>
</table>
</body>
</html> |
Preview kode html diatas dalam sebuah browser web :
4. Tabel dengan keterangan
Cara menambahkan keterangan (caption) dalam tabel :
<html>
<body>
<table border="1">
<caption>Tabungan Bulanan</caption>
<tr><th>Bulan</th><th>Tabungan</th></tr>
<tr><td>January</td><td>Rp. 100.000</td></tr>
<tr><td>February</td><td>Rp. 200.000</td></tr>
<tr><td>Maret</td><td>Rp. 150.000</td></tr>
</table>
</body>
</html> |
Preview kode html diatas dalam sebuah browser web :
5. Tabel Colspan dan Rowspan
Cara membuat cell tabel yang dilebarkan lebih dari satu baris atau satu kolom :
<html>
<body>
<h4>Sel yang mencakup dua kolom:</h4>
<table border="1">
<tr><th>Nama</th><th colspan="2">No. Telp / HP</th></tr>
<tr><td>Marchelio</td><td>0431823999</td><td>081240044004</td></tr>
</table>
<h4>Sel yang mencakup dua baris:</h4>
<table border="1">
<tr><th>Nama:</th><td>Marchelio</td></tr>
<tr><th rowspan="2">No. Telp / HP:</th><td>0431823999</td></tr>
<tr><td>081240044004</td></tr>
</table>
</body>
</html> |
Preview kode html diatas dalam sebuah browser web :
6. Tag di dalam tabel
Cara tabel dengan menampilkan elemen-elemen di dalam elemen lain :
<html>
<body>
<table border="1">
<tr><td><p>Ini adalah paragraf</p><p>Ini adalah paragraf lain</p></td>
<td>Sel ini memiliki sebuah tabel:
<table border="1">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table></td></tr>
<tr><td>Sel ini berisi daftar (lists)
<ul><li>apel</li><li>pisang</li><li>nanas</li></ul></td>
<td>DLL</td>
</tr>
</table>
</body>
</html> |
Preview kode html diatas dalam sebuah browser web :
7. Cellpadding
Cara menggunakan cellpadding untuk membuat spasi lebih dari antara sel dan border :
<html>
<body>
<h4>Tanpa cellpadding :</h4>
<table border="1">
<tr><td>Awal</td><td>Akhir</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>Dengan cellpadding :</h4>
<table border="1"
cellpadding="10">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
</body>
</html> |
Preview kode html diatas dalam sebuah browser web :
8. Cellspacing
Cara menggunakan cellspacing untuk menambah jarak antara sel :
<html>
<body>
<h4>Tanpa cellspacing :</h4>
<table border="1">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
<h4>Dengan cellspacing :</h4>
<table border="1"
cellspacing="10">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
</body>
</html> |
Preview kode html diatas dalam sebuah browser web :
9. Atribut Frame
Cara menggunakan atribut frame untuk mengontrol perbatasan (border) di sekitar tabel :
<html>
<body>
<p><b>Catatan:</b>
Jika Anda tidak melihat ada frame / border di sekitar tabel di bawah ini, browser Anda tidak mendukung
atribut frame.</p>
<h4>Dengan frame="border":</h4>
<table frame="border">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
<h4>Dengan frame="box":</h4>
<table frame="box">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
<h4>Dengan frame="void":</h4>
<table frame="void">
<tr><td>Awal</td><td>Row</td></tr>
<tr>
<td>Akhir</td>
<td>Row</td>
</tr>
</table>
<h4>Dengan frame="above":</h4>
<table frame="above">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
<h4>Dengan frame="below":</h4>
<table frame="below">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
<h4>Dengan frame="hsides":</h4>
<table frame="hsides">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
<h4>Dengan frame="vsides":</h4>
<table frame="vsides">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr>
</table>
<h4>Dengan frame="rhs":</h4>
<table frame="rhs">
<tr><td>Awal</td><td>Row</td></tr>
<tr><td>Akhir</td><td>Row</td></tr>
</table>
</body>
</html> |
Preview kode html diatas dalam sebuah browser web :
