Ketika anda ingin menampilkan data dalam bentuk kolom dan baris, maka diperlukan table. Sebelum adanya CSS, table digunakan untuk membuat layout website. Namun saat ini sudah jarang dipakai sebagai layout, karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama. Dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Untuk membuat table yang sederhana, ada 3 elemen utama, yaitu Table, TR, dan TD. Tag <table> untuk membuat tabel, kemudian diikuti dengan tag <tr> (table rows) untuk membuat baris pada tabel, lalu tag <td> (table data) untuk membuat kolom pada tabel. Kolom-kolom hasil dari <tr> dan <td> ini, disebut dengan table cell, yaitu sebagai lokasi dimana kita memasukan data-data yang akan ditampilkan.
Table dalam dokumen HTML digunakan pula untuk mengontrol tampilan informasi yang ada dalam sebuah halaman web, dan table juga dapat digunakan untuk menampilkan record-record pada database. Untuk menampilkan table, perintah dasar yang dipakai menggunakan tag sebagai berikut.
<table>...</table>
- Table Border
Salah satu atribut dalam tabel adalah border yang digunakan untuk menentukan ketebalan garis batas luar tabel. Nilai border dimulai dari 1,2,3 dan seterusnya. Semakin nilainya besar, maka batas luarnya semakin tebal. Dibawah ini adalah contoh untuk penulisan atribut border.
<html>
<head>
<title>Border</title>
</head>
<body>
<table border=2>
<tr><td>
Tabel 1 baris, 1 kolom dengan border 2
</td></tr>
</table>
</body>
</html>
- Cellspacing
Atribut berikutnya adalah cellspacing yang digunakan untuk menentukan jumlah spasi antar sel dan border. Nilai cellspacing dimulai dari 1,2,3 dan seterusnya. Semakin nilainya besar, maka ruangan sel semakin lebar. Dibawah ini adalah contoh untuk penulisan atribut cellspacing.
<html>
<head>
<title>Cellspacing</title>
</head>
<body>
<table border=2 cellspacing=3>
<tr><td>
Tabel 1 baris, 1 kolom dengan border 2, dan cellspacing 3
</td></tr>
</table>
</body>
</html>
- Cellpadding
Atribut berikutnya adalah cellpadding, menentukan jumlah spasi antara data dalam cell dan border cell. Dalam tag table, ada 3 tag yang mendefinisikan header, row, dan cells. Tag-tag tersebut adalah table header <th>, table row <tr>, dan table data <td>. Dibawah ini adalah contoh untuk penulisan atribut cellpadding.
<html>
<head>
<title>Cellpadding</title>
</head>
<body>
<table border=1 cellspacing=5 cellpadding=3>
<tr><td>Baris 1, kolom 1</td>
<td>Baris 1 kolom 2</td>
</tr>
</table>
</body>
</html>
- Width
Atribut selanjutnya width yang digunakan untuk menentukan kelebaran table dilayar monitor. Ukuran lebar ditentukan dengan pixel. Dibawah ini adalah contoh untuk penulisan atribut width.
<html>
<head>
<title>Width</title>
</head>
<body>
<table border=2 cellspacing=3 cellpadding=3 width=100%>
<tr><td>
Baris, kolom 1, border 2, cellspacing 3, cellpadding 3 dan width sebesar 100%
</td></tr>
</table>
</body>
</html>
- Table Row
<html>
<head>
<title>Baris dalam tabel</title>
</head>
<body>
<table border=2 cellspacing=3 cellpadding=3 width=100% bordercolor="navy">
<tr><th colspan=2>
Mata Kuliah</th>
Tabel 1 baris, 1 kolom dengan border 2
</tr>
<tr><td>1<td>Algoritma Pemrograman</td></tr>
<tr><td>1<td>Pemrograman Web</td></tr>
<tr><td>1<td>Sistem Basis Data</td></tr>
</table>
</body>
</html>
- Table Header
<html>
<head>
<title>Table Header</title>
</head>
<body>
<table border=1 cellspacing=5 cellpadding=5 width=100% align=center bordercolor=#3300cc>
<tr><th>NO</th>
<th>Mata Kuliah</th>
<th>Nilai</th>
</tr>
<tr><td>1</td>
<td>Aplikasi E-Commerce</td>
<td>90</td>
</tr>
<tr><td>2</td>
<td>Pemrograman Mobile</td>
<td>80</td>
</tr>
</table>
</body>
</html>
- ROWSPAN, COLSPAN, ALIGN, VALIGN
Selain table header, ada elemen table data lain yang digunakan untuk menandai awal dan akhir dari tiap sel didalam tabel. Atribut-atribut untuk elemen table data, diantaranya ROWSPAN, COLSPAN, ALIGN, dan VALIGN.
COLSPAN
Atribut colspan digunakan untuk menentukan jumlah kolom yang akan ditarik atau di merger dalam sel. Sebagai contoh, jika diberi nilai 2, maka akan menghasilkan bagian header dengan dua baris yang berisi dua sel, dan dua kolom yang berisi dua sel juga.
Contoh :
<html>
<head>
<title>Colspan</title>
</head>
<body>
<table border=2>
<tr><th colspan=2>Daftar Nama Kota</th></tr>
<tr><td>Bandung</td><td>Jakarta</td></tr>
<tr><td>Bogor</td><td>Bekasi</td></tr>
</table>
</body>
</html>
ROWSPAN
Atribut rowspan digunakan untuk menentukan jumlah baris yang akan ditarik atau di merger dalam sel. Sebagai contoh, jika rowspan diberi nilai 2, maka sel dua baris akan dihasilkan dalam satu tabel.
Contoh :
<html>
<head>
<title>Rowspan</title>
</head>
<body>
<table border=1>
<tr><th colspan=2>Daftar Buah-buahan</th></tr>
<tr><td rowspan=2>Buah Tunggal</td><td>Jeruk</td></tr>
<tr><td>Mentimun</td></tr>
<tr><td rowspan=2>Buah Ganda</td><td>Sirsak</td></tr>
<tr><td>Murbai</td></tr>
<tr><td rowspan=2>Buah Majemuk</td><td>Nanas</td></tr>
<tr><td>Jagung</td></tr>
</table>
</body>
</html>
0 Comments