Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Mengatur Table Border dengan CSS

Pada topik belajar HTML dulu sinahu coding sudah pernah membahas tentang Belajar membuat table dengan HTML. Di sana dibahas bagaimana kerangka coding dasar HTML dalam membuat table.

Nah, sekarang kita akan mempelajari bagaimana menambahkan style CSS pada table. Bagaimana mengatur border table, tinggi dan lebar table, warna, posisi teks pada table, dan sebagainya. Karena semua itu bukan pekerjaannya HTML, tapi bidang kerjanya CSS.

Cara Mengatur Border Table dengan CSS


Yang pertama adalah table border. Untuk mengatur border atau garis tepi atau batas suatu table maka dengan menggunakan properti CSS table.

Di bawah ini adalah contoh membuat border table berwarna biru dengan ketebalan border sebesar 3px.


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

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Kampret</td>
    <td>Loncat</td>
  </tr>
  <tr>
    <td>Kampret</td>
    <td>Alas</td>
  </tr>
</table>

</body>
</html>

Hasilnya :

table border


Sebagai tambahan, bahwa tabel dalam contoh di atas memiliki batas ganda. Hal ini karena tabel serta elemen <th>/<td> keduanya memiliki batas yang terpisah. Untuk mengatasinya, agar menjadi single border, maka dibutuhkan properti border-collapse. Seperti contoh berikut :


<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
}

table, td, th {
    border: 3px solid blue;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Kampret</td>
    <td>Loncat</td>
  </tr>
  <tr>
    <td>Kampret</td>
    <td>Alas</td>
  </tr>
</table>

</body>
</html>

dengan menambahkan border-collapse maka hasilnya akan seperti ini :

table border

Itulah ulasan singkat tentang table border. Stay terus di sinahu coding untuk pembelajaran CSS selanjutnya.



0 Komentar untuk "Mengatur Table Border dengan CSS"

Back To Top