STRUKTUR TABEL HTML
BAB 3 : STRUKTUR TABEL
HTML
A.
Elemen Dasar Tabel
Cara mendeskripsikan tabel dalam pemrograman web berbasis HTML
menggunakan syntax adalah sebagai berikut.
<table>
<!-- isi baris dan kolom
-->
</table>
Selanjutnya anda dapat menambahkan baris baru di antara tag
<table>....</table> dengan script berikut.
<table>
<tr>
<!-- isi baris ke 1 -->
</tr>
<tr>
<!—isi baris ke 2 -->
</tr>
</table>
Script program yang lengkap adalah sebagai berikut.
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Elemen-elemen yang ada
|
Nama
|
Fungsi
|
|
<table>...</table>
|
Untuk
mendeskripsikan tabel dalam halaman web
|
|
<tr>...</tr>
|
Untuk
mendeskripsikan baris dalam tabel
|
|
<td>...</td>
|
Untuk
mendeskripsikan kolom dalam tabel
|
B.
Atribut Border
Semakin besar nilai border, maka semakin tebal garis yang ditampilkan
pada halaman web. Jika atribut border semakin besar, lebar garis tabel juga
semakin besar. Besaran nilai atribut tabel dihitung dalam ukuran pixel.
C.
Elemen Header
Untuk mendeklarasi header pada tabel, anda perlu menambahkan elemen tag
<th> pada bagian awal script dan </th> pada bagian akhir script.
Kelebiahan penggunaan header pada tabel adalah teks yang diletakkan pada tabel
header secara otomatis berada pada posisi tengah (center) tanpa haraus
menambahkan atribut align=”center”. Anda dapat menerapkan atribut scope dan
headers untuk menghubungkan kolom atau baris dalam cell. Atribut scope dapat
diisi dengan nilai col, colgroup, row, dan rowgroup. Atribut headers pada
elemen header tabel akan menerima nilai berupa id dari cell untuk merujuk
kaitan antar-header sumber tabel.
D.
Elemen Caption
Anda dapat menggunakan tag <caption>....</caption> dengan
penulisan tag diletakkan setelah tag awal <table> dengan posisi default caption
berada diatas tabel.
E.
Atribut Cellpadding dan Cellspacing
Atribut cellpadding berfungsi untuk mengatur jarak dari border sisi dalam
tabel dengan isi teks tabel dalam cell. Nilai dari atribut ini berupa angka
dalam satuan pixel. Jika nilai cellpadding=”3”,
web browser akan menampilkan tabel dengan jarak sebesar 3 pixel dari border sisi dalam tabel dengan isi teks tabel.
Atribut cellspacing berfungsi untuk mengatur jarak antara border bagian
dalam dan luar. Semakin tinggi nilai atribut
cellspacing, maka semakin besar lebar jarak antara border bagian dalam
dengan border bagian luar. Sebagai contoh, jika anda memberikan nilai cellspacing=”2”, web browser akan
menampilkan jarak sebesar 2 pixel
diantara garis border tabel.
F.
Menggabungkan Cell
1. Colspan
Digunakan untuk
menyatukan satu atau lebih cell berdasarkan kolom.
2. Rowspan
Digunakan untuk
menyatukan satu atau lebih cell berdasarkan baris.
G.
Mengatur Brackground
Langkah-langkah menerapkan background gambar pada tabel adalah sebagai
berikut
1. Buatlah folder BG pada direktori C
(C:\BG)
2. Persiapkan gambar yang akan dijadikan
background sebuah tabel, baik dalam format .jpg, .jpeg, atau .bmp. letakkan
file gambar tersebut kedalam folder BG dalam satu folder dengan file html yang
akan dibuat.
3. Selanjutnya, buat file “gambar html”
dan tulis kode berikut
<!--file
studikasus3-9.html-->
<html>
<head>
<title>Background
Gambar pada Tabel</title>
</head>
<table
align=”center” width=”30%” border=”1” background=”foto.jpg”>
<tr>
<th>NIS</th><!--Header tabel-->
<th>NAMA</th><!--Header tabel-->
</tr>
<tr>
<td align=”center”>112019188</td>
<td align=”center”>Dyah Pradipta</td>
</tr>
</table>
</body>
</html>
Atibut background gambar
pada tabel ditunjukan pada potongan kode program background=”foto.jpg” pada script <table align=”center”
width=”30%” border=”1” background=”foto.jpg”>. Untuk membuat latar belakang
tabel denganwarna tertentu, perlu ditambahkan atribut bgcolor=”#FFFF33”, denga bgcolor sebagai atribut untuk mengatur
warna tabel.
H.
Atribut Align
Ada 3 align
1. Left = untuk meletakkan isi cell pada
sisi sebelah kiri cell
2. Center = untuk meletakkan isi cell
pada posisi tengah cell
3. Right = untuk meletakkan isi cell
pada sisi sebelah kanan cell
I.
Meletakkan Tabel di Dalam Tabel
Dengan menggunakan tabel, anda dapat menentukan struktur utama sebuah
web, mulai dari heading halaman web, body halaman web, footing sebuah halaman
web.
J.
Atribut frame
Digunakan untuk mengatur jenis border luar pada tabel. Ada beberapa nilai
yang digunakan pada atribut frame, antara lain:
1. Above
2. Bellow
3. Border
4. Box
5. Hsides
6. Lhs
7. Rhs
8. Void, dan
9. Vsides
Terima Kasih Artikel-nya bang. Terus Posting terus ya gan... Oh ya, Pernekalkan nama saya Muhamad Asfarezhan NIM 1922500056, Saya Mahasiswa dari kampus STMIK ATMA LUHUR pangkalpinang. Bila ingin liat - liat tentang kampus ku silahkan kunjungin https://www.atmaluhur.ac.id
BalasHapusTerima Kasih