Tabel (table)
sangatdiperlukanketikakitainginmenampilkan data yang
berbentukkolom-kolom.Dulusebelumadanya CSS, table digunakanuntukmembuat layout
website namunsaatinisudahjarangdipakaisebagai layout karenafaktor file yang
cenderunglebihbesarsehinggamempengaruhiwaktuakses yang lebih lama,
dalampengelolaandanpengeditan pun jauhlebihrumitkarenabanyaknya tag-tag yang
dihasilkan.
Cara membuattabel.
Untukmembuat table yang sederhanaada 3
elemenutamayaitu table, tr dan td. Tag
<table>adalahuntukmembuattabelkemudian di ikutidengan tag <tr>
(table rows) adalahuntukmembuatbarispadatabelkemudian tag <td> (table
data) adalahuntukmembuatkolompadatabel, kolom-kolomhasildaritrdan td
inidisebutdengan table cell yaitusebagailokasidimanakitamemasukkan
data-data yang akan di tampilkan.
Hasil:
Cell 1 – Baris 1 Kolom 1
|
Cell 2 – Baris 1 Kolom 2
|
Cell 3 – Baris 2 Kolom 1
|
Cell 4 – Baris 2 Kolom 2
|
Cell 5 – Baris 3 Kolom 1
|
Cell 6 – Baris 3 Kolom 2
|
Dalamcontohsengajaditambahdenganatribut
border agar kitadapatmelihatposisidaritabeltersebut, karenasecara default
nilaidari border iniadalah 0 jikatidakdisertakandengan tag <table>.
Mengaturlebardantinggitabel.
Untukmengaturlebar
table digunakanatribut width ataubisajugadengan style CSS denganproperti
width.Untuklebardantinggidari td kitagunakanatribut style denganproperti width
dan height.
Berikutadalahcontohtabeldenganlebar
75% darilebardokumendanlebarkolommasing 50% dengantinggipadabarispertamaadalah
40px.
Hasil:
Baris 1 Kolom 1
|
Baris 1 Kolom 1
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Baris 3 Kolom 1
|
Baris 3 Kolom 2
|
Untuksatuanukuranwidhtdan
height dariatributmaupun style tersebutkitadapatmenggunakanpxatau %.
Untukpengaturanlebardantinggipada td kitacukupmemasukkanpadakolompertamasecaraotomatiskolom-kolomberikutnyaakanmengikutipengaturantersebut.
Menggabungkankolompadatabel
Table Cell
ataubarisdankolomdaritabeltersebutdapatkitagabungkansesuaikebutuhanbentuktabel
yang diinginkan.
Untukmenggabungkankolomdalamtabeldigunakanatribut colspan.
Hasil:
GabunganKolom 1&2 padaBaris 1
|
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Baris 3 Kolom 1
|
Baris 3 Kolom 2
|
Sedangkanuntukmenggabungkanbarisdalamtabeldigunakanatribut rowspan.
Hasil:
GabunganBaris 1&2 padaKolom 1
|
Baris 1 Kolom 2
|
Baris 2 Kolom 2
|
|
Baris 3 Kolom 1
|
Baris 3 Kolom 2
|
Mengaturjarakkolompadatabel
Untukmengaturposisi
cell dalamtabeldigunakanatributcellpaddingdancellspacing.
Cellpadding adalahuntukpengaturansisidaribagiandalam
cell.
Hasil:
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Sedangkan Cellspacing adalahpengaturansisidaribagianluar
cell.
Hasil:
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Membuattitelpadatabel.
Untuktabel yang lengkapdengantitel, kitabisamenambahkan
tag <caption> tepatsetelah tag
<table>dankitajugabisamengganti td dengan th (table heading)sebagaititeldaribarismaupunkolom.
Caption
dan akan secara otomatis berada pada posisi tengah dan akan menghasilkan tulisan tebal.
Hasil:
Disiniadalahtiteltabelini
|
|
Header Kolom 1
|
Header Kolom 2
|
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Membuat background padatabel
Untukmembuat
background padatabelkitagunakanatribut style denganproperti background.
Berikutadalahcontoh
table dengan background warnakuningmudadengan heading warnamerah.
Hasil:
Header
Kolom 1
|
Header
Kolom 2
|
Baris
1 Kolom 1
|
Baris
1 Kolom 2
|
Baris
2 Kolom 1
|
Baris
2 Kolom 2
|
Sepertikitalihatbahwa
border dari cell tersebutterlihatterlalutebalpadahalkitamembuatnilaidariatribut
border adalah 1px.
Initerjadikarenasecara
default atributcellpaddingdancellspacingpadaelemen table
memilikinilaimasing-masing 1px.
Jadiuntukmenghilangkannyakitaharusmemasukkankeduaatributtersebutdengannilai
0.
Ataukitajugabisamenggunakan
style CSS yaitudenganpropertiborder-collapse:collapse.
Hasil:
Header
Kolom 1
|
|
Baris
1 Kolom 1
|
Baris
1 Kolom 2
|
Baris
2 Kolom 1
|
Baris
2 Kolom 2
|