Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu 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.
Cara membuat tabel sederhana:
Untuk membuat tabel sederhana ada 3 elemen utama yaitu (table, tr, dan td)
setiap masing-masing element mempunyai fungsi:
Tag <table> berfungsi untuk membuat tabel
Tag <tr> atau Table Row berfungsi untuk membuat baris pada tabel
Tag <td> atau Table data berfungsi untuk membuat kolom pada tabel
Berikut adalah contoh yang terdiri dari 3 baris dan 2 kolom:
<html>
<body>
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
</body>
</html>
Dan hasilnya akan seperti ini :
Cara menggabungkan Kolom pada Tabel:
Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.
Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.
Berikut contoh nya :
<html>
<body>
<table border="1">
<tr>
<td colspan="2">Gabungan Kolom 1&2</td>
</tr>
<tr>
<td>Nilai 1</td>
<td>Nilai 2</td>
</tr>
<tr>
<td>Nilai 3</td>
<td>Nilai 4</td>
</tr>
</table>
</body>
</html>
Maka hasilnya akan seperti ini:
Sedangkan untuk menggabungkan baris dalam Table digunakan atribut rowspan
Berikut contohnhya:
<html>
<body>
<table border="1" align="center">
<tr>
<th rowspan="2">No</th><th colspan="3">Hari</th>
</tr>
<tr>
<th>Senin</th><th>Selasa</th><th>Rabu</th>
</tr>
<tr>
<td>1</td><td>A</td><td>B</td><td>C</td>
</tr>
</table>
</body>
</html>
Hasilnya seperti ini, lihat pada bagian NO menggunakan table rowspan:
Dan sekian sampai disini yang dapat saya sampaikan,Semoga bermanfaat :)
0 komentar:
Posting Komentar