Belajar HTML (08): Membuat Tabel

Oke… lanjut lagi tutorial kita tentang HTML. Terakhir yang dibahas adalah tentang bagaimana memformat heading dan font dalam halaman web. Jika Anda baru pertama kali terdampar di blog ini, mungkin Anda perlu membaca beberapa tulisan sebelumnya.

Yang paling penting adalah perkenalan dengan HTML. Baiklah… kali ini kita bahas tentang bagaimana cara membuat tabel dalam sebuah halaman web. Tabel tentu sudah umum kita lihat dan bahkan sangat sering digunakan utamanya pada dokumen-dokumen cetakan. Tetapi perlu diketahui bahwa tabel yang kita maksud di sini adalah tabel pada halaman web.

Bagaimana cara membuat tabel di halaman web? Kita harus menggunakan beberapa tag HTML yaitu <table></table> untuk membentuk dasar tabelnya, dilanjutkan dengan <tr></tr> atau table-row untuk membentuk baris dan <td></td> atau table-data untuk membentuk kolom. Semakin banyak tag <td></td> dalam sebuah tag <tr></tr> akan semakin banyak juga jumlah kolom pada baris tabel tersebut.

basic table

Basic table, maksudnya adalah dasar dari pembentuk tabel. Untuk lebih jelasnya silahkan ketik dan coba kode berikut ini, simpan dengan nama file 14-html-table-basic.html:

<!DOCTYPE html>
<html>
<head>
   <title>Tabel Dasar</title>
</head>
<body>
   <p>Contoh <b>Table</b> dasar tanpa atribut</p>
   
   <table>
      <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>

Setelah dijalankan akan menampilkan tabel seperti di bawah ini.

Basic Table

Yakin gambar di atas itu tabel? 😀 Yakin aja lah ya 😎

border dan align

Oke, contoh di atas tadi sudah berbentuk tabel, tetapi tanpa garis atau border. Untuk menampilkan garis atau bordernya, perlu ditambahkan atribut border dengan value berupa angka. Penulisannya seperti ini border="1". Angka untuk valuenya bebas.

Kemudian tabel juga bisa diatur perataannya, misal tabel ingin diposisikan sebelah kanan, kiri atau tengah. Untuk itu bisa menggunakan atribut align. Cara penulisannya align="rata-apa" di mana rata-apa bisa diisi dengan left, right atau center. Atribut ini bisa juga digunakan pada kolom, cara penulisannya sama.

Tabel juga bisa diatur lebarnya, bisa bersifat statis atau bisa juga dinamis. Dengan menggunakan tag width bisa diatur langsung dengan angka atau persen. Contoh menggunakan angka langsung (statis) width="500" atau menggunakan persen (dinamis) width="75%". Untuk lebar ini, tidak hanya digunakan untuk tablenya saja, tetapi bisa juga digunakan untuk mengatur lebar dari masing-masing kolom, atributnya diletakkan pada tag <td> misalnya <td width="200">.

Selanjutnya →

Halaman : 1 2 3 4

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

3 Responses

  1. 18 Februari 2017

    […] Setelah sebelumnya kita membuat tabel, selanjutnya kita bahas tentang bagaimana membuat link atau tautan dalam halaman […]

  2. 29 Juli 2017

    […] Contoh kedua ini gabungan semua jenis list dan juga bahasan-bahasan sebelumnya tentang membuat tabel dan menentukan font. Silahkan dicoba dan […]

  3. 22 Januari 2019

    […] yang berbau jQuery Mobile. Tetapi ada hubungannya dengan tulisan tentang HTML, yaitu cara untuk membuat tabel. Ya kita akan bahas bagaimana membuat tabel di jQuery Mobile dan memilih kolom apa saja yang akan […]

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *