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 :
Preview kode html diatas dalam sebuah browser web :
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 :
0 comments:
Post a Comment