Tutorial Cara Membuat Tabel Pada HTML Dengan Mudah

untuk menampilkan data yang terstruktur serta rapih dengan tampilan List

untuk menampilkan data yang terstruktur serta rapih dengan tampilan List (daftar) biasanya digunakan sebuah Tabel. di HTML sudah menyediakan Tag Tabel yang tentunya untuk membuat tampilan Tabel Pada HTML.

nah pada kesempatan kali ini Freak Programmer akan menjelaskan Bagaimana Cara Membuat Tabel Pada HTML. untuk membuatnya kalian bisa menggunakan teks editor kesukaan kalian, atau kalian bisa melihat di artikel saya sebelumnya yaitu Teks Editor Pilihan Programmer.

Tutorial Tabel HTML

langsung kepada Tutorial cara membuatnya, disini saya akan membuat tabel HTML Sederhana. script tabel ini tidak menggunakan CSS, melainkan hanya menggunakan Tag <Tabel> yang sudah ada pada HTML.

sebelumnya kalian harus mengetahui terlebih dahulu Basic Tag Tabel, agar nantinya kalian bisa mengerti pada saat proses pembuatan.

Atribut Pada Tag Tabel HTML


1. Mendefinisikan Tabel
<table border=”n” cellpadding=”n” cellspacing=”n“>
………
</table>
Keterangan:
Border = garis pada tabel; memilikinilai n=0, 1, 2 dst
Cellpadding = spasi antar sel dan border
Cellspacing = jarak antar sel

2. Memberi Judul Tabel
defaultnya posisi judul berada di tengah pada bagian atas Tabel
<caption align=”…”> … </caption>

3. Membuat Sebuah Baris

<tr align=”…”>… </tr>

4. Mendefinisikan Sel Header

<th> … </th>

5. Mendefiniskan Sebuah Sel Data
<td> … </td>

Attribute:
Align = {left | center | right } alignment horizontal untuk sel
Valign = {top | middle | bottom } alignment vertical dalam sel
Colspan = "n"  menggabungkan beberapa kolom
Rowspan = "n"  menggabungkan beberapa baris

secara default. tampilan tabel berada di sebelah kiri layar monitor. namun bisa di atur menggunakan perintah <div align="..."> di atas tag <tabel>.

setelah kalian sudah memahami Basic Tag HTML di atas, sekarang kita akan coba Cara Membuat Tabel di HTML.

Contoh Tabel HTML

untuk mencobanya silahkan copy script dibawah ini, dan pastekan pada Editor Teks kesayangan kalian. entah itu note pad ++ atau yang lainnya. disini saya menggunakan Sublime Text.

<html>
<head>
<title>Penggunaan Tabel Dalam HTML</title>
</head>
<body>
<table border="1" width="70%" >
<caption>BIODATA SISWA</caption>
<tr>
<th width="15%">Nama</th>
<th width="16%">Alamat</th>
<th width="9%" align="center">Telepon</th>
</tr>
<tr>
 <td width="15%" rowspan="3">Angga Kusuma</td>
 <td width="16%" rowspan="3">&nbsp;Jl. Karbela 2,
 Jakarta</td>
 <td width="13%" align="center">021 - 55667788</td>
</tr>
<tr>
 <td width="13%" align="center">08131445689</td>
</tr>
<tr>
 <td width="13%" align="center">021 - 56788901</td>
</tr>

<tr>
<td width="15%" rowspan="3">Wirastuti Wiraguna</td>
<td width="16%" rowspan="3">&nbsp;Jl. Permata&nbsp; 5,
Jakarta</td>
<td width="13%" align="center">021 - 76456982</td>
</tr>
<tr>
<td width="13%" align="center">08183457298</td>
</tr>
<tr>
<td width="13%" align="center">021 - 66543881</td>
</tr>
</table>
</body>
</html>

pada contoh source code di atas, akan menampilkan tampilan sebagai berikut:
Tutorial Cara Membuat Tabel Pada HTML Dengan Mudah
disini saya memberikan contoh atribute Rowspan, yaitu untuk mengabungkan beberapa baris. lihat pada bagian "Nama" dan "Alamat", disitu saya menambahkan rowspan="3". yang artinya mengabungkan 3 baris menjadi 1 baris saja. 

mungkin itu saja pembahasan saya pada kesempatan kali ini mengenai Cara Membuat Tabel HTML. pada kesempatan lainnya saya akan coba membahas mengenai Membuat Tabel HTML dengan CSS. Terimakasih :)

You might also like

0 Comments

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & P*RN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon