Pada tutorial HTML lengkap 10 telah dibahas tentang hyperlink yang meliputi Absolute Address, Relatif Address, dan Link ke Section tertentu dalam sebuah dokumen. Nah tutorial kali ini membahas pembuatan tabel di dokumen HTML. Tabel diperukan jika kita membuat sebuah daftar dari macam-macam item yang jika ditulis biasa menjadi jelek tampilannya dan kurang informatif.
Langsung saja pada contoh halaman HTML untuk tabel sederhana sekali:
Anda juga bisa menambahkan beberapa cell untuk membuat satu baris cell.
Berikutnya jika anda ingin membuat beberapa baris cell dalam tabel gunakan tag <TR>.
Anda juga bisa memberi caption (judul tabel) pada table dengan menambahkan tag berikut:
Menambahkan Heading cell
Pemformatan tabel
Contoh:
Anda juga bisa menambahkan attribute cellspacing untuk memberi spasi antar sel dan cellpadding untuk spasi dari border ke text dalam cell.
Contoh Merge Row (baris):
cellpadding="0">
Saya rasa artikel ini panjang sekali hehe.... banyak contoh kode lengkap yang saya tulis. Hanya satu harapan saya yaitu artikel ini bisa digunakan belajar bagi kawan-kawan yang belum tahu. Artikel tutorial HTML lengkap selanjutnya akan membahas kode-kode dan tag-tag HTML untuk pemasangan gambar (image). Sampai jumpa...
<code><html>Hasil dari kode diatas seperti ini:
<head>
<title>Membuat Tabel</title>
</head>
<body>
<table border="1">
<td>Tabel dengan single cell</td>
</table>
</body>
</html>
</code>
| Tabel dengan single cell |
Anda juga bisa menambahkan beberapa cell untuk membuat satu baris cell.
<code> <html><br /> <head><br /> <title>Membuat Tabel</title><br /> </head><br /> <body><br /> <table border="1"><br /> <td>cell 1</td><br /> <td>cell 2</td><br /> <td>cell 3</td><br /> <td>cell 4</td><br /> </table><br /> </body><br /> </html><br /></code>Hasil dari kode diatas seperti ini:
| cell 1 | cell 2 | cell 3 | cell 4 |
Berikutnya jika anda ingin membuat beberapa baris cell dalam tabel gunakan tag <TR>.
<code><html><br /><head><br /><title>Using Table</title><br /></head><br /><body><br /><table border="1"><br /><tr><br /><td>cell 1a</td><br /><td>cell 1b</td><br /><td>cell 1c</td><br /></tr><br /><tr><br /><td>cell 2a</td><br /><td>cell 2b</td><br /><td>cell 2c</td><br /></tr><br /></table><br /></body><br /></html><br /></code>Hasil dari kode diatas seperti ini:
| cell 1a | cell 1b | cell 1c |
| cell 2a | cell 2b | cell 2c |
Anda juga bisa memberi caption (judul tabel) pada table dengan menambahkan tag berikut:
<caption>Judul tabel</caption>
<code><html><br /><head><br /><title>Using Table</title><br /></head><br /><body><br /><table border="1"><br /><font color="#FF6600"><caption>Judul tabel</caption></font><br /><tr><br /><td>cell 1a</td><br /><td>cell 1b</td><br /><td>cell 1c</td><br /></tr><br /><tr><br /><td>cell 2a</td><br /><td>cell 2b</td><br /><td>cell 2c</td><br /></tr><br /></table><br /></body><br /></html><br /></code>Dan hasilnya seperti ini:
| cell 1a | cell 1b | cell 1c |
| cell 2a | cell 2b | cell 2c |
Menambahkan Heading cell
Untuk menambahkan heading pada tabel tambahkan tag (warna orange) berikut pada table yang sudah di buat.
<code><html><br /><head><br /><title>Using Table</title><br /></head><br /><body><br /><table border="1"><br /><caption>Judul tabel</caption><br /><font color="#FF6600"><tr><br /><th>Header 1</th><br /><th>Header 2</th><br /><th>Header 3</th><br /></tr></font><br /><tr><br /><td>cell 1a</td><br /><td>cell 1b</td><br /><td>cell 1c</td><br /></tr><br /><tr><br /><td>cell 2a</td><br /><td>cell 2b</td><br /><td>cell 2c</td><br /></tr><br /></table><br /></body><br /></html><br /></code>Hasilnya seperti dibawah ini:
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1a | cell 1b | cell 1c |
| cell 2a | cell 2b | cell 2c |
Pemformatan tabel
Untuk memformat perataan text di dalam tabel anda bisa gunakan attribute Align dan Valign (vertical Alignment). Dibawah ini atribut dan value-nya.
| Atribute | Value |
|---|---|
| Align | Center | justify | left | right |
| Valign | BASELINE | TOP | BOTTOM | MIDDLE |
<code><table border="1"><br /><tr align="center" valign="baseline"><br /><td>cell 1a</td><br /><td>cell 1b</td><br /><td>cell 1c</td><br /></tr><br /><tr align="center" valign="baseline"><br /><td>cell 2a</td><br /><td>cell 2b</td><br /><td>cell 2c</td><br /></tr><br /></table><br /></code>Hasilnya seperti dibawah ini:
| cell 1a | cell 1b | cell 1c |
| cell 2a | cell 2b | cell 2c |
Anda juga bisa menambahkan attribute cellspacing untuk memberi spasi antar sel dan cellpadding untuk spasi dari border ke text dalam cell.
Merge cell
Merge cell adalah menggabungkan dua atau lebih kolom atau baris menjadi satu. Belum ngerti? OK teruskan saja semoga nanti juga akan mengerti sendiri. Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge baris. Agar lebih jelas langsung saja ke contoh:
<code><html><br /><head><br /><title>Membuat Tabel</title><br /></head><br /><body><br /><table bgcolor="#F5F5F5" width="62%" border="1" cellpadding="0"><br /><tr><br /><td colspan="3" align="center">Kuartal 1</td><br /><td colspan="3" align="center">Kuartal 2</td><br /></tr><br /><tr align="center"><br /><td>Jan</td><br /><td>Feb</td><br /><td>Mar</td><br /><td>Apr</td><br /><td>Mei</td><br /><td>Jun</td><br /></tr><br /><tr><br /><td>100</td><br /><td>5000</td><br /><td>200</td><br /><td>1500</td><br /><td>2500</td><br /><td>1750</td><br /></tr><br /><tr><br /><td>290</td><br /><td>5050</td><br /><td>2300</td><br /><td>100</td><br /><td>270</td><br /><td>300</td><br /></tr><br /></table><br /></body><br /></html><br /></code>Dibawah ini hasil dari kode diatas.
| Kuartal 1 | Kuartal 2 | ||||
| Jan | Feb | Mar | Apr | Mei | Jun |
| 100 | 5000 | 200 | 1500 | 2500 | 1750 |
| 290 | 5050 | 2300 | 100 | 270 | 300 |
Contoh Merge Row (baris):
<code><html><br /><head><br /><title>Rowspan</title><br /></head><br /><body><br /><table bgcolor="#F5F5F5" width="75%" border="1"<br />cellpadding="0"><br /><tr><br /><td></td><br /><td></td><br /><td>Divisi A</td><br /><td>Divisi B</td><br /></tr><br /><tr><br /><td rowspan="3">Kuartal 1</td><br /><td>Jan</td><br /><td>1000</td><br /><td>12000</td><br /></tr><br /><tr><br /><td>Feb</td><br /><td>12500</td><br /><td>1345</td><br /></tr><br /><tr><br /><td>Mar</td><br /><td>78090</td><br /><td>71080</td><br /></tr><br /></table><br /></body><br /></html><br /></code>Dibawah ini hasil dari kode diatas.
cellpadding="0">
| Divisi A | Divisi B | ||
| Kuartal 1 | Jan | 1000 | 12000 |
| Feb | 12500 | 1345 | |
| Mar | 78090 | 71080 |
Saya rasa artikel ini panjang sekali hehe.... banyak contoh kode lengkap yang saya tulis. Hanya satu harapan saya yaitu artikel ini bisa digunakan belajar bagi kawan-kawan yang belum tahu. Artikel tutorial HTML lengkap selanjutnya akan membahas kode-kode dan tag-tag HTML untuk pemasangan gambar (image). Sampai jumpa...
No comments:
Post a Comment