» » » Cara Membuat Tabel Sederhana Pada HTML

Cara Membuat Tabel Sederhana Pada HTML

,

RPL-SATU.com - Di postingan sebelumnya, kita udah kenalan sama HTML. Kalo kamu belum kenalan, bisa kenalan DISINI. Pada kesempatan kali ini, kita akan membuat tabel sederhana dari HTML. Tapi sebelum kita masuk ke step-step pembuatannya, kita pelajari dulu apa itu tabel.

Tabel merupakan cara untuk menampilkan  informasi dalam bentuk sel yang terdiri atas baris dan kolom.
Untuk menampilkan dalam bentuk tabel  pada HTML, kita gunakan tag <table> ... </table>. Elemen tabel itu berisi seperti <tr> ... </tr> untuk menentukan baris ( tabel row ), yang didalamnya terdapat tag <td> ... </td> untuk menampilkan data pada setiap sel tabel ( tabel data ).

Di dalam tabel, terdapat banyak sekali atribut. Seperti:

1. Atribut Elemen Tabel

  • width          : Lebar tabel
  • height         : Tinggi tabel
  • border         : Tebal garis tepi
  • cellspacing  : Jarak antar sel
  • cellpading   : Jarak di dalam sel
  • align            : Perataan tabel
  • bgcolor        : Warna latar belakang tabel

2. Atribut Tabel Row

  • align           : Perataan sel secara horizontal ( left, center, right )
  • valign         : Perataan sel secara vertikal ( top, middle, bottom )
  • bgcolor       : Warna latar belakang baris

3. Atribut Tabel Data

  • rowspan      : Baris yang di span oleh sel
  • colspan       : Kolom yang di span oleh sel
  • align            : Perataan sel secara horizontal ( left, center, right )
  • valign          : Perataan sel secara vertikal ( top, middle, bottom )
  • width           : Lebar sel
  • height          : Tinggi sel
  • bgcolor        : Warna latar belakang sel

Itu adalah beberapa atribut dari tabel. Sekarang kita masuk ke pembuatan tabel sederhana nya. Kurang lebih strukturnya seperti ini:

<!DOCTYPE html>

<head>

<title> Latihan Tabel </title>

</head>

<body>

<table width ="500" border="1">

<tr>

<td> baris 1 kolom 1 </td>

<td> baris 1 kolom 2 </td>

<td> baris 1 kolom 3 </td>

</tr>

<tr>

<td> baris 2 kolom 1 </td>

<td> baris 2 kolom 2 </td>

<td> baris 2 kolom 3 </td>

</tr>

<tr>

<td> baris 3 kolom 1 </td>

<td> baris 3 kolom 2 </td>

<td> baris 3 kolom 3 </td>

</tr>

</table>
</body>
<html>
Kurang lebih begitu struktur buat tabel sederhana pada HTML. Kamu bisa mencoba tabel sederhana ini menggunakan Notepad++ atau aplikasi editor lainnya, asal jangan editor gambar aja yaa.

Mungkin segitu aja cara pembuatan tabel sederhana pada HTML nya. Untuk cara menambahkan atribut-atribut lainnya, kita bisa coba di lain waktu. Semoga bermanfaat. Keep on Coding! :)

Share this with short URL: Get Short URLloading short url