Mengenal Atribut Border, Cellpadding dan Cellspacing dalam Tabel HTML

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.
<!DOCTYPE html>
02 <html>
03   <head>
04     <title>Penggunaan atribut border</title>
05   </head>
06   <body>
07     <table border="0">
08       <tr>
09         <td>A1</td>
10         <td>A2</td>
11         <td>A3</td>
12       </tr>
13       <tr>
14         <td>B1</td>
15         <td>B2</td>
16         <td>B3</td>
17       </tr>
18     </table>
19     
20
21     <table border="10">
22       <tr>
23         <td>A1</td>
24         <td>A2</td>
25         <td>A3</td>
26       </tr>
27       <tr>
28         <td>B1</td>
29         <td>B2</td>
30         <td>B3</td>
31       </tr>
32     </table>
33   </body>
34 </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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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="7">
    <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>

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=”2″, maka web browser akan menampilkan jarak sebesar 2 pixel diantara garis border tabel.

Baca Juga : Keuntungan mmepunyai Website Sendiri

Berikut contoh penggunaan atribut cellspacing dalam tag table HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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="7">
    <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>

Leave a Reply

Your email address will not be published. Required fields are marked *