Contoh : Tabel.html
- <html>
- <head>
- <title>Tabel</title>
- </head>
- <body>
- <table border="1">
- <tr>
- <td>No</td>
- <td>Nama</td>
- <td>Usia</td>
- </tr>
- <tr>
- <td>1</td>
- <td>Tresna surya</td>
- <td>20</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Dimas adi andrea</td>
- <td>16</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Arya adi</td>
- <td>10</td>
- </tr>
- </table>
- </body>
- </html>
Hasil keluaran browser :
Penjelasan : Tabel di atas memiliki 4 baris dan setiap baris
memiliki 3, jadi kita memerlukan 4 tag <tr> untuk membuat baris beserta
tutupnya dan setiap tag <tr> memiliki 3 tag <td> untuk membuat
kolom. Border digunakan untuk menampilkan garis pada tabel dan pada kode di
atas memiliki tingkat ketebalan border 1. Anda dapat mengaturnya, semakin
tinggi nilainya maka semakin tebal.
Catatan : kolom No, Nama, Usia pada tabel di atas merupakan
judul dari kolom, anda dapat menggantinya menjadi :
<th>No</th>
<th>Nama</th>
<th>Usia</th>
<th> merupakan table heading, anda dapat
menggunakannya pada judul kolom sebagai pembeda dengan kolom lainnya.
Bagaimana jika saya akan membuat judul pada bagian atas
tabel ?
Tabel menyediakan tag untuk membuat judul tabel, tag
tersebut di definisikan dengan tag <caption>…</caption> . anda
dapat meletakannya setelah tag <table> , contoh :
- <table border="1">
- <caption>Data Konsumen</caption>
- <tr>
- <td>…</td>
- </tr>
- </table>
Bagaimana jika saya ingin mengatur jarak kolom dengan teks
agar tidak terlalu rapat ?
Tabel menyediakan attribute yang dapat mengatur jarak kolom
yang di tempati teks agar tidak terlalu merapat yaitu cellpadding, contoh :
- <table border="1" cellpadding=”5”>
- <caption>….</caption>
- <tr>
- <td>…</td>
- </tr>
- </table>
Anda dapat memperbesar nilai attribute cellpadding jika
menginginkan jarak yang lebih jauh atau sebaliknya.
Tidak ada komentar:
Posting Komentar