BAB II
FORMAT TABEL PADA HALAMAN WEB
Pada kali ini kita akan berbagi ilmu tentang format tabel pada halaman web.
KOMPETENSI INTI
3. Memahami, menerapkan, menganalisis,
dan mengevaluasi tentang pengetahuan faktual, konseptual, operasional dasar,
dan metakognitif sesuai dengan bidang dan lingkup kerja Rekayasa Perangkat
Lunak pada tingkat teknis, spesifik, detail, dan kompleks, berkenaan dengan
ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam konteks
pengembangan potensi diri sebagai bagian dari keluarga, sekolah, dunia kerja,
warga masyarakat nasional, regional, dan internasional.
4. Melaksanakan tugas spesifik dengan
menggunakan alat, informasi, dan prosedur kerja yang lazim dilakukan serta
memecahkan masalah sesuai dengan bidang kerja Rekayasa Perangkat Lunak.
Menampilkan kinerja di bawah bimbingan dengan mutu dan kuantitas yang terukur
sesuai dengan standar kompetensi kerja. Menunjukkan keterampilan menalar,
mengolah, dan menyaji secara efektif, kreatif, produktif, kritis, mandiri,
kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait dengan
pengembangan dari yang dipelajarinya di sekolah, serta mampu melaksanakan tugas
spesifik di bawah pengawasan langsung. Menunjukkan keterampilan mempersepsi,
kesiapan, meniru, membiasakan, gerak mahir, menjadikan gerak alami dala ranah
konkret terkait dengan pengembangan dari yang dipelajarinya di sekolah serta
mampu melaksanakan tugas spesifik di bawah pengawasan langsung.
KOMPETENSI DASAR
3. 3
Menerapkan format tabel pada halaman web
4. 3
Membuat kode html untuk menampilkan tabel pada halaman web
APERSEPSI
HTML menyediakan banyak tag lain
untuk merancang tabel yang lebih rumit. Untuk halaman web yang panjang, kadang
perlu diberi komentar mengenai fungsi
dan tujuan Anda membuatnya. Oleh sebab itu, mempelajari tag HTML yang
sering digunakan dalam pembuatan halaman web menjadi suatu keharusan bagi
seorang web programmer. Sebelum standar CSS diimplementasikan ke dalam semua
browser pada sekitar tahun 2000-an, kebanyakan programmer dan desainer web
menggunakan tabel untuk mengatur tampilan web. Membuat menu ada di atas dan Sisi
kanan web bisa diakali dengan menjadikan halaman web sebagai sebuah tabel yang
besar.
Sumber: https://www.computerhope.com/jargon/h/html-tag.gif
MENGAMATI
Pelajarilah buku teks maupun sumber lain tentang format tabel
dan format multimedia pada halaman web dengan baik dan benar!
AYO PAHAMI
Dalam menampilkan
data yang terstruktur atau tampilan dari database, umumnya akan dibuat dalam
bentuk tabel. HTML juga menyediakan tabel tag yang digunakan untuk menampilkan
data dalam bentuk tabel. Hal ini dikarenakan menggunakan CSS untuk mengatur
tampilan halaman web sangat dianjurkan.
1.
Tag-Tag Tabel
dalam HTML
Tabel
diterjemahkan sebagai cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk tabel pada
HTML, digunakan Tag <Table>. Untuk membuat tabel di HTML minimal
membutuhkan 3 tag utama sebagai berikut.
Bentuk langsung penggunaan
kode HTML pada tag <table> dapat dilihat sebagai berikut.
<!DOCTYPE
html>
<html>
<head>
<title>IMPLEMENTASI
TAG TABEL</title>
</head>
<body>
<h1>BELAJAR TAG TABEL</h1>
<table
border="1">
<tr>
<td>Baris 1, Kolom
1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom
3</td>
<td>Baris 1, Kolom
4</td>
<td>Baris 1, Kolom
5</td>
</tr>
<tr>
<td>Baris 2, Kolom
1</td>
<td>Baris 2, Kolom
2</td>
<td>Baris 2, Kolom
3</td>
<td>Baris 2, Kolom
4</td>
<td>Baris 2, Kolom
5</td>
</tr>
<tr>
<td>Baris 3, Kolom
1</td>
<td>Baris 3, Kolom
2</td>
<td>Baris 3, Kolom
3</td>
<td>Baris 3, Kolom
4</td>
<td>Baris 3, Kolom
5</td>
</tr>
<tr>
<td>Baris 4, Kolom
1</td>
<td>Baris 4, Kolom
2</td>
<td>Baris 4, Kolom
3</td>
<td>Baris 4, Kolom
4</td>
<td>Baris 4, Kolom
5</td>
</tr>
</table>
</body>
</html>
Berikut hasilnya.
Pada tag <table> secara otomatis akan memberikan
atribut border yang digunakan untuk memberikan nilai garis tepi dari tabel.
Nilai tersebut menggunakan ukuran pixel. Misalnya, border=”1” berarti
menginstruksikan kepada web browser bahwa tabel tersebut akan memiliki garis
tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak
memiliki garis tepi.
2.
Elemen Table
Tbody, Thead, Tfoot, Tr, Th, dan Td
Secara
mendasar, elemen table memiliki atribut, seperti align, bgcolor, border,
cellpadding (jarak antara tepi sel dengan isi sel), cellspacing (jarak antara
sel), width (lebar tabel), dan height (tinggi tabel). Elemen table berisikan
elemen caption, TH, TR, dan TD. Elemen jenis ini berfungsi untuk membuat suatu
data multidimensi yang terdiri atas kolom dan baris. Baris-baris yang ada pada
tabel dapat dibagi menjadi tabel thead, tabel tfoot, dan tabel tbody yang
dinyatakan dengan elemen thead, tfoot, dan tbody. Setiap thead, tfoot, dan
tbody berisi grup baris dan masing—masing grup paling sedikit berisi satu baris
yang didefinisikan dengan elemen <tr>.
a.
Elemen Tbody,
Thead, dan Tfoot
Penggunaan ketiga elemen tersebut akan membantu dalam
mengatur tabel yang sesuai keinginan dengan menggunakan CSS style dan tidak
akan berpengaruh pada layout sebuah tabel. Elemen <thead>, <tfoot>,
dan <tbody> akan sangat berguna dalam penulisan sebuah tabel yang
panjang, lebar, dan lebih dari satu halaman yang masing-masing halaman tersebut, tabel head dan foot—nya
tertulis juga.
1)
Elemen Tbody
Dalam
penggunaannya, elemen <tbody> digunakan secara bersama-sama dengan elemen
<thead> yang menunjukkan bagian atas (kepala) tabel dan <tfoot>
yang menunjukkan bagian bawah (kaki) sebuah tabel. Elemen tbody digunakan untuk
mengelompokkan konten atau isi yang terletak pada bagian tengah (tubuh) sebuah
tabel. Tag <tbody> harus disertakan, kecuali tabel hanya berisi satu
tabel body dan tidak memiliki tabel head/tabel foot. Pada HTML5 tidak terdapat
atribut khusus yang dapat digunakan
untuk elemen <tbody>, sedangkan pada HTML4.01 terdapat beberapa
atribut, yaitu align, bgcolor, char, charoff, dan valign.
2)
Elemen Thead
Elemen
<thead> digunakan secara bersama-sama dengan elemen <tbody> yang
menunjukkan isi tabel dan <tfoot> yang menunjukkan bagian bawah (kaki) sebuah
tabel. Elemen thead digunakan untuk mengelompokkan isi atau konten yang berada
di bagian atas (kepala) pada sebuah tabel. Tag <thead> ditulis sebagai
anak elemen dari elemen <table>
yang artinya terletak di dalam elemen <table> setelah elemen <caption>
dan <colgroup> atau sebelum <tfoot>, <tbody>, dan <tr>.
Pada HTML5 tidak terdapat atribut khusus yang
dapat digunakan untuk elemen <thead> sedangkan pada HTML4.01
terdapat beberapa atribut, yaitu align, bgcolor, char, charoff, dan valign.
3)
Elemen Tfoot
Element
tfoot digunakan untuk mengelompokkan isi atau konten yang berada di bagian
bawah (kaki) sebuah tabel. Dalam penggunaannya, elemen <tfoot> digunakan
secara bersama-sama dengan elemen <tbody> yang menunjukkan isi tabel dan
<thead> yang menunjukkan bagian atas (kepala) sebuah tabel. Tag pembuka
<tfoot> disertakan jika tabel tfoot ada dan tag penutup <tfoot>
dapat diabaikan. Sementara itu, pada HTML5 tidak terdapat atribut khusus yang
dapat digunakan untuk elemen <tfoot>, sedangkan pada HTML 4.01 terdapat
beberapa atribut, yaitu align, bgcolor, char,
charoff, dan valign.
4)
Implementasi
Elemen Tbody, Thead, Tfoot
Hal yang
perlu dipahami adalah thead, tbody, dan tfoot berisi jumlah kolom yang sama.
Meskipun meletakkan elemen tfoot di paling depan (sesudah tag pembuka
<table>), browser akan melakukan eksekusi dan hasilnya berada di paling
bawah karena fungsi dari elemen tfoot digunakan mengelompokkan isi sel atau
konten di bagian bawah tabel. Hal yang sama pada elemen thead yang
mengelompokkan isi sel di awal (kepala) tabel dan elemen tbody di tengah tabel
meskipun diletakkan pada lokasi yang berbeda-beda.
b.
Elemen TR (Table
Row)
Pada elemen TR, terdapat elemen TH dan TD dengan
atribut yang terdapat pada elemen jenis berupa align, valign (posisi vertikal),
dan bgcolor. Elemen TR mendefinisikan baris pada tabel dan elemen ini harus
berada di dalam elemen TABLE. Sintaks yang digunakan sebagai berikut.
<tr
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color">
....................................
</tr>
c.
Elemen TH (Table
Header) dan TD (Table Data)
Atribut kedua elemen ini adalah align, valign, bgcolor, colspan, dan
rowspan. Elemen TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi
sel sebagai header sel pada kolom tabel dengan data tercetak tebal dan dengan
posisi di tengah sel. Elemen TH dan TD ini harus terletak di dalam elemen TR.
Sintaks yang digunakan sebagai berikut.
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
....................................
</th>
<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
....................................
</td>
3.
Cellpadding
Penggunaan
atribut cellpadding hanya didukung oleh HTML4.01, namun tidak didukung oleh
HTML5. Atribut cellpadding digunakan untuk menentukan jarak spasi di dalam sel,
yaitu di antara dinding sel dan isi sel. Berikut ini penulisan kode HTML
atribut cellpadding.
<table cellpadding=”pixel”>
Nilai dari atribut
cellpadding dalam menentukan spasi di dalam sel adalah pixel. Perhatikan kode
penulisan dan penggunaan cellpadding di HTML sebagai berikut.
<!DOCTYPE
html>
<html>
<head>
<title>
Penggunaan Atribut Cellpadding di HTML
</title>
</head>
<body>
<table
border="2" cellpadding="5">
<tr>
<th
width="50">No</th>
<th>NIS</th>
<th>Nama</th>
</tr>
<tr>
<td
align="center">1</td>
<td>20180401</td>
<td>Naufal Fadhil</td>
</tr>
<tr>
<td
align="center">2</td>
<td>20180402</td>
<td>Abishar Thoriq</td>
</tr>
</table>
</body>
</html>
Setelah kode HTML
di atas dijalankan pada browser, akan tampil gambar sebagai berikut
4.
Cellspacing
Atribut
cellspacing digunakan untuk menentukan jarak spasi antarsel. Sama halnya dengan
atribut cellpadding, atribut cellspacing juga tidak didukung oleh HTML5. Nilai
dari atribut cellspacing dalam menentukan spasi di dalanı sel adalah pixel.
Berikut ini bentuk penulisan atribut cellspacing di HTML.
<table
cellspacing=”pixel”>
Berikut
ini bentuk kode penulisan dan penggunaan cellspacing di HTML.
<!DOCTYPE
html>
<html>
<head>
<title>Penggunaan Atribut
Cellspacing di HTML</title>
</head>
<body>
<table
border="2" cellspacing="5">
<tr>
<th
width="50">No</th>
<th>NIS</th>
<th>Nama</th>
</tr>
<tr>
<td
align="center">1</td>
<td>20180401</td>
<td>Naufal Fadhil</td>
</tr>
<tr>
<td
align="center">2</td>
<td>20180402</td>
<td>Abishar Thoriq</td>
</tr>
</table>
</body>
</html>
Setelah kode HTML
di atas dijalankan pada browser, akan tampil gambar sebagai berikut
5.
Border
Atribut
border digunakan untuk membuat bingkai pada tabel dengan menentukan tebal
bingkai tersebut. Berikut ini bentuk kode penulisan dan penggunaan atribut
border di HTML.
<!DOCTYPE html>
<html>
<head>
<title>
Penggunaan Border pada Tabel
di HTML
</title>
</head>
<body>
<table border="4">
<tr>
<th>No</th>
<th>NIS</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>100021874</td>
<td>Naufal</dh>
</tr>
<tr>
<td>2</td>
<td>100231874</td>
<td>Rere</dh>
</tr>
</table>
</body>
</html>
Setelah kode HTML di atas dijalankan di browser, akan
tampil gambar sebagai berikut.
Atribut border tidak didukung oleh HTML5. Oleh sebab
itu, digunakan CSS sebagai gantinya. Berikut ini bentuk kode penulisan dan
penggunaan atribut border di CSS.
<!DOCTYPE
html>
<html>
<head>
<title>Penggunaan Border di CSS
pada Tabel di HTML</title>
<style type="text/css">
table,th,td{
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table
border="4">
<tr>
<th>No</th>
<th>NIS</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>100021874</td>
<td>Naufal</dh>
</tr>
<tr>
<td>2</td>
<td>100231874</td>
<td>Rere</dh>
</tr>
</table>
</body>
</html>
Pada
kode di atas terdapat penggunaan properti border-collapse. Properti tersebut
jika diberi nilai "collapse" akan membuat bingkai tunggal dan akan
tampak seperti gambar di atas.
6.
Rowspan dan
Colspan
Mayoritas
browser, seperti Firefox, Chrome, Opera, Safari, dan Internet Explorer
mendukung penggunaan colspan dan rowspan. Colspan dan rowspan juga didukung
oleh HTML5. Merge cell adalah suatu metode menggabungkan beberapa sel menjadi satu
dalam sebuah tabel Penggunaan merge cell sangat dibutuhkan dalam penyusunan
informasi dalam tabel yang membutuhkan penggabungan beberapa sel menjadi satu.
HTML menyediakan atribut khusus untuk merge cell, yaitu rowspan dan colspan.
Penggunaan atribut colspan dan rowspan diterapkan pada tag dan tag <th>. Colspan berarti
penggabungan beberapa kolom sel menjadi satu sel, sedangkan rowspan berarti
penggabungan beberapa baris sel menjadi satu baris sel.
a.
Kode Penulisan Colspan
Penulisan sintaks colspan: <td colspan=”number”>
Penulisan sintaks rowspan: <td rowspan=”number”>
Nilai "number" pada colspan dan rowspan
menunjukkan jumlah kolom ataupun baris yang akan digabungkan menjadi satu.
Berikut ini bentuk kode penulisan dan penggunaan colspan di HTML.
<!DOCTYPE
html>
<html>
<head>
<title>Penggunaan Colspan pada
Tabel di HTML</title>
</head>
<body>
<table
border="1">
<tr>
<th
colspan="3">DATA</th>
</tr>
<tr>
<td>No</td>
<td>NIS</td>
<td>NAMA</dh>
</tr>
<tr>
<td>1</td>
<td>100021874</td>
<td>Naufal</dh>
</tr>
<tr>
<td>2</td>
<td>100231874</td>
<td>Rere</dh>
</tr>
</table>
</body>
</html>
b.
Kode Penulisan Rowspan
Berikut ini bentuk kode penulisan dan
penggunaan rowspan di HTML.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Rowspan pada Tabel di
HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Hobi</th>
</tr>
<tr>
<td
rowspan="2">1</td>
<td
rowspan="2">Naufal</td>
<td>Soping</td>
</tr>
<tr>
<td>Jalan-jalan</td>
</tr>
</table>
</body>
</html>
Pada baris kedua yang berisi data untuk
"No" dan "Nama" diterapkan rowspan yang menggabungkan dua
baris, yaitu baris kedua dan ketiga pada kolom satu dan dua. Berikut ini bentuk
kode penulisan serta penggunaan colspan dan rowspan dengan menggunakan CSS.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan
Colspan dan Rowspan pada Tabel di HTML</title>
<style
type="text/css">
table,
th, td {
border:
1px solid black;
border-collapse:
collapse; }
table{
width: 30%;}
th,
td{ text-align: center; }
</style>
</head>
<body>
<table>
<tr>
<th
rowspan="2">No</th>
<th
rowspan="2">NIS</th>
<th
rowspan="2">Nama</th>
<th
colspan="3">Absensi</th>
</tr>
<tr>
<td>Hadir</td>
<td>Sakit</td>
<td>Izin</dh>
</tr>
<tr>
<td>1</td>
<td>100021874</td>
<td>Naufal</dh>
<td>20</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>100231874</td>
<td>Rere</dh>
<td>18</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
Setelah kode HTML di atas dijalankan di
browser, akan tampil seperti gambar berikut.
Terlihat pada gambar di atas, pada baris
pertama sel "No", "NIM" dan "Nama" diterapkan
rowspan="2" untuk mengabungkan baris pertama dan kedua. Selanjutnya,
pada baris per-tama sel "Absensl" diterapkan colspan="3"
sehingga bisa menggabungkan tiga kolom menjadi satu.
MENANYA
Masing-masing siswa membuat beberapa
pertanyaan tentang Elemen Table Tbody, Thead, Tfoot, Tr, Th, dan Td yang kurang
dimengerti kemudian saling tukar dengan teman sebangku. Mintalah mereka untuk
menjawabnya. Apabila mengalami kesulitan bertanyalah pada guru!
Assessmen
!
Klik Link Berikut Ini
.png)
Tidak ada komentar:
Posting Komentar
Thank you for visiting Edu High School. This comment is an Auto Answer from our system please wait if your comment needs to be replied to urgently.
Greetings from us Edu High School.