Pemrograman HTML/Tabel

Tabel digunakan untuk menyajikan data terstruktur, dan dapat pula digunakan untuk menata tampilan halaman. Tabel dapat disisipkan di manapun pada halaman, bahkan di dalam tabel lainnya. Tag yang paling berguna saat membuat tabel adalah <table> - tabel, <tr> - baris tabel, <td> - data tabel, dan <th> - kepala tabel.

Tabel minimal

Pertama, lihatlah contoh berikut:

 <table>
 <tr><th>Makanan</th><th>Harga</th></tr>
 <tr><td>Soto</td><td>Rp10.000,00</td></tr>
 <tr><td>Nasi goreng</td><td>Rp12.000,00</td></tr>
 </table>

Setiap tabel dimulai dengan tag <table> dan diakhiri dengan tag </table>. Dalam tag tabel, dapat dimasukkan atribut tabel.

Tabel memiliki baris, setiap baris dimulai dengan tag baris tabel <tr> dan bisa ditutup dengan tag </tr>. Baris harus berada di dalam tabel, seperti yang akan Anda lihat kemudian.

Baris-baris tersebut mengandung sel, setiap sel dimulai tag data tabel <td> dan secara opsional diakhiri dengan tag </td>. Sel harus berada di dalam baris.

Jika kita meletakkan sel tabel di luar baris, atau jika Anda lupa menutup sel, atau baris, atau tabel, hasil yang akan terjadi tidak dapat dipastikan. Teks yang dimaksudkan untuk berada di dalam tabel dapat tampil di tempat yang tidak diduga. Hal terburuk, keseluruhan isi tabel tidak akan ditampilkan.

Sebagai contoh, pada IE dan Firefox:

Sebuah sel di luar baris diperlakukan sebagai baris terpisah pada posisi vertikal tersebut.
Seluruh konten / isi di luar sel, baik dalam sebuah baris maupun tidak, diletakkan sebelum keseluruhan tabel, dalam urutan penulisannya; IE meletakkan setiap item pada sebuah baris baru; Firefox tidak, namun pada beberapa kasus meletakkan sebuah spasi kosong di antara itemnya.

Jika </td> dan </tr> opsional tidak diletakkan, hal di atas merujuk hanya ke konten sebelum baris pertama, dan pada baris sebelum elemen pertama. Perhatikan bahwa </table> diperlukan; jika lupa, maka seluruh konten berikutnya dianggap bagian dari sel terakhir dari baris terakhir, bahkan ke tabel berikutnya.

Tugas - Membuat sebuah tabel

Bukalah default.htm dan simpan sebagai tabel.htm pada folder yang sama.
Buatlah kode HTML ini pada body dokumen:

<table>
  <tr><th>Makanan</th><th>Harga</th></tr>
  <tr><td>Soto</td><td>Rp10.000,00</td></tr>
  <tr><td>Nasi goreng</td><td>Rp12.000,00</td></tr>
</table>

Simpan berkas (file) dan lihatlah dari sebuah peramban.

Hasilnya adalah:

Makanan	Harga
Soto	Rp10.000,00
Nasi goreng	Rp12.000,00

Catatan: Tabel ini terdiri dari dua baris (lihatlah dua tag <tr>), dan di dalam setiap baris ada dua data (dua tag <td>).

Anda dapat membandingkan tabel dan spreadsheet. Tabel ini mempunyai dua baris dan dua kolom, membuat 4 sel yang berisi data. (2 baris * 2 kolom = 4 sel).

Judul tabel dan heading

Terdapat contoh berikut:

<table>
<caption>Perhitungan dan Hasil</caption>
<tr><th>Perhitungan</th><th>Hasil</th></tr>
<tr><td>1 + 1</td><td>2</td></tr>
<tr><td>3 * 5</td><td>15</td></tr>
</table>

Judul tabel (caption) berguna untuk menentukan atau menggambarkan isi tabel. Judul ini bisa dipakai ataupun tidak.

Untuk menambahkan judul pada tabel, masukkan elemen caption setelah tag pembuka table, dengan teks tulisan di dalam elemennya, seperti ditunjukkan berikut ini.

<table>
<caption>Rumus dan Hasil</caption>
...
</table>

Judul biasanya ditampilkan di luar garis tepi tabel, di bagian atas. Tampilan dan letak pasti dari judul ini bergantung pada penataan CSS.

Heading tabel adalah suatu cara untuk mendefinisikan konten dari kolom tabel. Heading biasanya hanya digunakan pada <tr> (baris tabel) pertama.

Daripada menggunakan <td> untuk sel itu, digunakanlah <th>.

Border

Border (garis tepi) di sekeliling tabel bisa ada, bisa pula tidak: kadang-kadang border membantu untuk menentukan pembuatan tabel, dan kadang-kadang tabel terlihat lebih baik tanpanya.

Border tabel ini lebarnya 1 piksel.

Border tabel ini lebarnya 5 piksel.

Nilai defaultnya adalah 0 (tanpa garis tepi).

Border adalah sebuah atribut dari tag table. Sintaks penulisannya yaitu:

<table border=X> dengan X adalah ukuran border dalam piksel.

Dalam tabel, juga dapat ditentukan warna border, meskipun hanya berlaku dalam Internet Explorer. Sintaksnya:

Perlu dicatat bahwa menentukan warna border menggunakan HTML tidak dianjurkan - jauh lebih baik menggunakan CSS untuk hal ini.

Panjang dan lebar

Sebuah tabel, secara default, akan menjadi sebesar data yang dimasukkan di dalamnya.

Kita dapar mengubah panjang / tinggi dan lebar keseluruhan dari tabel untuk menjadikan ukuran yang kita inginkan.

Dimungkinkan untuk memberikan ukuran dengan piksel absolut, atau dengan persentase relatif dari ukuran layar.

Sintaksnya adalah: <table height=??? width=???> dengan ??? adalah ukuran dalam piksel atau persentase.