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.



1 Komentar untuk "Mengatur Table Border dengan CSS"

Terima kasih kak atas blog nya sangat bagus dan memabantu saya dalam memahami html tabel dengan menerapkan css.tapi saya mau bertaya kak apa bisa coding html dengan css di pisah jadi dua kak? Terima kasih kak dan terus berkarya kak.
Perkenalkan nama saya Andrian antonius nim saya :1922500215 web kampus saya :https://www.atmaluhur.ac.id/

Back To Top