Cara Mudah Membuat Tabel Dengan HTML


Kali ini Saya akan membahas Cara Mudah Membuat Tabel Dengan HTML.
Tabel memang sangat banyak gunanya, mulai untuk menyusun jadwal, menyusun skor, hingga daftar kerjaan, dll. Beberapa penjelasan ini mengenai kerangka HTML tabel dari yang paling sederhana hingga menuju langkah-langkah modifikasi tampilan. Langsung saja ikuti langkah-langkahnya di bawah ini, check this out ↓

Cara Mudah Membuat Tabel Dengan HTML

Kerangka Tabel Paling Sederhana

Sebuah tabel sederhana terdiri dari elemen <table> yang diisi dengan beberapa <tr>, dimana setiap <tr> akan berisi beberapa <td>. <table> adalah table, <tr> adalah table row dan <td> adalah table data :

<table>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasil :

1.11.21.3
2.12.22.3


Header Tabel

Header tabel terbentuk dari elemen <th> (table header). Secara normal, tampilan teks di dalam header tabel akan secara otomatis bercetak tebal dan tersusun rata tengah :

<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasil :

Header 1Header 2Header 3
1.11.21.3
2.12.22.3

Menambahkan Border

Tambahkan atribut border dengan nilai bukan 0 untuk menampilkan border pada tabel :

<table border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasil :

Header 1Header 2Header 3
1.11.21.3
2.12.22.3

Atribut ini sebenarnya tidak begitu penting, karena akan lebih efektif jika kita menggunakan CSS untuk mengeset border pada tabel.

Caption/Judul Tabel

Tambahkan elemen <caption> tepat setelah kode <table> sebagai judul tabel :

<table border="1">
<caption>Judul Tabel</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasil :

Judul Tabel
Header 1Header 2Header 3
1.11.21.3
2.12.22.3

Menggabungkan Sel-Sel Tabel (Merge Cell)

Ada dua atribut yang bisa Anda gunakan, yaitu colspan untuk menggabungkan kolom tabel dan rowspan untuk menggabungkan baris tabel. Nilai rowspan dan colspan menunjukkan jumlah sel yang ingin disatukan :

<table border="1">
<caption>Judul Tabel</caption>
<tr><th colspan="2">Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasil :

Judul Tabel
Header 1Header 2Header 3
1.11.21.3
2.12.22.3

Catatan :

Karena sel tabel mendapatkan atribut colspan="2", maka dua buah posisi sel akan digabungkan. Jadi, sel di sebelahnya harus dibuang. Ini berlaku juga untuk rowspan, hanya saja penggabungannya secara vertikal :
<table border="1">
<caption>Judul Tabel</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td rowspan="2">1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasil :

Judul Tabel
Header 1Header 2Header 3
1.11.21.3
2.12.22.3

Mengubah Tampilan Tabel dengan CSS

Diutamakan untuk border, CSS akan membuat tampilan border pada tabel menjadi lebih baik dan lebih bisa dikendalikan:

table, th, td {border:1px solid purple;}

Namun, karena border tabel secara normal tampak terpisah, kita harus mendeklarasikan border-collapse:collapse untuk merapatkan mereka :

table, th, td {border:1px solid purple;border-collapse:collapse; /* untuk menghilangkan jarak antar sel */}

Setelah itu Anda bisa menentukan width, padding, background, font, color dan lain-lain. Beberapa properti CSS seperti vertical-align dan text-align juga nantinya akan dibutuhkan :

table {
  width:100%; /* lebar tabel menjadi sama dengan lebar kontainer */
  font:normal normal 13px/1.4 Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse; /* untuk menghilangkan jarak antar sel */
}
table caption {
  padding:.4em 0;
  font-style:italic;
  font-weight:bold;
  text-align:left;
  border-top:2px solid black;
}
table, th, td {
  border:1px solid black;
}
th, td {
  padding:1em 1.4em;
  vertical-align:top; /* membuat semua konten tabel menjadi rata atas */
  text-align:left; /* membuat semua teks di dalam tabel menjadi rata kiri */
}
th {
  background-color:#080;
  color:white;
}

Hasil :



Markup HTML Standar

Markup HTML tabel standar secara garis besar dapat disusun seperti ini :

<table border="1" summary="Tabel ini menjelaskan tentang perkembangan kelangsungan hidup umat manusia di tahun 2013">
    <caption>Tabel Kelangsungan Hidup Manusia</caption>
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tbody>
        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
    </tbody>
</table>

Hasil :

Tabel Kelangsungan Hidup Manusia
Header 1Header 2Header 3
1.11.21.3
2.12.22.3
3.13.23.3
4.14.24.3
5.15.25.3

Setiap baris yang mengandung elemen <th> akan dibungkus kembali dengan elemen <thead> sementara baris yang mengandung elemen <td> akan dibungkus dengan elemen <tbody>

Footer Tabel

Anehnya, footer tabel harus diletakkan di sebelah atas, lebih tepatnya sebelum <tbody>, tapi jangan khawatir, karena hasil akhirnya nanti akan tetap tampil di bagian paling bawah :

<table border="1">
    <caption>Judul Tabel</caption>
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tfoot>
        <tr><td>Total</td><td>XXX</td><td>YYY</td></tr>
    </tfoot>
    <tbody>
        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
    </tbody>
</table>

Hasil :

Judul Tabel
Header 1Header 2Header 3
TotalXXXYYY
1.11.21.3
2.12.22.3
3.13.23.3
4.14.24.3
5.15.25.3


Selamat Mencoba dan Semoga Bermanfaat !

1 Komentar untuk "Cara Mudah Membuat Tabel Dengan HTML"

  1. Wah lengkap banget mas. Tapi itu textareanya kok gak bisa dicopy pakai hp mas?

    #maaf mas tentang moderasi di blogspot saya kurang tau,mungkin udah masuk spam kali. Beda ma reyblog.com karena mobile blog jadi sangat simple dan mudah penggunaanya.
    #terimakasih atas kunjungan mas

    BalasHapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Tekan close (x) 2 kali untuk menutup, jangan lupa Berlangganan

Masukkan Email aktif untuk update artikel via email :

Delivered by FeedBurner

×