Bagaimana Cara Menambahkan Batas-Bawah ke Baris Tabel?

Properti 'border-bottom' dari CSS digunakan untuk menambahkan batas di bagian bawah elemen HTML apa pun. Meskipun, itu tidak secara langsung mempengaruhi baris tabel. Alasannya adalah properti border-collapse terpisah sebagai nilai yang ditentukan sebelumnya dan tidak mengizinkan gaya baris. Panduan ini mengilustrasikan cara menerapkan batas bawah ke elemen tabel.

Bagaimana Cara Menambahkan Batas-Bawah ke Baris Tabel ?
Atur border-bottom ke Table Row Element
Elemen Tabel Gaya
Elemen gaya 'td'.
Elemen gaya 'tr'.

Bagaimana Cara Menambahkan Batas-Bawah ke Baris Tabel ?

Menambahkan border-bottom ke baris tabel akan menambahkan border ke seluruh baris untuk membuat pengalaman visual yang lebih baik dan untuk menarik fokus pengguna.

Contoh mendetail menambahkan border-bottom ke baris tabel ditunjukkan di bawah ini:

Setel border-bottom ke Baris Tabel

Buat tabel sederhana yang berisi 3 baris dan 3 kolom di file HTML kita yang dibuat menggunakan elemen , dan :

< meja >
< tr kelas = 'baris' >
< th > Nama < / th >
< th > Status < / th >
< th > Kamar No < / th >
< / tr >
< tr kelas = 'baris' >
< td > Fakhar < / td >
< td > Murid < / td >
< td > 05 < / td >
< / tr >
< tr kelas = 'baris' >
< td > Omar < / td >
< td > Murid < / td >
< td > 05 < / td >
< / tr >
< / meja >

Dalam cuplikan kode di atas, kami telah menetapkan kelas 'baris' ke baris tabel , sehingga nantinya dapat diakses di CSS.

Halaman web akan terlihat seperti ini:

Elemen Tabel Gaya

Di bagian CSS pilih elemen tabel dan sejajarkan teks ke tengah. Setelah itu, gunakan “ perbatasan-runtuh ” properti untuk menyetel nilainya agar runtuh:

meja
{
perbatasan-runtuh: runtuh;
perataan teks: tengah;
}

Elemen gaya 'td'.

Untuk representasi visual yang lebih baik, mari kita berikan padding 20px ke elemen data tabel “” dan header tabel “”:

td
{
padding:20px;
}
th
{
padding:20px;
}

Outputnya terlihat seperti ini:

Output di atas telah menunjukkan padding 20px dan menyelaraskan teks ke tengah.

Elemen gaya 'tr'.

Di file CSS, tambahkan properti border-bottom di bawah pemilih 'tr'. Ini menetapkan ke setiap baris tabel termasuk baris judul. Misalnya, atur nilainya menjadi 2px solid darkcyan:

tr {
border-bottom: 2px solid darkcyan;
}

Setelah mengeksekusi cuplikan kode di atas, halaman web terlihat seperti ini:

Itu semua tentang cara menambahkan batas di bagian bawah setiap baris tabel '

”.

Kesimpulan

Untuk menambahkan border di bagian bawah elemen , atur properti CSS border-collapse menjadi collapse dan gunakan properti border-bottom pada elemen “”. Ini memungkinkan properti CSS untuk menerapkan batas pada tabel. Begitulah cara Anda dapat dengan mudah menambahkan border-bottom ke setiap tag “

”.

Bagaimana Cara Menambahkan Batas-Bawah ke Baris Tabel?