Membuat Tabel Dengan HTML

HTML (Hypertext Markup Language) merupakan standard bahasa pemrograman yang digunakan untuk menampilkan dokumen/ laman web. Banyak program HTML editor yang bisa kita gunakan untuk membuat dokumen HTML, diantaranya adalah  Ms. FrontPage, Dreamweaver, Notepad dll. Beberapa fungsi dari HTML, yaitu :

  • Mengontrol tampilan  web page dan isinya.
  • Mempublikasikan dokumen secara online sehingga bisa diakses oleh orang lain di seluruh dunia.
  • Membuat online form yang bisa di gunakan untuk menangani pendaftaran dan transaksi secara online.
  • Menambahkan object-object seperti gambar, audio (suara), video dan juga java applet dalam dokumen HTML.

Setelah kalian membaca uraian di atas, sekarang kita masuk ke pokok pembahasan yaitu Membuat Tabel Dengan HTML. Tabel ini bisa kita terapkan pada template atau laman postingan web/ blog.

Membuat Table

Tag <TABLE> atau <table> digunakan untuk membuat tabel dalam dokumen HTML. Bagian pokok dari tabel adalah cell yang didefinisikan dengan menggunakan tag <TD>. Contoh serderhana pembuatan tabel dengan 1 cell (kolom) :

Belajar Membuat Tabel

Table dengan satu cell

Penulisannya adalah :

<html>
<head>
<title>Belajar Membuat Tabel</title>
</head>
<body>
<table border="1">
<td>Table dengan satu cell</td>
</table>
</body>
</html>

Anda bisa menambahkan beberapa cell seperti ini :

Belajar Membuat Tabel

cell 1 cell 2 cell 3 cell 4

Penulisannya adalah :

<html>
<head>
<title>Belajar Membuat Tabel</title>
</head>
<body>
<table border="1">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</table>
</body>
</html>

Kalau anda ingin membuat beberapa baris cell dalam tabel,  gunakan tag <tr>. Dan jangan lupa tutup dengan tag </tr>.

Belajar Membuat Tabel

cell 1a cell 1b cell 1c
cell 2a cell 2b cell 2c

Penulisannya adalah :

<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr>
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
</table>
</body>
</html>

Untuk menentukan perataan tekt di dalam tabel,  anda bisa gunakan attribute Align dan Valign (Vertical Alignment).

Pemformatan Tabel

Attribute Value
Align Left, Right, Center, Justify
Valign Baseline, Top, Bottom, Middle

Merge cell

Tag <td> memiliki atribut colspan untuk merge column (kolom) dan rowspan untuk merge baris.

Contoh:

Belajar Membuat Tabel

Januari Februari
1 2 3 4 1 2 3 4
10.000 50.000 20.000 15.000 25.000 15.000 20.000 15.000
50.000 5.000 25.000 10.000 20.000 30.000 20.000 15.000

Penulisannya adalah :

<table border="1" cellpadding="0" width="62%" align="center">
<tbody>
<tr>
<td colspan="4" align="center"><strong>Januari</strong></td>
<td colspan="4" align="center"><strong>Februari</strong></td>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>10.000</td>
<td>50.000</td>
<td>20.000</td>
<td>15.000</td>
<td>25.000</td>
<td>15.000</td>
<td>20.000</td>
<td>15.000</td>
</tr>
<tr>
<td>50.000</td>
<td>5.000</td>
<td>25.000</td>
<td>10.000</td>
<td>20.000</td>
<td>30.000</td>
<td>20.000</td>
<td>15.000</td>
</tr>
</tbody>
</table>

Keterangan :

Attribute cellspacing untuk memberi spasi antar sel dan cellpadding untuk spasi dari border ke text dalam cell.

Sampai disini pembahasan kita, semoga bermanfaat…. jangan lupa beri komentar ya !!!

4 Responses to Membuat Tabel Dengan HTML

  1. thank youu gannn .. lagi dilema div or table

  2. afzan says:

    terima kasih ganmm:-D

  3. FISMA Edumedia Group says:

    siip..terima kasih tutorialnya mas..langsung praktek…salam kenal..
    #samsul
    http://cdinteraktifanak.wordpress.com

Leave a Reply

Fill in your details below or click an icon to log in:

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