KeyzeX – Tabel digunakan untuk menyajikan sebuah data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdisi atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Kolom informasi secara sederhana digambarkan seperti berikut.
Tabel mempunyai judul, tempat anda menjelaskan kolom atau baris yang dilibatkan, baris untuk informasi, dan sel untuk setiap item-itemnya. Pada tabel berikut, kolom pertama berisi Informasi header, setiap harus menjelaskan sebuah tag tabel HTML ini, dan setiap sel berisi sebuah pasangan tag atau penjelasan mengenai fungi tag tersebut.
| Elemen | Penjelasan |
|---|---|
| <Table>…</table> | Mendefinisikan sebuah Table dalam HTML jika atribut border dituliskan maka browser akan menampilkan tabel dengan border |
| <th>…</th> | Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah. |
| <caption>…</caption> | Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah ditengah pada bagian paling atas table. Atribut align=”left” dapat digunakan untuk menempatkan judul pada bagian kiri tabel
Catatan: Judul dapat diberi tag apa saja. |
| <tr>…</tr> | Menspesifikan sebuah baris table dalam tabel. Agan dapat mendefinisikan seluruh atribut untuk seluruh baris. Align(left, center, right) dan valign(top,middle,bottom). |
| <td>…</td> | Mendefinisikan sebuah sel data tabel. Secara default teks dalam sel ini ditampilkan rata kiri, dan di tengah scara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isinya. |
Atribut Tabel
Atribut yang didefinisikan dalam <th>…</th> atau <td>…</td> akan menggantikan alignment default yang didefinisikan dalam <tr>…</tr>
| Elemen | Penjelasan |
|---|---|
| align={left/center/right} | Alignment horizontal untuk sel |
| valign={top/middle/bottom} | Mendefinisikan alignment vertikal dalam sel |
| colspan=n | Sejumlah n kolom sebuah sel diperlebar. |
| Rowspan=n | Sejumlah n baris sebuah sel diperbesar. |
| Nowrap | Mematikan wrapping dalam sebuah sel. |
Berikut ini adalah contoh bagaimana membuat tabel dalam dokumen HTML.
<html> <body> <Center> <p> <font size="12px">Selamat Belajar TABEL</font></p> <p><font size="4px">www.keyzex.id</font></p> </Center> <h1> Membuat Satu Kolom Tabel :</h1> <table border="1"> <tr> <td>KeyzeX - Share All That You Need </td> </tr> </table> <h2> Satu baris dan dua kolom :</h2> <table border="1"> <tr> <td> KeyzeX </td> <td> Share All That You Need </td> </tr> </table> <h3> Satu baris dan tiga kolom : </h3> <table border="1"> <Tr> <td> KeyzeX </td> <td> - </td> <td> Share All That You Need</td> </Tr> </table> </body> </html>
Catatan :
- Jumlah baris tabel ditentukan dengan banyaknya <tr>….</tr> yang dituliskan dalam elemen tabel dari <table>..</table>.
- Jumlah kolom dalam tabel ditentukan dengan banyaknya tag <td>…</td> didalam setiap definisi baris dari <tr>..</tr>.