Cara Membuat Tabel di Website (HTML)Melanjutkan dari postingan sebelumnya yaitu Sintak Dasar HTML sekarang kita menginjak ke Cara Membuat Table di Website (HTML), langsung saja ya ke pembahasan.
Tabel
merupakan cara untuk menampilkan informasi dalam bentuk sel yang ringkas dan
mudah dibaca yang terdiri atas baris dan kolom. Untuk menampilkan tabel pada
HTML, yaitu dengan cara menuliskan tag <table> diawal dan di tutup dengan
tag </table>. Sedangkan elemen-elemen
tabel diisikan dengan properti
<tr>…</tr> (table row) berfungsi untuk menentukan baris dan
didalamnya lagi terdapat properti <td>…</td> (table data) yang
berfungsi untuk menampilkan data pada setiap sel tabel dan ada lagi <th>…</th>
(table header) yang berfungsi untuk menampilkan judul table. Struktur lengkap
dari elemen tabel adalah sebagai berikut:
1. Atribut Elemen Table
width
= panjang ( lebar tabel, pixel atau persen )
height = panjang ( tinggi tabel,
pixel atau persen)
border = pixel ( tebal garis tepi
)
cellspacing = pixel ( spasi antar
sel )
cellpadding = pixel ( spasi di dalam
)
align = [ left | center | right ] (
perataan tabel)
bgcolor = warna ( warna latar
belakang tabel)
2. Atribut Table Row
align = [left| center|right]
(perataan sebaris sel secara horizontal)
valign = [top|middle|bottom]
(perataan sebaris sel secara vertical)
bgcolor = warna ( warna latar
belakang baris)
3. Atribut Table Data
rowspan = angka (baris yang di span
oleh sel)
colspan = angka (kolom yang di span
oleh sel)
align = [ left | center | right ] (
perataan horizontal)
valign = [top | middle | bottom ]
(perataan vertical)
width = pixel ( lebar sel, pixel
atau persen )
height = panjang ( tinggi sel, pixel
atau persen)
bgcolor = warna ( warna latar
belakang sel)
Contohnya
Colspan :
<html>
<head>
<title>
Perfoematted Text</title>
</head>
<body
bgcolor="#00FFFF" >
<p>
<table
border="1" cellpadding="5" cellspacing="5"
width="20%">
<tr>
<th colspan="2">Colspan</th>
</tr>
<tr>
<td width="10%">Baris 1 Colom
1</td>
<td width="10%">Baris 1 Colom
2</td>
</tr>
<tr>
<td width="10%">Baris 2 Colom
1</td>
<td width="10%">Baris 2 Colom
2</td>
</tr>
</table>
</p>
</body>
</html>
Hasilnya
seperti ini :
Gambar : contoh table memakai colspan
Contohnya
Rowspan :
<html>
<head>
<title>
Perfoematted Text</title>
</head>
<body
bgcolor="#00FFFF" >
<p>
<table border="1"
cellpadding="5" cellspacing="5" width="20%">
<tr>
<th rowspan="2">Rowspan</th>
<td>Baris 1 Colom 2
</tr>
<tr>
<td>Baris 2 Colom 2</td>
</tr>
</table>
</p>
</body>
</html>
Hasilnya
seperti ini :
Gamber : contoh table memakai rowspan
Sekian dulu pembahasan tabel di HTML, materi tentang HTML selanjutnya insa'allah akan kita lanjutkan lagi di waktu dan postingan yang berbeda, terimakasih atas kunjungannya, semoga dapat bermanfa'at amin amin amin ya Robbal'alamin
0 komentar:
Posting Komentar