Tabel
Dalam pembuatan homepage, table memiliki fungsi yang tidak kalah penting dengan tag - tag HTML lainnya. Pertama, table berfungsi untuk menampilkan informasi - informasi secara terstruktur, ringkas dan mudah dibaca. Kedua, table juga berfungsi untuk mengatur tampilan homepage agar lebih menarik.Tabel 1.4 Tag - tag utama untuk pembuatah table
| Tag | Keterangan |
| TR | Table Row, memiliki tag awal <TR> dan tag akhir </TR> berfungsi untuk menyatakan suatu baris di dalam table. Posisi default teks di kiri. |
| TD | Table Data, memiliki tag awal <TD> dan tag akhir </TD> berfungsi untuk menyatakan data/isi dari table. Posisi default teks di kiri. |
| TH | Table Header, memiliki tag awal <TH> dan tag akhir </TH> berfungsi untuk memberi judul baris/kolom dalam suatu table. Ditampilkan dalam bentuk cetakan tebal dan posisi default teks ditengah. |
Atribut sederhana yang sering digunakan adalah BORDER yang berfungsi memberikan tampilan border (garis pembatas di sekeliling table) pada table dengan nilai berupa angka yang menunjukkan ketebalan border.
Mengatur posisi teks dalam Tabel dan menentukan Posisi table
Untuk melakukan penataan teks secara horizontal yang berada dalam table digunakan atibut ALIGN, dimana atribut ini digunakan pada tag TR, TD, dan TH. Align ada 3 yaitu left, center, dan Right.
Menentukan Lebar dan tinggi Tabel/set
Untuk menentukan lebar table maupun lebar sel/kolom table, digunakan atribut WIDTH yang memiliki nilai berupa angka tanpa satuan (nilai itu adalah pixel) atau dengan persentase (persen dari layar browser atau lebar table induknya). Sedangkan untuk menentukan table/sel digunakan atribut HEIGHT.
Praktikum
Buka notepad dan ketikkan program berikut
Program mengatur Posisi Teks dan table serta mengatur lebar Sel/tabel
<html>
<head>
<title>Mengatur posisi teks dalam tabel</title>
</head>
<body>
<table border ="10" align="right">
<tr>
<th>Nomor</th>
<th width ="150">Nama</th>
<th>Alamat</th>
</tr>
<tr>
<tr align="right">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<tr align="center">
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</body>
</html>
Save dengan nama Source6.htm dan buka dengan browser untuk melihat hasilnya.
Menggabungkan Sel
Untuk menggabungkan sel digunakan atribut ROWSPAN dan COLSPAN dengan nilai berupa angka tanpa satuan yang menyatakan berapa jumlah sel yang digabungkan. Kedua atribut itu digunakan pada tag sel yaitu <TH> dan <TD>. Contoh : Rowspan="2" berarti menggabungkan sel tersebut kea rah horizontal (baris) dengan tinggi 2 baris sel. Colspan="3" berarti menggabungkan sel tersebut ke arah vertical (kolom) dengan lebar kolom sel.
Buat program berikut di Notepad.
<HTML>
<head>
<title>Menggabungkan sel</title>
</head>
<body>
<table border="1" width="100%">
<caption>
<font size="5">
Setelah memakai ROWSPAN dan COLSPAN, beberapa sel digabung
</font>
</caption>
<tr>
<th width="20%" ROWSPAN="2">
Baris 1 dan 2 digabung
</th>
<th width="10%">2</th>
<th width="10%">3</th>
<th width="10%">4</th>
</tr>
<tr>
<th colspan="3">
Kolom 2,3,4 digabung
</th>
</tr>
</table>
</body>
</HTML>
Simpan dengan nama Source7.htm dengan memilih type All Files dan bukalah dengan browser.
Tampilan Source6.htm
Artikel Terkait:
Like dan Berikan Komentar
