Tutorial Tabel HTML: Mengenal Atribut border, cellpadding, dan cellspacing dalam Tabel HTML

Halo gan. Postingan 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.

Kita sudah pernah membahas cara membuat tabel di HTML. Kalau lupa dan ingin lihat lagi, bisa lihat di Tutorial HTML untuk Pemula: 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.

mengenal atribut border, cellpadding, cellspacing

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 border, cellpadding, dan cellspacing

Atribut cellpadding pada tag <table>

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>

mengenal atribut border, cellpadding, cellspacing

Atribut cellspacing pada tag <table>

Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi bagian dalam dengan bagian luar.


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>

atribut border, cellpadding, dan cellspacing

Itulah atribut border, cellpadding, dan cellspacing dalam tabel HTML. Sekarang sudah tau kan kegunaannya?

Selanjutnya, kita akan membahas perbedaan rowspan dengan colspan dalam tabel HTML.



0 Komentar untuk "Tutorial Tabel HTML: Mengenal Atribut border, cellpadding, dan cellspacing dalam Tabel HTML"