Tabel
merupakan cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table
pada HTML, digunakan Tag<Table>.
Elemen table berisi property <tr> untuk menentukan baris (table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table (table data).
Struktur elemen table adalah sebagai berikut:
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
</tr>
</table>
Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag <th> ….. </th>
Atribut Elemen Tabel
Width = panjang(lebar table, pixel atau persen)
Height = panjang(tinggi table, pixel atau persen)
Border = pixel(tebal garis tepi)
Cellspacing = pixel(spasi antar sel)
Cellpadding = pixel(spasi di dalam sel)
Align = [left|center|right](perataan table)
Bgcolor = warna(warna latar belakang table)
Atribut Table Row
Align =[left|center|right](perataan sebaris sel secara horizontal)
Valign =[top|middle|bottom](perataaan sebaris sel secara vertical)
Bgcolor=warna(warna latar belakang baris)
Bgcolor=warna(warna latar belakang baris)
Atribut Tabel Data
Align = [left|center|right](perataan horizontal)
Width = [top|middle|bottom](perataan vertical)
Height = pixel(tinggi sel, pixel atau persen)
Bgcolor = warna(warna latar belakang sel)
Bgcolor = warna(warna latar belakang sel)
Tugas
01:tabel1.html
Salin script HTML berikut untuk mencoba tag table berikut property kolom dan barisnya, jangan lupa disimpan dengan ekstensi .html.kemudian coba di web browser.
01:tabel1.html
Salin script HTML berikut untuk mencoba tag table berikut property kolom dan barisnya, jangan lupa disimpan dengan ekstensi .html.kemudian coba di web browser.
<html>
<head>
<title>tabel</title>
</head>
<body>
berikut contoh tabel dengan rowspan dan colspan
<table width="80%" border="2" cellspacing="0" cellpadding="0">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan="2">baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan="2">baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table>
</body>
</html>
02: tabel2.html
<html>
<head>
<tittle>penggunaan ALIGN</tittle>
</head>
<body>
<table border="1">
<caption>Daftar wiraniaga</caption>
<tr>
<th colspan ="2" rowspan = "2">WIRANIAGA</th>
<th colspan ="3">KOTA</th>
</tr>
<tr>
<th>SEMARANG</th>
<th>Kudus</th>
<th>Solo</th>
</tr>
<tr>
<th rowspan ="2">Jenis Kelamin</th>
<th>Pria</th>
<td align= "right">30</td>
<td align= "right">20</td>
<td align= "right">30</td>
</tr>
<tr>
<th>wanita</th>
<td align= "right">20</td>
<td align= "right">8</td>
<td align= "right">18</td>
</tr>
</table>
</body>
</html>
03: tabel3.html
Buatlah
dokumen HTML sehingga menghasilkan tampilan tabel seperti berikut ini
(aturlah sedemikian rupa pada atribut-atribut tabel untuk mendapatkan
dua buah tampilan yang berbeda, sebagaimana dibawah ini).
Tabel 1
Tabel 2
No comments:
Post a Comment