wajib online
- Dalam sebuah tampilan web anda pasti mengenal yang namanya tabel.
Tabel memiliki peranan penting dalam desain bentuk tampilan sebuah web,
tabel juga mempermudah kita dalam mengatur tata letak suatu objek pada
website. Dalam posting mengenai pembuatan
web sederhana bagian 4 ini kita akan belajar membuat tabel untuk
tampilan web kita. Dalam membuat tabel format yang kita gunakan adalah
<table></table> . Dan dibawah ini merupakan daftar kode html
yang bisa kita gunakan.
Width = digunakan untuk mengatur lebar tabel (satuan yang digunakan % atau pixel)
Height = dapat digunakan untuk mengatur tinggi tabel
Border = sebagai penentu tebal bingkai
Bg color = sebagai penentu warna background tabel
Align = meletakkan text secara horizontal atau mendatar
Valign = untuk meletakkan text secara vertical
Name = digunakan sebagai penentu nama tabel
Cell padding = digunakan untuk menetukan jarak padding antar cell
Cell spacing = digunakan untuk menentukan jarak spasi antar cell
Style = digunakan untuk memasukkan CSS
Border color = digunakan untuk menentukan warna bingkai
Colspan = digunakan untuk mengurangi jumlah kolom
Rowspan = digunakan untuk mengurangi jumlah baris
Sedangkan
dalam pembuatan tabel, tag gunakan gunakan adalah tag
<tr></tr> untuk membuat baris dan tag <td></td>
untuk membuat kolom serta ada tag <th></th> bisa digunakan
untuk membuat header pada tabel.
Sedang atribut tag yang digunakan untuk tag <tr></tr>, <td></td> dan <th></th> adalah
Height
Bg color
Align
Back ground
Valign
Colspan
Rowpan
Berikut contoh cara membuat tabel
1. Buka notepad anda
2. Tulis tag dibawah ini
<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<h2>Jumlah Penumpang kendaraan umum</h2>
<table border="1" style="border-collapse: collapse" width="100%">
<tr bgcolor="#cccccc">
<th>Nama kendaraan</th><th>Kapasitas muatan</th><th>Jumlah kendaraan</th>
<th>Total </th>
</tr>
<tr align="center">
<td>mini bus</td><td>10 orang</td><td>3</td><td>30 orang</td>
</tr>
<tr align="center">
<td>bus kota</td><td>30 orang</td><td>5</td><td>150 orang</td>
</tr>
<tr align="center">
<td>bus way</td><td>60 orang</td><td>4</td><td>240 orang</td>
</tr>
<tr align="center">
<td colspan="3">TOTAL SEMUA>>> </td><td><b>420 orang</b></td>
</tr>
</table>
</body>
</html>
3. Simpan notepad, pada kotak save as type, pilih ‘all type’
4. Kemudian
buka file tadi melalui browser internet ( mozila, internet explorer
atau google chrome) “dan terlihat seperti gambar dibawah ini”
( bentuk tabel web sederhana kita)
Posting Komentar