Postingan tentang atribut tabel HTML ini adalah postingan pertama di sesi Tutorial Tabel HTML setelah sebelumnya kita menyelesaikan pembahasan di sesi Tutorial Formating Text HTML. Di sesi ini, kita akan membahas seputar tabel di HTML.
Sebelumnya kita sudah pernah membahas bagaimana cara membuat tabel. Kalau lupa dan ingin lihat lagi, bisa lihat di pembahasan membuat tabel di HTML.
Untuk membuat tabel di HTML, tag yang digunakan adalah tag <table>, tag <tr>, dan tag <td>. Tag <table> merupakan tag pembuka untuk membuat tabel, tag <tr> merupakan tag pembuat baris di tabel, dan tag <td> sebagai pembuat kolom data di tabel.
Di postingan kali ini, kita akan bahas beberapa atribut yang dimiliki oleh tag <table>, yakni atribut border, cellpadding, dan cellspacing. Ketiga atribut tersebut digunakan untuk mengubah tampilan tabel.
Atribut tabel HTML
Atribut border pada tag <table>
Atribut border digunakan untuk membuat garis tepi pada tabel. Secara default, atau tidak kita tulis atribut border, maka web browser akan menampilkan tabel tanpa garis. Berlaku juga bila kita isi atribut border dengan nilai 0.
Nilai dari atribut border berupa angka. Angka ini memiliki ukuran satuan dalam pixel. Garis tepi ini akan muncul pada sisi atas, kanan, bawah, dan kiri tabel.
Semakin besar nilai atributnya, semakin besar pula ketebalan garis tepi luar tabel. Garis tabel sisi dalam tidak ikut berubah menjadi tebal.
Berikut contoh penggunaan atribut border.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut border</title>
</head>
<body>
<table border="0">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
<br/>
<table border="10">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
</body>
</html>
Atribut tabel HTML cellpadding
Atribut cellpadding digunakan untuk mengatur jarak isi teks tabel dengan garis dalam tabel yang memuat isi teks tersebut.
Nilai dari atribut ini juga berupa angka yang berukuran satuan dalam pixel. Penggunaan atribut cellpadding ini dapat memperbagus tampilan tabel. Tabel menjadi lebih rapi dan mudah dibaca.
Berikut contoh penggunaannya.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellpadding</title>
</head>
<body>
<table border="1" cellpadding="0">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
<br/>
<table border="1" cellpadding="10">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
</body>
</html>
Atribut cellspacing pada tag <table>
Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi bagian dalam dengan bagian luar.
Sama halnya dengan atribut border dan cellpadding, nilai dari atribut cellspacing juga berukuran satuan dalam pixel.
Berikut contoh penggunaannya.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellpadding</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td>A1</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
<br/>
<table border="1" cellspacing="10">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
</body>
</html>
Itulah atribut border, cellpadding, dan cellspacing dalam tabel HTML. Sekarang sudah tau kan kegunaannya? Sekian pembahasan kali ini tentang atribut tabel HTML dan semoga bisa bermanfaat untuk Anda.
