Bagaimana caranya membuat Table pada HTML

bagaimana caranya membuat table pada html

Bagaimana caranya membuat Table pada HTML ?. Pertama kita pahami lebih dulu apa yang dimaksud Table ini. Table umumnya digunakan dalam hal menampilkan data, agar lebih terstruktur dan juga rapih. Namun, jangan gunakan table dalam hal pembuatan layout website, DOSA JUGA…!!!.

Untuk membuat Table pada HTML, maka tag yang digunakan adalah tag <table>. Dilanjutkan dengan menambahkan tag <tr> (Table Row) yang mendefinisikan baris dan tag <td> (Table Data) yang mendefinisikan data / kolom.

Berikut contoh kode sumbernya :

Dan di bawah ini adalah hasil dari kode sumber di atas :

membuat table pada website

Terdapat beberapa atribut yang sering digunakan dalam pembuatan Table, yakni…

Nama Atribut Kegunaan
Border Memberi batasan pada table.
Cellpadding Mengatur jarak padding elemen terhadap border.
Cellspacing Mengatur jarak spasi border dalam terhadap border luar.
Width Mengatur lebar table
Rules Mengatur pembuatan garis pada table
Bgcolor Memberi warna pada background table
Height Mengatur tinggi table
Bordercolor Memberi warna pada border table

Dalam pembuatan table juga terdapat beberapa tag dasar, seperti :

Nama Tag Keterangan
<table> Digunakan untuk membuat table.
<thead> Digunakan untuk membuat grup heading pada table
<th> Digunakan untuk membuat sel pada table heading.
<tbody> Digunakan untuk membuat group body/isi table.
<tr> Digunakan untuk membuat baris table.
<td> Digunakan untuk membuat kolom table atau mendefinisikan sel pada table.
<tfoot> Digunakan untuk mendefinisikan grup kaki/bagian bawah table.
<caption> Digunakan untuk membuat judul table.
<colgroup> Digunakan untuk membuat sebuah grup kolom pada table.
<col> Digunakan untuk mendefinisikan kolom – kolom (kolom individu) pada grup kolom.

Pembagian Struktur Tabel

Dalam pembagian struktur Table ini, dibagi menjadi 3 struktur, yakni :

  1. Bagian Kepala <thead>. Ingin kalian letakan di manapun, tag ini akan selalu berada di atas.
  2. Bagian Badan <tbody>.
  3. Bagian Kaki <tfoot>. Ingin anda letakan dimanapun, tag ini akan selalu berada di bawah.

Dan di bawah ini adalah hasil dari kode sumber di atas :

mendesain struktur table

 Penggabungan Sel Tabel (Colspan dan Rowspan)

Dalam pembuatan table ini anda juga dapat menggabungkan beberapa baris dan juga beberapa kolom.

Penggabungan Baris (Rowspan).

Baris pada Table dapat disatukan, misal 3 baris yang disatukan hanya menjadi 1 baris.

Dan di bawah ini adalah hasil dari kode sumber di atas :

rowspan pada table

Penggabungan Kolom (Colspan).

Tidak hanya Baris, beberapa Kolom pun juga dapat disatukan menjadi 1 Kolom.

Dan di bawah ini adalah hasil dari kode sumber di atas :

rowspan pada table

Apabila anda masih bingung dalam hal pengkalkulasian Colspan dan Rowspan ini, simak pembahasan di bawah ini…

Colspan adalah penggabungan kolom, dan akan mengisi kolom yang kosong disebelahnya. Apabila jumlah lebih, akan melewati batas table, sehingga table pun akan tidak rapih.

Rowspan adalah penggabungan baris, akan mengisi baris kosong disebelahnya. Apabila jumlah baris lebih, akan melewati batas table, sehingga table pun akan tidak rapih.

Dalam contoh di bawah ini, saya akan memasukan 3 baris dan 4 kolom. Karena seandainya saya masukan sama (4 baris & 4 kolom), table akan berantakan. Seperti inilah cara kerja Rowspan dan Colspan, menempati cell yang kosong.

membuat colspan pada table

Baris E menerapkan rowspan=”2”, karena itu menggabungkan 2 baris yakni…

  • Baris yang terisi oleh F,G,H. dan Baris yang terisi I.

Lalu Kolom I, menerapkan colspan=”3”, karena itu menggabungkan 3 kolom yakni…

  • Kolom F, G, H atau kolom B,C,D.

Untuk memahaminya cobalah untuk mengulang materi dan mempraktekannya, karena pembelajaran yang baik adalah terus mengulang.

Mengatur Lebar dan Tinggi Tabel

Dalam mengatur lebar dan tinggi table dapat digunakan atribut width dan height, namun dalam tutorial ini penulis mendefinisikan dengan property dari CSS.

Nilai satuan yang diberikan dapat berupa nilai persen (%) atau pixel (px), pada nilai persen ukuran dapat berubah tegantung ukuran layar browser apakah diperbesar atau diperkecil, sedangkan pada nilai satuan px, ukuran tidak akan berubah alias tetap mesikpun layar browser diperbesar/diperkecil.

Output…

mengatur ukuran table

Table dengan Border

Untuk memberikan border atau garis tepi pada table, akan lebih baik jika menggunakan CSS.

Akan rapi apabila border ditampilkan dalam 1 border tunggal, hal ini dapat dilakukan menggunakan properti border-collapse : collapse dari CSS.

Table border biasa…

Dan di bawah ini adalah hasilnya :

mendesain border pada table

Table collapse dengan border berwarna…

Dan di bawah ini adalah hasilnya :

memberi warna pada table

Dalam hal mendesain border tabel dengan rapih, sertakan gunakan table, dan cell table untuk menjadi selector id-nya. Perhatikan pada kode CSS dalam kode sumber di atas, dimana yang saya jadikan selector adalah table, tr, dan td.

Membuat Grup Kolom pada Table

Untuk membuat grup kolom pada Table dapat digunakan tag <colgroup> dan tag <col>, dan dengan begini pula, anda dapat mendesainnya dengan mudah.

Tag <colgroup> digunakan untuk membuat kelompoknya atau grupnya…

Sedangkan Tag <col> digunakan untuk membuat kolomnya.

Namun sayangnya, Tag – tag ini sudah tidak di dukung lagi dalam HTML5.

Dan di bawah ini adalah hasilnya :

membuat grup kolom pada table

Memberikan Judul pada Table

Kalian dapat memberikan judul pada Table yang kalian buat dengan menggunakan tag <caption>. Secara default Tag ini akan berada di atas table dan posisinya berada di tengah – tengah table, namun kalian dapat merubah format defaultnya dengan menggunakan CSS.

Dan di bawah ini adalah hasilnya :

membuat caption pada table

Kalian dapat mengatur penempatan judulnya dengan atribut “align”.

Leave a comment

Your email address will not be published. Required fields are marked *

7 thoughts on “Bagaimana caranya membuat Table pada HTML”

  • Avatar
  • Avatar
  • Avatar
X