Tag <TABLE> atau <table> digunakan untuk membuat tabel dalam dokumen HTML. Bagian pokok dari tabel adalah cell yang didefinisikan dengan menggunakan tag <TD>. Contoh serderhana pembuatan tabel dengan 1 cell (kolom) :
Belajar Membuat Tabel| Table dengan satu cell |
<html> <head> <title>Belajar Membuat Tabel</title> </head> <body> <table border="1"> <td>Table dengan satu cell</td> </table> </body> </html>Anda bisa menambahkan beberapa cell seperti ini :
Belajar Membuat Tabel
| cell 1 | cell 2 | cell 3 | cell 4 |
<html> <head> <title>Belajar Membuat Tabel</title> </head> <body> <table border="1"> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </table> </body> </html>
Kalau anda ingin membuat beberapa baris cell dalam tabel, gunakan tag <tr>. Dan jangan lupa tutup dengan tag </tr>.
Belajar Membuat Tabel| cell 1a | cell 1b | cell 1c |
| cell 2a | cell 2b | cell 2c |
<html> <head> <title>Using Table</title> </head> <body> <table border="1"> <tr> <td>cell 1a</td> <td>cell 1b</td> <td>cell 1c</td> </tr> <tr> <td>cell 2a</td> <td>cell 2b</td> <td>cell 2c</td> </tr> </table> </body> </html>
Untuk menentukan perataan tekt di dalam tabel, anda bisa gunakan attribute Align dan Valign (Vertical Alignment).
Pemformatan Tabel| Attribute | Value |
| Align | Left, Right, Center, Justify |
| Valign | Baseline, Top, Bottom, Middle |
Merge cell
Tag <td> memiliki atribut colspan untuk merge column (kolom) dan rowspan untuk merge baris.Contoh:
Belajar Membuat Tabel
| Januari | Februari | ||||||
| 1 | 2 | 3 | 4 | 1 | 2 | 3 | 4 |
| 10.000 | 50.000 | 20.000 | 15.000 | 25.000 | 15.000 | 20.000 | 15.000 |
| 50.000 | 5.000 | 25.000 | 10.000 | 20.000 | 30.000 | 20.000 | 15.000 |
<table border="1" cellpadding="0" width="62%" align="center"> <tbody> <tr> <td colspan="4" align="center"><strong>Januari</strong></td> <td colspan="4" align="center"><strong>Februari</strong></td> </tr> <tr align="center"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>10.000</td> <td>50.000</td> <td>20.000</td> <td>15.000</td> <td>25.000</td> <td>15.000</td> <td>20.000</td> <td>15.000</td> </tr> <tr> <td>50.000</td> <td>5.000</td> <td>25.000</td> <td>10.000</td> <td>20.000</td> <td>30.000</td> <td>20.000</td> <td>15.000</td> </tr> </tbody> </table>Keterangan :
Attribute cellspacing untuk memberi spasi antar sel dan cellpadding untuk spasi dari border ke text dalam cell.
Tidak ada komentar:
Posting Komentar