Bacalah pengantar tentang membuat tabel dalam HTML berikut, kerjakan latihan soalnya dan buat kesimpulan dari praktikum yang Anda kerjakan.
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris.
Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi beberapa baris
(dengan tag <tr>), dan setiap baris dibagi menjadi beberapa kolom (dengan tag
<td>). Td kependekan dari "table data" yang berarti tempat menyimpan data (data
cell). Sebuah cell data dapat berupa teks, image, list, paragraf, form, tabel,dll.
Contoh : table.html
<html>
<body>
<p><strong>
Satu Kolom:</strong></p>
<table border="1">
<tr>
<td>500</td>
</tr>
</table>
<h4>Satu baris dan lima kolom:</h4>
<table border="1">
<tr>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>4000</td>
<td>5000</td>
</tr>
</table>
<h4>Dua baris dan lima kolom :</h4>
<table border="1">
<tr>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>5000</td>
<td>6000</td>
</tr>
<tr>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
</tr>
</table>
</body>
</html>
Tebal border tabel didefinisikan dengan tag border, letak posisi tabel didefinisikan dengan tag align, warna background tabel didefinisikan dengan tag bgcolor
Contoh : tableborder.html
<html><title>Border Tabel</title> <body>
<h4>border normal, letak di tengah:</h4>
<table border="1" align="center">
<tr>
<td>Baris Pertama - Kolom Pertama </td>
<td>Baris Pertama - Kolom Kedua </td>
</tr>
<tr>
<td>Baris Kedua - Kolom Pertama </td>
<td>Baris Kedua - Kolom Kedua </td>
</tr>
</table>
<h4>border lebih tebal, letah di tengah, lebar tabel 90%:</h4>
<table border="8" align="center" width="90%">
<tr>
<td>Baris Pertama - Kolom Pertama </td>
<td>Baris Pertama - Kolom Kedua</td>
</tr>
<tr>
<td>Baris Kedua - Kolom Pertama</td>
<td>Baris Kedua - Kolom Kedua </td>
</tr>
</table>
<h4>border sangat tebal, letak di tengah, lebar tabel 90%, warna background = #FFDFAA: </h4>
<table width="90%" border="15" align="center" bgcolor="#FFDFAA">
<tr>
<td>Baris Pertama - Kolom Pertama </td>
<td>Baris Pertama - Kolom Kedua</td>
</tr>
<tr>
<td>Baris Kedua - Kolom Pertama</td>
<td>Baris Kedua - Kolom Kedua </td>
</tr>
</table>
</body>
</html>
EMPTY CELL
berikut ini contoh penggunaan cell yang kosong pada tabel, untuk membuat cell yang kosong digunakan entitas
contoh : emptycell.html
<html><title>Empty Cell</title>
<body>
<table border="1">
<tr>
<td>Tulisan Teks </td>
<td>Tulisan Teks</td>
</tr>
<tr>
<td></td>
<td>Tulisan Teks</td>
</tr>
<tr>
<td> </td>
<td>Tulisan Teks</td>
</tr>
</table>
<p>Jika suatu tabel tidak ada data, maka akan dianggap
tidak ada border seperti terlihat pada baris kedua - kolom
pertama. Untuk mengatasinya bisa dengan trik memberikan
spasi, yaitu dengan teks di kode "&nbsp;".
</p>
</body>
</html>
0 komentar:
Post a Comment