digunakan untuk membuat tabel dalam document HTML,bagian pokok dari tabel adalah cell (ingat cell di microsoft excel?) yang didefinisikan dengan menggunakan tag
.
Langsung saja pada contoh halaman HTML untuk tabel sederhana sekali:
<code><html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<table border="1">
<td>Tabel dengan single cell</td>
</table>
</body>
</html>
</code>
Hasil dari kode diatas seperti ini:
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:
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>
Jika diterapkan pada kode diatas maka kode diletakkan sebagai berikut:
<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:
Judul tabel| 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:
Judul tabel| 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 |
Contoh:
<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:
Contoh
Merge Column:<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...
Belum ada tanggapan untuk "Tutorial HTML-11 (ateonsoft.com/ayomaju.com)"
Post a Comment