Ads by Yasya El Hakim
Tutorial Lengkap HTML: Tabel pada HTML - Bagian 16

Pada HTML, kalian bisa membuat tabel dengan menggunakan tag <table>.

Setiap baris pada tabel dapat dibuat dengan tag <tr>. Header pada tabel bisa dibuat dengan menggunakan tag <th>. Secara Default (Bawaan), Teks Header pada tabel berjenis Bold (Tebal) dan berada di posisi tengah. Sebuah data/Cell dapat dibuat dengan tag <td>.

Contoh
<table style="width:100%">
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Jenis Kelamin</th>
</tr>

<tr>
<td>Yasya</td>
<td>EL Hakim</td>
<td>Laki-Laki</td>
</tr>
<tr>

<td>Agung</td>
<td>Cahyadi</td>
<td>Laki-Laki</td>
</tr>
</table>
See the Pen 53. HTML table by Yasya El Hakim (@elhakimyasya) on CodePen.

Catatan: Elemen <td> merupakan kontainer (letak) data pada tabel. Data tersebut dapat berupa elemen HTML seperti teks, gambar, daftar, tabel lain, dll.

Menambahkan Garis Batas (Border) pada Tabel

Secara Default, tabel tidak memiliki garis batas.

Kalian dapat memasang garis batas dengan menggunakan property border.

Contoh

table, th, td {
border: 1px solid black;
}
See the Pen 54. HTML Border Table by Yasya El Hakim (@elhakimyasya) on CodePen.

Jangan lupa untuk menentukan border pada tabel dan tabel cell.

Garis Batas Tipis

Jika kalian menambahkan property border pada tabel, mungkin kalian akan melihat dua buah garis batas, jika kalian ingin menggunakan satu garis, kalian bisa menambahkan property border-collapse pada CSS.

Contoh

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
See the Pen 55. HTML Border Collapse by Yasya El Hakim (@elhakimyasya) on CodePen.

Menambahkan Cell Padding

Cell Padding dapat kalian gunakan untuk menambahkan ruang diantara cell konten dan garis batas.

Untuk mengaturnya, kalian dapat menggunakan property padding pada CSS.

Contoh

th, td {
padding: 15px;
}
See the Pen 56. HTML Cell Padding by Yasya El Hakim (@elhakimyasya) on CodePen.

Perataan Teks Heading

Secara Default, Heading pada tabel memiliki teks tebal (Bold) dan berada di posisi tengah.

Untuk mengatur perataan Heading ke arah kiri, kalian bisa menggunakan property text-align pada CSS.

Contoh

th {
text-align: left;
}
See the Pen 57. HTML Heading Kiri by Yasya El Hakim (@elhakimyasya) on CodePen.

Menambahkan Border Spacing

Border Spacing berguna untuk menambahkan ruang diantara cell.

Untuk mengatur Border Spacing, kalian dapat menggunakan propery border-spacing pada CSS.

Contoh

table {
border-spacing: 5px;
}
See the Pen 58. HTML Tabel Cellspacing by Yasya El Hakim (@elhakimyasya) on CodePen.

Catatan: Jika tabel sudah diatur menjadi Collapsed Border, maka efek dari property border-spacing tidak akan terlihat.

Merge Cell

Untuk membuat merge Cell pada satu kolom, kalian dapat menggunakan atribut colspan.

Contoh

<table style="width:100%">
<tr>
<th>Nama</th>
<th colspan="2">Telp/HP</th>
</tr>

<tr>
<td>Yasya El Hakim</td>
<td>+628xxxxxxxxxxx</td>
<td>+628xxxxxxxxxxx</td>
</tr>

</table>
See the Pen 59. HTML Tabel Colspan by Yasya El Hakim (@elhakimyasya) on CodePen.

Merge Row

Untuk membuat merge Row pada satu baris, kalian dapat menggunakan atribut rowspan.

Contoh

<table style="width:100%">

<tr>
<th>Nama:</th>
<td>Yasya El Hakim</td>
</tr>

<tr>
<th rowspan="2">Telp/HP:</th>
<td>+628xxxxxxxxxxx</td>
</tr>

<tr>
<td>+628xxxxxxxxxxx</td>
</tr>

</table> 
See the Pen 60. HTML Tabel Rowspan by Yasya El Hakim (@elhakimyasya) on CodePen.

Menambahkan Caption

Untuk menambahkan Caption pada tabel, gunakan tag <caption>.

Contoh

<table style="width:100%">
<caption>Tabunganku</caption>

<tr>
<th>Bulan</th>
<th>Tabungan</th>
</tr>

<tr>
<td>November</td>
<td>Rp. 2500</td>
</tr>

<tr>
<td>Desember</td>
<td>Rp. 500</td>
</tr>
</table>
See the Pen 61. HTML Tabel 2 by Yasya El Hakim (@elhakimyasya) on CodePen.

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

Style Spesial untuk Satu Tabel

Untuk menentukan Style pada tabel, kalian dapat menambahkan atribut id pada tabel.

Contoh

<table id="t01">

<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Jenis Kelamin</th>
</tr>

<tr>
<td>Yasya</td>
<td>El Hakim</td>
<td>Laki-Laki</td>
</tr>
</table> 

Tentukan Style pada Tabel
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
See the Pen 62. HTML Tabel id1 by Yasya El Hakim (@elhakimyasya) on CodePen.

Menambahkan Style Tambahan
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;
}
See the Pen 63. HTML Tabel id2 by Yasya El Hakim (@elhakimyasya) on CodePen.

Ringkasan

  • Gunakan elemen <table> untuk membuat tabel.
  • Gunakan elemen <tr> untuk menentukan baris tabel.
  • Gunakan elemen <tr> untuk menentukan data tabel.
  • Gunakan elemen <th> untuk menentukan Heading tabel.
  • Gunakan elemen <caption> untuk menentukan Caption tabel.
  • Gunakan property border untuk menentukan garis batas.
  • Gunakan property border-collapse untuk menentukan jumlah garis batas.
  • Gunakan property padding untuk menambahkan padding pada Cell.
  • Gunakan property text-align untuk mengatur perataan teks.
  • Gunakan property border-spacing untuk mengatur jarak antara cell.
  • Gunakan atribut colspan untuk membuat merge cell.
  • Gunakan atribut rowspan untuk membuat merge row.
  • Gunakan atribut id untuk menentukan id dari tabel.

Sebelumnya: Tutorial Lengkap HTML: Gambar pada HTML - Bagian 15
Selanjutnya: Tutorial Lengkap HTML: Daftar pada HTML - Bagian 17
Daftar Isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya