Membuat Tabel Pada HTML

Cara membuat table pada HTML

A. Pendahuluan

Kali ini saya akan memberi tahu tentang cara pembuatan table pada HTML yang saya pelajari kali ini. Langsung saja materi mengenai table.

1. Pengertian :

Table merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom.

2. Latar Belakang dan Batasan Permasalahan

Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag <table>. Elemen table berisi property <tr> untuk menentukan baris(table row> yang di dalamnya terdapat property <td> untuk dapat menampakan data pada setiap sel table(table data).

Contoh :

<html>

<head>

<title>TABEL</title>

</head>

<body>

<table>

<tr>

<td>data baris 1 kolom 1</td>

<td>data baris 1 kolom 2</td>

</tr>

</table>

</body>

</html>

Anda coba terlebih dahulu, maka hasilnya akan seperti ini :

Untuk mendefinisikan table heading atau judul tiap kolom menggunakan tag <th>…</th>

Atribut Elemen Tabel :

Width = panjang(lebar table, pixel atau persen)

Height = panjang(tinggi table, pixel atau persen)

Border = pixel(tebal garis tepi)

Cellspacing = pixel(spasi antar sel)

Cellpadding = pixel(spasi di dalam sel)

Align = [left|center|right](perataan table)

Bgcolor = warna(warna latar belakang table)

Atribut Tabel Row

Align =[left|center|right](perataan sebaris sel secara horizontal)

Valign =[top|middle|bottom](perataaan sebaris sel secara vertical)

Bgcolor =warna(warna latar belakang baris)

Atribut Table Data

Align =[left|center|right](perataan horizontal)

Width =[top|middle|bottom](perataan vertical)

Height =pixel(tinggi sel, pixel atau persen)

Bgcolor =warna(warna latar belakang sel)

Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Berikut contoh table yang menggabungkan baris :

Benua	Negara
ASIA	Arab Saudi
	India
	Indonesia
	Singapura

Berikut ini contoh table yang menggabungkan kolom :

Benua	EROPA
Negara	Belanda	Italia	Inggris	Jerman

Untuk membuat table di atas, maka Tabel atribut data yang digunakan adalah sebagai berikut :

Rowspan =angka(baris yang di span oleh sel)

Colspan =angka(kolom yang di span oleh sel

Untuk menggabungkan 4 baris seperti table di atas adalah :

Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah :

Contoh yang menggabungkan baris :

Hasilnya :

Contoh yang menggabungkan kolom :

Hasilnya :

3. Maksud dan Tujuan

Untuk mengatur teks ataupun gambar dalam baris dan kolom, menggunakan pemformatan Tabel

Tag Utana untuk table adalah :

Tag	Fungsi
<table> ……. </table>	Mendefinisikan Tabel
<tr> … </tr>	Mendefinisikan table row atau baris
<td> … </td>	Data pada table/sel
<th> … </th>	Mendefinisikan table heading atau judul tiap kolom