Belajar HTML Part 13: Cara Membuat Tabel HTML dengan CSS

Diposting oleh pada tanggal

Cara Membuat Tabel HTML dengan CSS


Mendefinisikan sebuah Tabel HTML


Tabel HTML didefinisikan dengan tag <table>.

Setiap baris tabel ditentukan dengan tag <tr>. Header tabel didefinisikan dengan tag <th>. Secara default, judul tabel tebal dan terpusat. Data tabel / sel didefinisikan dengan tag <td>.


Contoh Code:

 <!DOCTYPE html>
<html>
<body>
<table style="width:100%">
  <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>

 Catatan: Elemen <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML; teks, gambar, daftar, tabel lainnya, dll.

Tabel HTML - Menambahkan Perbatasan


Jika Anda tidak menentukan batas tabel, itu akan ditampilkan tanpa batas.

Batas ditetapkan menggunakan properti perbatasan CSS:
table, th, td {
    border: 1px solid black;
}

Contoh Code:

 <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
  <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>

 Ingatlah untuk menentukan batas untuk tabel dan sel tabel.

Tabel HTML - Collapsed Borders


Jika Anda ingin perbatasan runtuh menjadi satu perbatasan, tambahkan properti border-collapse CSS:
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;}

Contoh Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
  <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>

Tabel HTML - Adding Cell Padding


Sel padding menentukan ruang antara konten sel dan perbatasannya.

Jika Anda tidak menentukan padding, sel tabel akan ditampilkan tanpa padding.

Untuk mengatur padding, gunakan properti padding CSS:
th, td {
    padding: 15px;}

Contoh Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
</style>
</head>
<body>
<table style="width:100%">
  <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>
<p>Try to change the padding to 5px.</p>
</body>
</html>

Tabel HTML - Left-align Headings


Secara default, judul tabel tebal dan terpusat.

Untuk mensejajarkan judul tabel dengan benar, gunakan properti text-align CSS:
th {
    text-align: left;}

Contoh Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
  <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>

Tabel HTML - Menambahkan Border Spacing


Border spacing menentukan ruang antar sel.

Untuk mengatur jarak spasi untuk tabel, gunakan properti jarak-perbatasan CSS:
table {
    border-spacing: 5px;}

Contoh Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    padding: 5px;
}
table {
    border-spacing: 15px;
}
</style>
</head>
<body>
<table style="width:100%">
  <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>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>


Catatan: Jika ttable memiliki batas yang runtuh, border-spacing tidak berpengaruh.

Tabel HTML - Sel yang Memisahkan Banyak Kolom


Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan:
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Contoh Code:


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
</body>
</html>

Tabel HTML - Sel yang Menghasilkan Banyak Baris


Untuk membuat rentang sel lebih dari satu baris, gunakan atribut rowspan:
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

 Contoh Code:

 <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
</body>

</html>
Catatan: Tag <caption> harus segera dimasukkan setelah tag <table>.

Style Khusus untuk Sabuah tabel


Untuk menentukan Style khusus untuk sebuh tabel khusus, tambahkan atribut id ke tabel:
<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Sekarang Anda dapat menentukan Style khusus untuk tabel ini:
table#t01 {
    width: 100%;
    background-color: #f1f1c1;}

Contoh Code:

 <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
</style>
</head>
<body>
<table style="width:100%">
  <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>

 Dan tambahkan lebih banyak Style:
table#t01 tr:nth-child(even) {
    background-color: #eee;}
table#t01 tr:nth-child(odd) {
    background-color: #fff;}
table#t01 th {
    color: white;
    background-color: black;}

Contoh Code:

<!DOCTYPE html>
<html>
<head>
<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>

Ringkasan Bab

  • - Gunakan elemen HTML <table> untuk menentukan tabel
  • - Gunakan elemen HTML <tr> untuk menentukan baris tabel
  • - Gunakan elemen HTML <td> untuk menentukan data tabel
  • - Gunakan elemen HTML <th> untuk menentukan judul tabel
  • - Gunakan elemen HTML <caption> untuk menentukan judul tabel
  • - Gunakan properti border CSS untuk menentukan border
  • - Gunakan properti border-collapse CSS untuk menutup batas sel
  • - Gunakan properti padding CSS untuk menambahkan padding ke sel
  • - Gunakan properti text-align CSS untuk menyelaraskan teks sel
  • - Gunakan properti border-spacing CSS untuk mengatur jarak antar sel
  • - Gunakan atribut colspan untuk membuat rentang sel banyak kolom
  • - Gunakan atribut rowspan untuk membuat rentang sel banyak baris
  • - Gunakan atribut id untuk mendefinisikan satu tabel secara unik

HTML Table Tags

Tag Description
<table>  Mendefinisikan sebuah tabel
<th>  Mendefinisikan sebuah sel header dalam sebuah tabel
<tr>  Mendefinisikan sebuah baris dalam sebuah tabel
<td>  Mendefinisikan sebuah sel dalam sebuah tabel
<caption>  Mendefinisikan caption tabel
<colgroup>  Menentukan sekelompok satu atau lebih kolom dalam tabel untuk pemformatan
<col> Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
<thead>  Mengelompokkan konten header dalam sebuah tabel
<tbody>  Mengelompokkan konten tubuh dalam sebuah tabel
<tfoot>  Mengelompokkan isi footer dalam sebuah tabel


Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2