Pembuatan Tabel (HTML 5)


www.rizkyramadhansttg.wordpress.com
rizky_ramadhan7@yahoo.co.id


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

Tampilan Source7.htm

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: