Referensi Semua Properti CSS Table

Properti CSS border

Contoh

Menentukan style border untuk elemen table:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  border: 5px solid red;
}

h2 {
  border: 4px dotted blue;
}

div {
  border: double;
}
</style>
</head>
<body>

<h1>Judul dengan border merah solid</h1>

<h2>Judul dengan border biru dotted</h2>

<div>Elemen div dengan border double.</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti border pada CSS merupakan properti singkat/gabungan untuk:

border-width
border-style (wajib ada)
border-color

Jika warna border dihilangkan, maka warna yang diterapkan secara default .

Properti CSS border-collapse

Contoh

Menetapkan model border untuk dua tabel:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

#table1 {
  border-collapse: separate;
}

#table2 {
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>border-collapse: separate (default)</h2>
<table id="table1">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<h2>border-collapse: collapse</h2>
<table id="table2">
  <tr>
    <th>Nama Depan</th>
    <th>Nama belakang</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti border-collapse pada CSS digunakan untuk menentukan model border dari tabel. Ini menentukan apakah batas-batas cell dan kolomnya harus digabung atau dipisah.

Contoh

Saat menggunakan properti “border-collapse: separate“, properti border-spacing dapat digunakan untuk mengatur ruang antar sel:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

#table1 {
  border-collapse: separate;
  border-spacing: 10px;
}

#table2 {
  border-collapse: collapse;
  border-spacing: 10px;  
}
</style>
</head>
<body>

<h2>border-collapse: separate</h2>
<p>Saat menggunakan "border-collapse: separate", properti border-spacing dapat digunakan untuk menyetel ruang antar sel:</p>
<table id="table1">
  <tr>
    <th>Nama Depan</th>
    <th>Nama belakang</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<h2>border-collapse: collapse</h2>
<p>Saat menggunakan "border-collapse: collapse", properti border-spacing tidak berpengaruh:</p>
<table id="table2">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Contoh

Saat menggunakan properti “border-collapse: collapse“, cell yang muncul pertama kali yang akan ditampilkan:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 3px solid red;
}

#table1 {
  border-collapse: collapse;
  border-color: blue;
}

#table2 {
  border-collapse: separate;
  border-color: blue;
}
</style>
</head>
<body>

<h2>border-collapse: collapse</h2>
<table id="table1">
  <tr>
    <th>Nama Depan</th>
    <th>Nama belakang</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<h2>border-collapse: separate</h2>
<table id="table2">
  <tr>
    <th>Nama Depan</th>
    <th>Nama belakang</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Properti CSS border-spacing

Contoh

Menetapkan spasi border untuk tabel :

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

#table1 {
  border-collapse: separate;
  border-spacing: 15px;
}

#table2 {
  border-collapse: separate;
  border-spacing: 15px 50px;
}
</style>
</head>
<body>

<h2>border-spacing: 15px:</h2>
<p>Saat menggunakan "border-collapse: separate", properti border-spacing dapat digunakan untuk menyetel ruang antar sel:</p>
<table id="table1">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<h2>border-spacing: 15px 50px:</h2>
<p>Menggunakan dua nilai (yang pertama mengatur jarak horizontal dan yang kedua mengatur jarak vertikal):</p>
<table id="table2">
  <tr>
    <th>Nama Depan</th>
    <th>Nama belakang</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti border-spacing pada CSS dapat mengatur jarak antara garis border yang berdekatan.

Catatan: Properti ini hanya berfungsi jika border-collapse terpisah.

Properti CSS caption-side

Contoh

Menambahkan keterangan (caption) pada tabel:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  caption-side: bottom;
}

#example2 {
  caption-side: top;
}
</style>
</head>
<body>

<h1>Properti caption-side</h1>
<p>Properti caption-side menentukan penempatan keterangan (caption) pada tabel:</p>

<h2>caption-side: bottom</h2>
<table id="example1" border="1">
<caption>Tabel 1.1 Pelanggan</caption>
<tr>
<th>Perusahaan</th>
<th>Kontak</th>
<th>Negara</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Jerman</td>
</tr>
<tr>
<td>Berglunds snabbk?p</td>
<td>Christina Berglund</td>
<td>Swedia</td>
</tr>
<tr>
<td>Centro komersial Moctezuma</td>
<td>Francisco Chang</td>
<td>Meksiko</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
</table>

<h2>caption-side: top</h2>
<table id="example2" border="1">
<caption>Tabel 1.1 Pelanggan</caption>
<tr>
<th>Perusahaan</th>
<th>Kontak</th>
<th>Negara</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Jerman</td>
</tr>
<tr>
<td>Berglunds snabbk?p</td>
<td>Christina Berglund</td>
<td>Swedia</td>
</tr>
<tr>
<td>Centro komersial Moctezuma</td>
<td>Francisco Chang</td>
<td>Meksiko</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
</table>
</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti caption-side pada CSS dapat menambahkan keterangan (caption) tabel.

Properti CSS empty-cell

Contoh

Menghapus border pada sel kosong dalam tabel:

<!DOCTYPE html>
<html>
<head>
<style>
table.ex1 {
  empty-cells: hide;
}

table.ex2 {
  empty-cells: show;
}
</style>
</head>
<body>

<h1>Properti empty-cells</h1>

<h2>empty-cells: hide</h2>
<table class= "ex1" border= "1">
<tr>
<td>Petrus</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>

<h2>empty-cells: show (default)</h2>
<table class= "ex2" border= "1">
<tr>
<td>Petrus</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti empty-cells pada CSS dapat mengatur apakah akan menampilkan border pada cell kosong dalam tabel atau tidak.

Catatan: Properti ini tidak berpengaruh jika properti border-collapse adalah “collapse”.

Properti CSS table-layout

Contoh

Mengatur tata letak tabel yang berbeda :

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  border: 1px solid black;
} 

th,td {
  border: 1px solid black;
}

table.a {
  table-layout: auto;
  width: 180px;  
}

table.b {
  table-layout: fixed;
  width: 180px;  
}

table.c {
  table-layout: auto;
  width: 100%;  
}

table.d {
  table-layout: fixed;
  width: 100%;  
}
</style>
</head>
<body>

<h1>Properti table-layout</h1>

<h2>table-layout: auto; width: 180px;</h2>
<table class="a">
<tr>
<th>Perusahaan</th>
<th>Kontak</th>
<th>Negara</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Jerman</td>
</tr>
<tr>
<td>Perdagangan Pulau</td>
<td>Helen Bennett</td>
<td>Inggris Raya</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italia</td>
</tr>
</table>

<h2>table-layout: fixed; width: 180px;</h2>
<table class="b">
<tr>
<th>Perusahaan</th>
<th>Kontak</th>
<th>Negara</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Jerman</td>
</tr>
<tr>
<td>Perdagangan Pulau</td>
<td>Helen Bennett</td>
<td>Inggris Raya</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italia</td>
</tr>
</table>

<h2>table-layout: auto; width: 100%;</h2>
<table class= "c">
<tr>
<th>Perusahaan</th>
<th>Kontak</th>
<th>Negara</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Jerman</td>
</tr>
<tr>
<td>Perdagangan Pulau</td>
<td>Helen Bennett</td>
<td>Inggris Raya</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italia</td>
</tr>
</table>

<h2>table-layout: fixed; width: 100%;</h2>
<table class="d">
<tr>
<th>Perusahaan</th>
<th>Kontak</th>
<th>Negara</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Jerman</td>
</tr>
<tr>
<td>Perdagangan Pulau</td>
<td>Helen Bennett</td>
<td>Inggris Raya</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italia</td>
</tr>
</table>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti table-layout pada CSS dapat menentukan tampilan yang digunakan untuk menata cell, baris, dan kolom pada tabel.

Tips: Manfaat utama dari table-layout: fixed; adalah bahwa tabel ditampilkan jauh lebih cepat. Dalam kasus tabel yang mempunyai data yang besar, pengguna tidak akan melihat seluruh isi tabel sampai browser merender seluruh tabel. Jika menggunakan table-layout: fixed, pengguna sudah dapat melihat bagian atas tabel saat browser memuat dan merender sisa tabel pada bagian bawah. Hal ini memberi kesan bahwa halaman memuat jauh lebih cepat.

Tutorial sebelumnya : Membuat Table Responsif Dengan CSS
Tutorial setelahnya : Properti Display, Width dan Max-Width CSS
Semua Tutorial CSS : Tutorial CSS