Mengatur Table HTML Dengan CSS

Mengatur Table HTML Dengan CSS

Tampilan tabel HTML dapat diatur menggunakan CSS

Batas/Border Tabel

Untuk menentukan batas/border tabel menggunakan CSS, gunakan properti border.

Contoh di bawah ini menentukan border solid untuk elemen <table>, <th>, dan <td> :

Contoh

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

<h2>Tambahkan border ke tabel:</h2>

<table>
<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

Lebar Tabel

Pada contoh tabel di atas mungkin terlihat kecil. Jika memerlukan tabel sesuai dengan lebar layar, maka tambahkan width: 100% ke dalam elemen <tabel>

Contoh

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

table {
  width: 100%;
}
</style>
</head>
<body>

<h2>Tabel lebar penuh</h2>

<table>
  <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

Mengecilkan Batas Tabel

Properti border-collapse pada CSS  dapat menentukan apakah batas-batas baris dan kolomnya harus digabung atau dipisah :

Contoh

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

table {
  width: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Mengecilkan tabel border</h2>

<table>
<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

Jika hanya menginginkan border di sekeliling table saja, maka gunakan properti border untuk <table> :

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border: 1px solid;
}
</style>
</head>
<body>

<h2>Border di sekitar tabel</h2>

<table>
  <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

Lebar dan Tinggi Tabel

Lebar dan tinggi tabel ditentukan oleh properti width dan height.

Contoh di bawah mengatur lebar tabel menjadi 100%, dan tinggi elemen <th> menjadi 70px:

Contoh

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

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 70px;
}
</style>
</head>
<body>

<h2>Properti width dan height</h2>

<p>Tetapkan lebar tabel dan tinggi baris untuk header tabel:</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama belakang</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Coklat</td>
    <td>$250</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Untuk membuat lebar tabel hanya setengah halaman, maka gunakan properti width: 50% :

Contoh

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

table {
  border-collapse: collapse;
  width: 50%;
}
</style>
</head>
<body>

<h2>Tabel yang hanya mempunyai width setengah halaman</h2>

<p>Setel lebar tabel menjadi 50%:</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama belakang</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Coklat</td>
    <td>$250</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Perataan Horizontal

Properti text-align pada CSS dapat mengatur perataan isi konten secara horizontal (seperti rata kiri, kanan, atau tengah) di dalam elemen <th> atau <td>.

Secara default, elemen <th> diatur rata tengah dan elemen <td> diatur rata kiri.

Untuk merubah isi konten elemen <td> menjadi rata tengah, bisa menggunakan properti text-align: center:

Contoh

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

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
}
</style>
</head>
<body>

<h2>Properti text-align</h2>

<p>Properti ini menyetel perataan horizontal (seperti kiri, kanan, atau tengah) konten di th atau td.</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Coklat</td>
    <td>$250</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Untuk mengubah isi konten menjadi ke kiri, ubah elemen <th> menjadi rata kiri menggunakan properti text-align: left:

Contoh

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

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Properti text-align</h2>

<p>Properti ini menyetel perataan horizontal (seperti kiri, kanan, atau tengah) konten di th atau td.</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Coklat</td>
    <td>$250</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Perataan Vertikal

Properti vertical-align pada CSS dapat mengatur perataan isi konten secara vertikal (seperti atas, bawah, atau tengah) di dalam <th> atau <td>.

Secara default, posisi isi konten dalam tabel berada di tengah (untuk elemen <th> dan <td>).

Contoh berikut mengatur perataan tulisan secara vertikal ke bawah untuk elemen <td> :

Contoh

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

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  height: 50px;
  vertical-align: bottom;
}
</style>
</head>
<body>

<h2>Properti vertical-align</h2>

<p>Properti ini menyetel perataan vertikal (seperti atas, bawah, atau tengah) konten di th atau td.</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Tabungan</th>
  </tr>
  <tr>
    <td>Petrus</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Coklat</td>
    <td>$250</td>
  </tr>
</table>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Membuat Dan Mengatur List Dengan CSS
Tutorial setelahnya : Menambahkan Style Pada Table Dengan CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan