Membuat Tabel dalam HTML

By | 3 October 2017

Untuk membuat tabel dalam dokumen html menggunakan tag <table> dengan tag <tr> untuk membuat baris dan tag <td> untuk membuat kolom. Sehingga secara sederhana untuk membuat tabel adalah sebagai berikut: <table><tr><td>isi tabel</td></tr></table>. Terkadang dalam membuat tabel membutuhkan cara untuk menggabungkan kolom atau baris, untuk ini digunakan atribut colspan dan rowspan. Berikut ini beberapa tag dan atribut yang biasa digunakan dalam mengelola tabel, diantaranya:

  • tr, pembentuk baris
  • td, pembentuk kolom
  • th, pembentuk kolom untuk judul
  • border, mengatur ketebalan garis dengan nilai misalnya 0 atau 1 atau 2, dst. Jika memberi nilai 0 maka garis tidak akan ditampilkan (no border).
  • width, mengatur lebar tabel atau sel, bisa dalam pixel atau persen.
  • height, mengatur lebar tabel atau sel, bisa dalam pixel atau persen.
  • cellspacing, mengatur jarak antar sel.
  • cellpadding, mengatur jarak antara isi sel dengan garis.
  • bgcolor, mengatur warna latar belakang tabel atau sel.
  • background, mengatur latar belakang tabel atau sel dengan gambar.
  • align, mengatur perataan isi sel secara horizontal (left, center, right, justify).
  • valign, mengatur perataan isi sel secara vertikal (top, bottom, middle, baseline).
  • bordercolor, mengatur warna border.
  • bordercolorlight, mengatur warna border bagian atas.
  • bordercolordark, mengatur warna border bagian bawah.
  • rowspan, untuk menggabungkan beberapa baris.
  • colspan, untuk menggabungkan beberapa kolom.

Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Latihan Membuat Tabel</title>
</head>
<body>
<table border="2" bordercolor="red" width="500" height="250" cellspacing="10" cellpadding="10">
<tr bgcolor="yellow">
    <th colspan="4">JADWAL PELAJARAN</th>
</tr>
<tr>
    <td rowspan="2">Ayo Belajar</td>
    <th>Hari</th>
    <th>Jam Masuk</th>
    <th>Matapelajaran</th>
</tr>
<tr>
    <td>Senin</td>
    <td>7:00</td>
    <td>Matematika</td>
</tr>
</table>
</body>
</html>

Lihat hasilnya:

Tabel Jadwal Pelajaran



Berikut contoh pembuatan tabel dengan penggunaan internal style:

<!DOCTYPE html>
<html>
<head>
<title>Table dengan Style</title>
<style>
table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color:#fff;
}
table#t01 th {
    background-color: black;
    color: white;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>
<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

Lihat hasilnya:

Tabel dengan style