Tabel HTML merupakan salah satu fitur yang sangat berguna dalam membuat halaman web yang informatif. Selain itu, menggunakan tabel dapat mempermudah pengguna dalam membaca dan memahami informasi yang terdapat pada sebuah halaman web. Salah satu cara untuk mempercantik tabel HTML adalah dengan menambahkan border pada tabel dan sel-sel di dalamnya.
Di dalam HTML, ada beberapa atribut yang dapat digunakan untuk menambahkan border pada tabel dan sel. Berikut adalah panduan lengkap untuk menambahkan border pada tabel dan sel di dalamnya.
Tutorial Sebelumnya: Table HTML: Pengertian Dan Cara Penggunaanya
Menambahkan Border pada Tabel
Untuk menambahkan border pada tabel, Anda dapat menggunakan atribut border. Nilai yang diberikan pada atribut ini adalah jumlah piksel yang ingin Anda gunakan untuk membuat border pada tabel. Contoh penggunaan atribut border pada tabel adalah sebagai berikut:
1 2 3 4 5 6 7 8 9 10 | <table border="1"> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> </tr> </table> |
Dalam contoh di atas, tabel akan memiliki border dengan ketebalan satu piksel. Anda dapat mengubah nilai atribut border untuk mengatur ketebalan border yang diinginkan.
Menambahkan Border pada Sel
Selain menambahkan border pada tabel, Anda juga dapat menambahkan border pada sel di dalam tabel. Terdapat dua atribut yang dapat digunakan untuk menambahkan border pada sel, yaitu border dan cellpadding.
Atribut border
Untuk menambahkan border pada sel menggunakan atribut border, Anda harus menambahkan atribut ini pada setiap elemen td atau th di dalam tabel.
Nilai yang diberikan pada atribut ini adalah jumlah piksel yang ingin Anda gunakan untuk membuat border pada sel. Contoh penggunaan atribut border pada sel adalah sebagai berikut:
1 2 3 4 5 6 7 8 9 10 | <table> <tr> <td border="1">Baris 1, Kolom 1</td> <td border="1">Baris 1, Kolom 2</td> </tr> <tr> <td border="1">Baris 2, Kolom 1</td> <td border="1">Baris 2, Kolom 2</td> </tr> </table> |
Dalam contoh di atas, setiap sel akan memiliki border dengan ketebalan satu piksel.
Atribut cellpadding
Selain menggunakan atribut border, Anda juga dapat menambahkan border pada sel dengan menggunakan atribut cellpadding. Atribut cellpadding digunakan untuk menambahkan jarak antara isi sel dan border pada sel. Contoh penggunaan atribut cellpadding pada sel adalah sebagai berikut:
1 2 3 4 5 6 7 8 9 10 | <table border="1"> <tr> <td cellpadding="10">Baris 1, Kolom 1</td> <td cellpadding="10">Baris 1, Kolom 2</td> </tr> <tr> <td cellpadding="10">Baris 2, Kolom 1</td> <td cellpadding="10">Baris 2, Kolom 2</td> </tr> </table> |
Dalam contoh di atas, setiap sel akan memiliki border dengan ketebalan satu piksel dan jarak antara isi sel dan border sebesar 10 piksel.
Menambahkan Border pada Tabel dan Sel dengan CSS
Selain menggunakan atribut HTML, Anda juga dapat menambahkan border pada tabel dan sel dengan CSS. Berikut adalah contoh penggunaan CSS untuk menambahkan border pada tabel dan sel di dalamnya:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <style> table { border-collapse: collapse; } th, td { border: 1px solid black; padding: 10px; } </style> <table> <tr> <th>Baris 1, Kolom 1</th> <th>Baris 1, Kolom 2</th> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> </tr> </table> |
Dalam contoh di atas, CSS digunakan untuk mengatur style tabel dan sel di dalamnya. Atribut border-collapse digunakan untuk menggabungkan border sel-sel yang bertemu sehingga terlihat lebih rapi. Selain itu, atribut border dan padding juga digunakan untuk menambahkan border dan jarak antara isi sel dengan border.
Demikianlah panduan lengkap untuk menambahkan border pada tabel dan sel di dalamnya dalam HTML.
Dengan menambahkan border pada tabel dan sel, halaman web Anda akan terlihat lebih rapi dan informatif. Semoga panduan ini bermanfaat bagi Anda dalam membuat halaman web yang menarik dan informatif.
Tutorial Berikutnya: Tutorial Belajar HTML Text Formatting
0 comments