Cara Penggunaan Atribut Border, Cellpadding dan Cellspacing dalam Tabel HTML

Fungsi dan cara penggunaan atribut border, cellpadding dan cellspacing dalam Tabel HTML
Pada tutorial dasar HTML kita sudah belajar membuat tabel dengan html, tabel yang kita buat dalam tutorial tersebut masih sederhana, kita masih bisa memanipulasi tampilan tabel tersebut dengan memakai Atribut border, cellpadding dan cellspacing. dalam tutorial ini saya juga akan menambahkan style css kedalam tabel, sehingga tampilan tabel lebih profesional dipandang. Bagaimana caranya?

Atribut border dalam tabel HTML

Jika anda sering menggunakan Microsoft Word untuk pasti akan mengerti arti dari atribut border ini, Atribut border digunakan untuk mengatur ketebalan garis tepi dari tabel. Web browser akan menampilkan tabel tanpa garis jika atribut ini tidak ditulis.
Atribut border ini akan membuat garis atas, bawah, kiri, kanan tabel.
Nilai dari atribut ini dalam bentuk angka, Penulisan nya border="2"  dengan angka 2 ini browser akan menampilkan garis sebesar 2 pixel.
Warna garis juga bisa dibuat sesuai keinginan dengan memakan atribut bordercolor.

Contoh border tabel html

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut border dalam Tabel</title>
</head>
<body>
<table border="0">
 <h3>Contoh Tabel tanpa border atau nilai 0</h3>
<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="5">
 <h3>Contoh border memakai nilai 5</h3>
<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 border="1" bordercolor="red">
<tr>
 <h3>Contoh border yang berwarna</h3>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
</table>
</body>
</html>

Jika nilai dari atribut border 0 maka garis pada table tidak akan kelihatan.

Sebenarnya kita bisa membuat border ini dengan css caranya pun sangat gampang, hapus atribut border pada tag table, kemudian masukaan style css ini dibawah tag <head>

<style>
table, th, td {
border: 1px solid black;
}
</style>

jangan lupa jalankan… lihat hasilnya sama kan?

Atribut cellpadding dalam tabel HTML

Atribut cellpadding berfungsi untuk mengatur jarak dari garis sisi dalam tabel dengan text isi tabel.
Pembuat Nilai dari atribut cellpadding sama dengan cara pembuatan nilai pada atribut border. Diukur dengan pixel memakai angka.

Contoh Atribut cellpadding dalam table html

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan atribut cellpadding dalam Tabel</title>
</head>
<body>
<h3>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>

Cellpadding cocok digunakan untuk merapikan table agar text dalam tabel mudah dibaca. tidak terlalu rapat dengan garis.

cellpadding akan terlihat lebih indah jika kita memakai css padding. caranya hapus tulisan border=”1″ cellpadding=”0″ kemudian tambahkan style css ini ke dalam tag <head>

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>

kemudian jalankan.. dan lihat hasilnya.

Atribut cellspacing dalam tabel HTML

Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi dalam dan luar. Pemberian nilainya masih sama seperti atribut diatas.

Contoh Cellspacing

<!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>
sama seperti atribut cellpadding cellspacing juga bisa kita atur menggunakan css, dalam css namanya bukan cellspacing tapi border-spacing, cara merubahnya hapus text border="1" cellspacing="0" kemudian masukan style dibawah ini kedalam tag <head>

<style>
table, th, td {
    border: 1px solid black;
    padding: 5px;
}
table {
    border-spacing: 15px;
}
</style>

kemudian jalankan dan lihat perbuhannya.

Dengan menyatukan ketiga atribut diatas akan membuat tabel terlihat lebih rapi, dan kita bisa membuat tampilan tabel sesuai dengan keinginan. lebih kompleks dan terlihat profesional.

Keyword:

  • cellspacing dan cellpadding pada table html
  • atribut cellpading digunakan untuk apa

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas