Home » Belajar HTML » Tutorial HTML 9 - Membuat Tabel

Tutorial 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>
Coba di sini! >>>

Contoh diatas akan menghasilkan tabel seperti dibawah

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

Atribut 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>
Coba di sini! >>>

Judul Tabel

Membuat judul atau header pada tabel memakai tag <th>, tag ini akan menampilkan teks menjadi tebal dan posisi di tengah.


<html>
<body>

<h4>Header tabel</h4>
<table border="1">
<tr>
<th>Nama</th><th>Telepon</th><th>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>Telepon : </th></td><td>123456</td>
</tr>
<tr>
<th>Telepon : </th></td><td>456789</td>
</tr>
</table>

</body>
</html>
Coba di sini! >>>

Mengatur Jarak Antara 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>
Coba di sini! >>>

Penting: Kebanyakan tabel pada umumnya tidak diberi jarak antara sel-selnya, tapi pada tabel HTML secara default akan menghasilkan jarak antara sel, jadi jika ingin membuat tabel secara umum (tanpa jarak antara sel) berikan atribut cellspacing dengan nilai nol (cellspacing="0").

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>
Coba di sini! >>>

Sel yang Menjangkau Lebih Dari Satu Baris Atau Kolom

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>
Coba di sini! >>>

Menambah Keterangan Pada Tabel

Untuk menambahkan keterangan berupa teks pada tabel yaitu dengan menggunakan tag <caption>.

<html>
<body>

<table border="1">
<caption>Pendapatan bulanan</caption>
<tr>
<th>Bulan</th><th>Pendapaatan</th>
</tr>
<tr>
<td>Januari</td><td>Rp 3.000.000</td>
</tr>
<tr>
<td>Februari</td><td>Rp 5.000.000</td>
</tr>
</table>

</body>
</html>
Coba di sini! >>>

Atribut Frame

Atribut ini di gunakan untuk mengatur border atau batasan pada tabel 
<html>
<body>

<h4>Dengan atribut frame="border"</h4>
<table frame="border">
<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>Dengan atribut frame="box"</h4>
<table frame="box">
<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>Dengan atribut frame="void"</h4>
<table frame="void">
<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>Dengan atribut frame="above"</h4>
<table frame="above">
<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>Dengan atribut frame="below"</h4>
<table frame="below">
<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>Dengan atribut frame="hsides"</h4>
<table frame="hsides">
<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>Dengan atribut frame="vsides"</h4>
<table frame="vsides">
<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>Dengan atribut frame="lhs"</h4>
<table frame="lhs">
<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>Dengan atribut frame="rhs"</h4>
<table frame="rhs">
<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>
Coba di sini! >>>

Jika kalian tidak melihat semua border pada hasil contoh di atas, berarti browsernya tidak mendukung atribut frame

Tag Lain di Dalam Tabel

Tag td (tabel data) pada tabel dapat mengandung elemen HTML lainnya termasul tabel 

<html>
<body>

<table border="1">
<tr>
<td>
<h1>Judul</h1>
<p>Ini paragraf</p>
<p>Dan ini paragraf lainnya</p>
</td>
<td>Sel ini mengandung tabel
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>

<tr>
<td>Pada sel ini ter dapat daftar
<ul>
<li>Burung</li>
<li>Kelinci</li>
<li>Ikan</li>
</ul>
</td>
<td>Teks biasa</td>
</tr>
</table>

</body>
</html>
Coba di sini! >>>

Tag Colgroup dan Col

Tag <colgroup>

Digunakan untuk mengelompolkan kolom pada tabel untuk di fornat. Tag ini hanya bisa digunakan di dalam elemen <table>

<html>
<body>

<table border="1">
<colgroup span="2" style="background-color:red;"></colgroup>
<colgroup style="background-color:green;">

<tr>
<th>Nomor</th><th>Nama barang</th><th>Harga</th>
</tr>



<tr>

<td>1</td><td>CPU</td><td>Rp3.000.000</td>

</tr>



<tr>

<td>2</td><td>Monitor</td><td>Rp1.000.000</td>

</tr>





</table>

</body>
</html>
Coba di sini! >>>

Tag <col>

Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam sebuah tabel, hampir sama dengan colgroup tapi tag col ini adalah tag tunggal
Tag col hanya dapat di gunakan didalam elemen <table> atau <colgroup>.

<hml>
<body>

<table border="1">
<colgroup>
<col style="background-color:blue; width:100px;" />
<col span="2" style=" background-color:red; width:200px;" />
</colgroup>

<tr>
<th>Nama</th><th>ID</th><th>Kota</th>
</tr>



<tr>

<td>Heru</td><td>1234567</td><td>Bandung</td>

</tr>



<tr>

<td>Randi</td><td>7654321</td><td>Jakarta</td>

</tr>

</table>

</body>
</html>
Coba di sini! >>>

Tag <thead> <tbody> dan <tfoot>

<html>
<body>

<table border="1">
<tfoot>
<tr>
<td>Jumlah</td><td>25</td>
</tr>
</tfoot>





<thead>



<tr>

<th>Nama</th><th>Nilai</th>

</tr>



</thead>

</tbody>


<tr>

<td>Heru</td><td>8</td>

</tr>



<tr>

<td>Randi</td><td>9</td>

</tr>





<tr>

<td>Sandi</td><td>8</td>

</tr>

</tbody>



</table>

</body>
</html>
Coba di sini! >>>

Pada contoh diatas bisa kita lihat untuk bagian judul <thead> di letakan ditengah, isi (tbody) dibawah, dan untuk kaki (tfoot) di paling atas. Tapi pada hasilnya akan tetap berurut yaitu kepala, isi lalu kaki.

Jumlah25
NamaNilai
Heru8
Randi9
Sandi8







Label:
Diposting oleh Unknown di 14.46

1 komentar:

Edu Tutorial mengatakan...

nice share

4 Mei 2013 pukul 19.59

Posting Komentar

Langganan: Posting Komentar (Atom)
 
© 2012 Alusplus | Blogger.com