Mengenal atribut border, cellpadding dan cellspacing dalam Tabel HTML
Setelah sebelumnya pada tutorial HTML dasar kita mempelajari cara membuat tabel di HTML, pada tutorial kali ini kita akan mempelajari penggunaan atribut border, cellpadding dan cellspacing dalam tabel.
Atribut border, cellpadding dan cellspacing digunakan untuk mengubah tampilan tabel, terutama berkaitan dengan border dan spasi diantara sel tabel.
Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai border=”3″, maka web browser akan menampilkan garis tepi sebesar 3 pixel pada sisi atas, bawah, kiri dan kanan tabel.
Berikut adalah contoh penggunaan atribut border dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut border dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut border dalam Tabel</h3>
<table border="0">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="6">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Dengan memberikan nilai ‘0’ kepada atribut border, tabel seolah-olah tidak memiliki garis tepi.
Perhatikan bahwa jika anda mengubah border=”1″ menjadi border=”5″ misalnya, maka garis border yang terkena efek hanya border pada sisi luar tabel, namun tidak untuk garis border di dalam tabel.
Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellpadding="2", maka web browser akan membuat jarak sebesar 2 pixel dari border sisi dalam tabel dengan isi text tabel.
Berikut contoh penggunaan atribut cellpadding dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellpadding dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut cellpadding dalam Tabel</h3>
<table border="1" cellpadding="0">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="1" cellpadding="8">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Pengaturan cellpadding yang tepat akan membuat isi text tabel menjadi lebih rapi dan mudah dibaca.
Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellspacing="5", maka web browser akan menampilkan jarak sebesar 5 pixel diantara garis border tabel.
Berikut contoh penggunaan atribut cellspacing dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellspacing dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut cellspacing dalam Tabel</h3>
<table border="1" cellspacing="0">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="1" cellspacing="8">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Menggabungkan ketiga atribut tersebut dalam sebuah tabel, maka kita dapat menyesuaikan tampilan tabel sesuai dengan keinginan kita.
Atribut border, cellpadding dan cellspacing digunakan untuk mengubah tampilan tabel, terutama berkaitan dengan border dan spasi diantara sel tabel.
Atribut border dalam tabel HTML
Atribut border digunakan untuk mengatur ketebalan dari garis tepi (border) dari tabel. Jika atribut ini tidak ditulis, maka web browser akan menampilkan tabel tanpa garis tepi.Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai border=”3″, maka web browser akan menampilkan garis tepi sebesar 3 pixel pada sisi atas, bawah, kiri dan kanan tabel.
Berikut adalah contoh penggunaan atribut border dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut border dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut border dalam Tabel</h3>
<table border="0">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="6">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Belajar HTML atribut border dalam Tabel
Dengan memberikan nilai ‘0’ kepada atribut border, tabel seolah-olah tidak memiliki garis tepi.
Perhatikan bahwa jika anda mengubah border=”1″ menjadi border=”5″ misalnya, maka garis border yang terkena efek hanya border pada sisi luar tabel, namun tidak untuk garis border di dalam tabel.
Atribut cellpadding dalam tabel HTML
Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel itu sendiri.Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellpadding="2", maka web browser akan membuat jarak sebesar 2 pixel dari border sisi dalam tabel dengan isi text tabel.
Berikut contoh penggunaan atribut cellpadding dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellpadding dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut cellpadding dalam Tabel</h3>
<table border="1" cellpadding="0">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="1" cellpadding="8">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Pengaturan cellpadding yang tepat akan membuat isi text tabel menjadi lebih rapi dan mudah dibaca.
Atribut cellspacing dalam tabel HTML
Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar.Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellspacing="5", maka web browser akan menampilkan jarak sebesar 5 pixel diantara garis border tabel.
Berikut contoh penggunaan atribut cellspacing dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellspacing dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut cellspacing dalam Tabel</h3>
<table border="1" cellspacing="0">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
<table border="1" cellspacing="8">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Menggabungkan ketiga atribut tersebut dalam sebuah tabel, maka kita dapat menyesuaikan tampilan tabel sesuai dengan keinginan kita.
Post a Comment