TABEL SEDERHANA HTML

Setelah sudah melewati beberapa tahapan dalam belajar html, belajar kali ini adalah tentang bagaimana cara membuat tabel sederhana. Kenapa saya katakan sederhana? karena cukup banyaknya atribut yang dapat digunakan dalam membuat tabel, dan juga karena keterbatasan yang ada( praktek dengan ponsel=>operamini mod)
, maka disini saya hanya akan menjelaskan sedikit dasar-dasarnya saja untuk membuat tabel secara sederhana.
Untuk membuat table dalam HTML, diperlukan beberapa tag yang digunakan secara bersamaan sesuai dengan fungsinya, yaitu:

<table>

Untuk mendefinisikan sebuah tabel

<tr>

Untuk mendefinisikan baris pada tabel

<td>

Untuk mendefinisikan sel pada tabel

Dari ketiga tag tersebut, untuk memaksimalkan tampilan tabel, tentunya masing-masing dapat diberikan dengan berbagai atribut.

Oleh karena panjangnya tulisan yang harus saya ketik jika harus sekaligus saya menjelaskanya, maka untuk sekedar menghindari kejenuhan, saya akan menjelaskanya satu per satu pada tiap tag.

Tag <table>.
Atribut yang digunakan antara lain:

border.

Ukuran untuk mengatur garis tepi, nilainya adalah 0, 1 (standar), 2, 3,..dst.

width.

Untuk menentukan lebar tabel. Nilainya adalah satuan dalam piksel (px), atau persen (%).

cellpadding.

Untuk mengatur jarak antara dinding sel dengan konten. Satuan nilainya adalah piksel (px) ataupun persen (%)

cellspacing

Untuk mengatur jarak antar sel. Satuan nilainya adalah piksel (px) ataupun persen (%)

bgcolor.

Untuk menentukan warna background. Nilainya adalah nama warna ataupun dengan menggunakan kode warna. Silahkan untuk melihat terlebih dahulu beberapa contoh warna dan kodenya.

Mulai dengan contoh.

Contoh Pertama Dengan border:

Jika ditulis:

<table border="1">
<tr><td>
Tabel Border 1 piksel </td></tr>
</table>

Hasilnya adalah:

Tabel Border 1 piksel

Atau jika ditulis:

<table border="5px">
<tr><td>
Tabel Border 5 piksel </td></tr>
</table>

Hasilnya adalah:

Tabel Border 5 piksel

Perhatikan perbedaan kedua contoh diatas

Contoh 2 dengan width:

Jika ditulis:

<table border="1" width="350px">
<tr><td>
Lebar Tabel 350px </td></tr>
</table>

Hasilnya adalah:

Lebar Tabel 350px

Atau jika ditulis:

<table border="1" width="85%">
<tr><td>
Lebar Tabel 85% </td></tr>
</table>

Hasilnya adalah:

Lebar Tabel 85%

Perhatikan perbedaan kedua contoh diatas

Catatan:

Jika persen (%) digunakan, perhitunganya adalah berdasarkan lebar dari elemen bagian (divisi) terkait, dalam suatu halaman web

Contoh 3 dengan cellpadding

Jika ditulis:

<table border="1" width="350px" cellpadding="10px">
<tr><td>
Jarak sel=>isi 10piksel </td></tr>
</table>

Hasilnya:

Jarak sel=>isi 10px

Atau jika ditulis:

<table border="1" width="350px" cellpadding="20px">
<tr><td>
Jarak sel=>isi 10piksel </td></tr>
</table>

Hasilnya:

Jarak sel=>isi 20piksel

Perhatikan perbedaan kedua contoh diatas

Contoh 4 dengan cellspacing:
Atribut ini sangat diperlukan untuk tabel yang terdiri lebih dari satu sel.
Contoh berikut adalah sekaligus bagaimana membuat tabel lebih dari 1 sel.

Jika ditulis:

<table border="1" width="100%" cellpadding="10px" cellspacing="5px">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
<td>Sel 3</td>
<td>Sel 4</td>
<td>Sel 5</td>
</tr>
</table>

Hasilnya:

SEL 1

SEL 2

SEL 3

SEL 4

SEL 5

Atau jika ditulis:

<table border="1" width="375px" cellpadding="10px" cellspacing="15px">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
<td>Sel 3</td>
<td>Sel 4</td>
<td>Sel 5</td>
</tr>
</table>

Hasilnya:

SEL 1

SEL 2

SEL 3

SEL 4

SEL 5

Perhatikan perbedaan kedua contoh diatas

Contoh 5 dengan bgcolor

Jika ditulis:

<table border="1" width="350px" bgcolor="red">
<tr><td> background warna merah</td></tr></table>

Hasilnya adalah:

Background warna merah

Harap dimaklumi jika ada bahasa yang salah, saran dan kritiknya diharapkan.

Sebelumnya | Berikutnya

Silahkan baca juga yang ini:

---