Some text some message..
Some text some message..
Some text some message..
Some text some message..

Membuat Tabel Pada Halaman HTML

Previous Page

Elemen <tabel> merupakan elemen HTML yang digunakan untuk menampilkan data dalam bentuk kolom dan baris. Tabel sendiri mempunyai pengertian sebuah data tabular yang disajikan berbentuk grid yang terdiri atas kolom (column) dan baris (row). Data pada tabel dimasukkan ke dalam wadah yang disebut sel (cell) yang merupakan pertemuan antara kolom dan baris. Kolom pada tabel adalah data yang ditampilkan memanjang ke atas (sumbu-y), sedangkan baris adalah data yang ditampilkan ke arah horisontal (sumbu-x). Sebuah tabel yang sederhana memiliki paling tidak 3 buah elemen tabel yaitu elemen <table>, elemen <tr>, dan elemen <td>.

Elemen <table> untuk membuat tabel yang ditandai dengan tag <table> </table>. Di dalam elemen ini terdapat elemen <tr> (table row) dengan tag <tr> ... </tr>. Elemen <tr> ini digunakan untuk membuat barisan tabel.

Kemudian yang terakhir adalah elemen <td> (table data) dengan tag <td> ... </td>. Kolom-kolom yang terletak di antara tag <td> </td> inilah yang sering di sebut sebagai table cell. Di dalam tag inilah data akan dimasukkan.

struktur table html

Untuk membuat tabel sederhana, Anda membutuhkan tag <table> </table>, <tr> </tr>, <td> </td> yang disusun secara berurutan. Berikut ini adalah contoh menciptakan tabel pada halaman HTML :

HTML

1.  <!DOCTYPE html>
2.  <html lang="en">
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo HTML tag table Html </title>
6.  </head>
7.  <body>
8.     <h2>Latihan membuat tabel</h2>
9.     <table border='1'>
10.     <tr><td>No</td><td>Produk</td><td>Jumlah</td><td>Harga</td></tr>
11.     <tr><td>1.</td><td>Komputer</td><td>1</td><td>Rp. 4.000.000,-</td></tr>
12.     <tr><td>2.</td><td>Laptop</td><td>2</td><td>Rp. 12.000.000,-</td></tr>
13.     <tr><td>3.</td><td>Kamera</td><td>5</td><td>Rp. 20.000.000,-</td></tr>
14.     <tr><td>4.</td><td>Televisi</td><td>10</td><td>Rp. 20.000.000,-</td></tr>
15.     <tr><td>5.</td><td>Sound Sistem</td><td>4</td><td>Rp. 16.000.000,-</td></tr>
16.    </table>
17.    
18. </body>
19. </html>
20. 

Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :

membuat tabel

Elemen <th> atau table header di dalam tabel

Table header <th> adalah elemen pada tabel yang digunakan sebagai judul bagi tiap-tiap data yang berada didalam kolom yang sama. Elemen <th> secara default akan menghasilkan teks yang memiliki gaya tampilan bold (tebal) dengan posisi teks center (rata tengah).

Fungsi dari elemen <th> (table header) ini sebenarnya hampir sama dengan elemen <td> yaitu untuk menempatkan data. Namun elemen <th> digunakan bagi data yang bersifat header/judul. Sedangkan elemen <td> hanya untuk menempatkan isi data tabel saja.

Sebenarnya Anda dapat menggunakan elemen <td> dengan mengisi judul bagi tiap-tiap kolom yang ada dibawahnya. Namun secara struktural HTML, cara tersebut tidak disarankan karena HTML sudah menyediakan elemen table header <th> untuk menempatkan judul bagi tiap-tiap data yang berada didalam kolom yang sama.

membuat tabel

Berikut ini contoh bagaimana menggunakan elemen <th> (table header) pada halaman HTML :

HTML

1.  <!DOCTYPE html>
2.  <html lang="en">
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo HTML tag table dengan table header</title>
6.  </head>
7.  <body>
8.     <h2>Latihan membuat tabel dengan table header</h2>
9.     <table border='1'>
10.     <tr><th>No</th><th>Produk</th><th>Jumlah</th><th>Harga</th></tr>
11.     <tr><td>1.</td><td>Komputer</td><td>1</td><td>Rp. 4.000.000,-</td></tr>
12.     <tr><td>2.</td><td>Laptop</td><td>2</td><td>Rp. 12.000.000,-</td></tr>
13.     <tr><td>3.</td><td>Kamera</td><td>5</td><td>Rp. 20.000.000,-</td></tr>
14.     <tr><td>4.</td><td>Televisi</td><td>10</td><td>Rp. 20.000.000,-</td></tr>
15.     <tr><td>5.</td><td>Sound Sistem</td><td>4</td><td>Rp. 16.000.000,-</td></tr>
16.    </table>
17. </body>
18. </html>
19. 
tabel header html

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<table>yayayayaya

Global Attributes :

Tag <table> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <table> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <table> pada HTML:

table{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}

noteCatatan : Sebelum ada CSS, tag <table> banyak digunakan untuk membuat layout halaman web. Namun pada saat ini penggunaan tabel untuk membentuk struktur halaman web sudah jarang ditemukan. Hal ini karena proses pengelolaannya jauh lebih rumit karena banyaknya tag-tag anakan tabel di dalam tag <table> itu sendiri. Dan file yang dihasilkan jauh lebih besar jika dibandingkan dengan menggunakan CSS sehingga mempengaruhi waktu akses yang lebih lama.

facebooktwittergoogle pluswhatapplinkedinpinterest

Previous Page

Daftar Isi HTML