Assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan menjelaskan tentang penggunaan format baris dan kolom tabel pada file HTML.
Memformat baris
Seperti yang sudah dijelaskan pada postingan sebelumnya tentang pembuatan tabel, salah satu elemen pendukung tabel pada dokumen HTML adalah table row. Untuk memudahkan kita sebut saja sebagai baris (row). Setiap tabel pasti terdiri atas baris – baris yang diwakili dengan tag <TR>.
Di Bawah ini adalah Jenis – Jenis Atribut pada Tag <TR>
Align :Mengatur rataan (horizontal)
Terdapat 3 (tiga) pilihan : left, center, atau right
Bgcolor :Mengatur warna yang dijadikan background
Bordercolor :Mengatur warna border
Height :Mengatur tinggi baris
Valign :Mengatur rataan (vertikal)
Terdapat 3 (tiga) pilihan : top, middle, bottom
Terdapat 3 (tiga) pilihan : left, center, atau right
Bgcolor :Mengatur warna yang dijadikan background
Bordercolor :Mengatur warna border
Height :Mengatur tinggi baris
Valign :Mengatur rataan (vertikal)
Terdapat 3 (tiga) pilihan : top, middle, bottom
Memformat Kolom
Elemen pada tabel yang digunakan sebagai tempat untuk menuliskan informasi yang nantinya akan ditampilkan di web browser adalah table data. Untuk selanjutnya kita akan menyebut bagian ini sebagai kolom. Kolom dalam dokumen HTML diwakili oleh tag <TD>.
Di Bawah ini adalah Jenis – Jenis Atribut pada Tag <TD>
Align :Mengatur rataan (horizontal)
Terdapat 3 (tiga) pilihan : left, center, atau right
Background :Menambahkan image sebagai background kolom
Bgcolor :Mengatur warna yang dijadikan background
Bordercolor :Mengatur warna border
Colspan :Menggabungkan kolom
Height :Mengatur tinggi kolom
Rowspan :Menggabungkan baris
Valign :Mengatur rataan (vertikal)
Terdapat 3 (tiga) pilihan : top, middle, bottom
Width :Mengatur lebar kolom
Terdapat 3 (tiga) pilihan : left, center, atau right
Background :Menambahkan image sebagai background kolom
Bgcolor :Mengatur warna yang dijadikan background
Bordercolor :Mengatur warna border
Colspan :Menggabungkan kolom
Height :Mengatur tinggi kolom
Rowspan :Menggabungkan baris
Valign :Mengatur rataan (vertikal)
Terdapat 3 (tiga) pilihan : top, middle, bottom
Width :Mengatur lebar kolom
Sebagai contoh, buatlah file html dengan script sebagai berikut:
<html>
<head>
<title>html format baris dan kolom</title>
</head>
<body>
<h3>html format baris dan kolom</h3>
<hr>
<table border="8" cellspacing="3" cellpadding="5">
<caption>
<h3>Daftar Order Barang</h3>
</caption>
<tr>
<th>No
<th>Barang
<th>Jenis
<th>Harga
<th>Jumlah
<th>Total Harga
<tr>
<td>1
<td>pocary sweat
<td rowspan="2">minuman
<td>Rp 4.000
<td>5
<td>Rp 20.000
<tr>
<td>2
<td>nutri sari jus jeruk
<td>Rp 2.000
<td>5
<td>Rp 10.000
<tr>
<td>3
<td>kacang kulit garuda
<td rowspan="3">makanan
<td>Rp 10.000
<td>2
<td>Rp 20.000
<tr>
<td>4
<td>tango cokelat
<td>Rp 3.000
<td>5
<td>Rp 15.000
<tr>
<td>5
<td>snack ringan
<td>Rp 5.000
<td>2
<td>Rp 10.000
<tr>
<td colspan="5" bgcolor="red"><b>TOTAL</b>
<td bgcolor="green"><b>Rp 75.000</b>
</table>
</body>
</html>
<head>
<title>html format baris dan kolom</title>
</head>
<body>
<h3>html format baris dan kolom</h3>
<hr>
<table border="8" cellspacing="3" cellpadding="5">
<caption>
<h3>Daftar Order Barang</h3>
</caption>
<tr>
<th>No
<th>Barang
<th>Jenis
<th>Harga
<th>Jumlah
<th>Total Harga
<tr>
<td>1
<td>pocary sweat
<td rowspan="2">minuman
<td>Rp 4.000
<td>5
<td>Rp 20.000
<tr>
<td>2
<td>nutri sari jus jeruk
<td>Rp 2.000
<td>5
<td>Rp 10.000
<tr>
<td>3
<td>kacang kulit garuda
<td rowspan="3">makanan
<td>Rp 10.000
<td>2
<td>Rp 20.000
<tr>
<td>4
<td>tango cokelat
<td>Rp 3.000
<td>5
<td>Rp 15.000
<tr>
<td>5
<td>snack ringan
<td>Rp 5.000
<td>2
<td>Rp 10.000
<tr>
<td colspan="5" bgcolor="red"><b>TOTAL</b>
<td bgcolor="green"><b>Rp 75.000</b>
</table>
</body>
</html>
Bukalah file tersebut pada browser, dan hasilnya adalah sebagai berikut:
Demikianlah sedikit penjelasan tentang bagaimana memformat baris dan kolom tabel pada file HTML. Semoga bermanfaat, Salam sukses...
Demikianlah sedikit penjelasan tentang bagaimana memformat baris dan kolom tabel pada file HTML. Semoga bermanfaat, Salam sukses...
0 comments: