3 Cara Membuat Table (Tabel) Pada HTML

Cara Membuat Table (Tabel) Pada HTML

Tabel digunakan untuk membuat layout website karena dapat menampilkan informasi dengan bentuk ringkas, mudah dibaca dan tampilan yang lebih rapi dan teratur. Tapi sekarang ini tabel jarang digunakan karena ukuran file yang besar sehingga mempengaruhi waktu load website.

Cara membuat tabel

Untuk membuat tabel ada 3 tag yang sangat penting yaitu, table, tr (table row), td (table data).

Tag <table> berfungsi untuk membuat tabel, kemudian di bawahnya ada tag <tr> berfungsi untuk membuat baris tabel, dan tag <td> untuk membuat kolom tabel.

Berikut contoh tabel dengan 2 baris dan 2 kolom :

Atribut border ="1" adalh untuk membuat tebal bingkai tabel.

Cara mengatur ukuran tinggi dan lebar tabel

Untuk mengatur lebar tabel digunakan atribut Width dan utnuk tinggi digunakan atribut Heihgt.

Berikut ini adalah tabel dengan border = 1, lebar 300 pixel, dan tinggi baris pertama 50 pixel.

Satuan Widht dan Height dapat kita gunakan satuan pixel atau %. Pengaturan lebar dan tinggi pada kolom hanya kita atur pada <td> yang pertama, dan kolom berikutnya secara otomatis akan mengikuti.

Cara menggabungkan kolom tabel

Baris dan kolom tabel dapat kita gabungkan sesuai kebutuhan.

Untuk mengganbungkan kolom digunakan atribut colspan, berikut contohnya :

Untuk menggabungkan baris digunakan atribut rowspan

Cara membuat title tabel

Untuk membuat title atau judul tabel digunakan atribut <caption> setelah tag <table>, dan untuk membuat tabel heading digunakan atribut <th>.

Cara membuat background tabel

Untuk memberi background warna pada tabel digunakan atribut Style --> Background.

Berikut adalah contoh tabel dengan background warna biru muda dan heading warna biru tua.

Untuk menghilangkan menhilangkan border tabel agar terlihat lebih bagus maka kita harus memberi nilai border = 0 di dalanm tag <table>.

Semoga artikel ini bermanfaat.

Komentar →