dasar html (9) : membuat tabel

Tabel terdiri dari baris dan kolom, pada dokumen HTML tabel di tentukan oleh tag <table> dan untuk membuat barisnya dengan tag <tr>, serta kolom nya di tentukan oleh tag <td> kependekan dari table data, pada tag td ini yang nantinya dapat di isi dengan teks, link, gambar, dan lainnya, bahkan dapat berisi tabel lain.

<html>
<body>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
<tr>
<td>Baris 3, kolom 1</td><td>Baris 3, kolom 2</td>
</tr>
</table>
</body>
</html>

Script tersebut akan menhasilkan tabel seperti dibawah ini.

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2
Baris 3, kolom 1 Baris 3, kolom 2

Atribut Pada Tabel, Border

Border atau garis pembatas adalah atribut untuk membuat garis pada tabel HTML, tanpa atribut ini tabel pada HTML tidak akan memiliki garis-garis pembatas

<html>
<body>
<h4>Tabel tanpa atribut border</h4>
<table>
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai border 1</h4>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai border 5</h4>
<table border="5">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>

Script tersebut akan menhasilkan tabel seperti dibawah ini.

Tabel tanpa atribut border

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Tabel dengan nilai border 1

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Tabel dengan nilai border 5

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

 

Mengatur Jarak Antar Sel

Jarak antara sel pada tabel HTML diatur oleh atribut cellspacing

<html>
<body>
<h4>Tabel tanpa atribut cellspacing</h4>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai atribut cellspacing="0"</h4>
<table border="1" cellspacing="0">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai atribut cellspacing="10"</h4>
<table border="1" cellspacing="10">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>

Script tersebut akan menghaislkan:

Tabel tanpa atribut cellspacing

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Tabel dengan nilai atribut cellspacing=”0″

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Tabel dengan nilai atribut cellspacing=”10″

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Mengatur Jarak Antara konten dengan garis sel

mengatur jarak antara konten pada sel dengan batas pinggir cel tersebut dapat dilakukan dengan menambahkan atribut cellpadding

<html>
<body>

<h4>Tabel tanpa atribut cellpadding</h4>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai atribut cellpadding="10"</h4>
<table border="1" cellpadding="10">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

</body>
</html>

Script tersebut akan menhasilkan:

Tabel tanpa atribut cellpadding

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Tabel dengan nilai atribut cellpadding=”10″

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

RowSpan dan COlspan

Untuk membuat sel pada tabel yang menjangkau lebih dari satu baris atau kolom yaitu dengan memakai atribut colspans dan rowspan. Dari pada bingung lihat dan praktekan contoh dibawah

<html>
<body>

<h4>Sel yang menjangkau 2 kolom</h4>
<table border="1">
<tr>
<th>Nama</th><th colspan="2">Telepon</th>
</tr>
<tr>
<td>Heri</td><td>123456</td><td>456789</td>
</tr>
</table>

<h4>Header vertikal</h4>
<table border="1">
<tr>
<th>Nama : </td><td>Heri</td>
</tr>
<tr>
<th rowspan="2">Telepon : </th></td><td>123456</td>
</tr>
<tr>
</td><td>456789</td>
</tr>
</table>

</body>
</html>

Script Tersebut akan menghasilkan:

Sel yang menjangkau 2 kolom

Nama Telepon
Heri 123456 456789

Header vertikal

Nama : Heri
Telepon : 123456
456789

Leave a Reply

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