Table adalah sebuah tag yang digunakan untuk membuat tabel. Tag table ini akan sering kita gunakan dalam aplikasi web ataupun website. Tag table ini cukup mudah untuk dikuasai asalkan kita mengerti konsep awalnya saja.
<!doctype html>
<html>
<head>
<title>Belajar Table dan List</title>
</head>
<body>
<table style="width:100%">
<tr>
<th> Nama Depan </th>
<th> Nama Tengah </th>
<th> Nama Akhir </th>
</tr>
<tr>
<td> Chakra </td>
<td> Bernat </td>
<td> Yusuf </td>
</tr>
</table>
</body>
</html>
Coba sobat buat dan lihat di web browser. Loh kok namanya tag table tapi yang muncul data tilisannya saja ?? tenang nanti saya akan jelaskan. Sekarang saya akan jelaskan dulu fungsi tag diatas. Tag
<table> => ini adalah tag pembukan untuk membuat sebuah tabel,
<tr> => tr ini singkatan dari
table rows tag ini berfungsi untuk menambahkan baris pada tabel,
<th> => th singkatan dari
table headings tag ini berfungsi untuk menambahkan data heading atau judul data didalam tabel, dan
<td> => td singkatan dari
table data tag ini berfungsi untuk menambahkan data didalam tabel. Setelah mengetahui fungsi dari tag diatas, saya akan coba menjelaskan pembahasan tadi yaitu, kenapa di tag table hanya tampil datanya saja tidak ada garis tabelnya ? untuk membuat garis tabel kita bisa menambahkan properti border di style atau attribut border di table. Silakan sobat edit file htmlnya :
<!doctype html>
<html>
<head>
<title>Belajar Table dan List</title>
<style>
table,th,td{border:1px solid black;}th{text-align:left}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th> Nama Depan </th>
<th> Nama Tengah </th>
<th> Nama Akhir </th>
</tr>
<tr>
<td> Chakra </td>
<td> Bernat </td>
<td> Yusuf </td>
</tr>
</table>
</body>
</html>
Sekarang save dan coba lihat di web browser, border atau garis tabel akan nampak.Tapi garisnya akan membagi semuanya bukan satu garis seperti tabel pada umumnya. Mari kita buka lagi file htmlnya dan tambahkan sintak berikut :
<style>
table,th,td{border:1px solid black;border-collapse:collapse;}
</style>
Sobat tinggal tambah di tag style =>
border-collapse:collapse; , lihat perbedaannya. Agar judul tabelnya berada di sebelah kiri kita tambahakan di tag style
th{text-align:left} , coba sobat lihat di web browser. Di tag table ini ada attribut yang sering dipakai yaitu
colspan dan
rowspan. Attribut colspan gunanya menggabungkan kolom atau tag <td>/<th> dan rowspan gunanya menggabungkan row atau <tr>. langsung kita lihat contohnya :
<!doctype html>
<html>
<head>
<title>Belajar Table dan List</title>
<style>
table,th,td{border:1px solid black;}td{text-align:center}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th rowspan="2"> Nama </th>
<th colspan="2"> Daerah </th>
</tr>
<tr> <th> Asal </th>
<th> Sekarang </th>
</tr>
<tr> <td> Chakra </td>
<td> Soreang </td>
<td> Bandung </td>
</tr>
</table>
</body>
</html>
Sahabat bisa lihat sendiri perbedaannya setelah save sintak diatas.
Belajar Tag List
Sekarang kita akan Belajar tag list di html. Tag list ini ada 2, yaitu unordered list atau <ul> dan ordered list <ol>. Pertama kita belajar unordered list terlebih dahulu. Unordered list adalah list yang tidak berdasarkan urutan. Kalau masih bingung lihat saja contoh sintaknya :
<!doctype html>
<html>
<head>
<title>Belajar Table dan List</title>
</head>
<body>
<ul>
<li>Jeruk</li>
<li>Anggur</li>
<li>Strawberry</li>
</ul>
</body>
</html>
Cobalah buat file baru dengan disintak diatas, kita akan melihat seperti point atau titik sebelum teks. Kita bisa ganti point atau titiknya itu bisa dengan kotak, dan lain-lain, silakan coba attribut style di tag ul berikut :
list-style-type:circle
list-style-type:circle
list-style-type:square
list-style-type:none
Contoh:
<ul style="list-style-type:circle">
<li>Jeruk</li>
<li>Anggur</li>
<li>Strawberry</li>
</ul>
Silakan sahabat coba satu persatu. Sekarang mari kita belajar ordered list atau ol. Ordered list adalah list yang dibuat untuk data berurutan. Langsung ke contohnya :
<!doctype html>
<html>
<head>
<title>Belajar Table dan List</title>
</head>
<body>
<ol>
<li>Jeruk</li>
<li>Anggur</li>
<li>Strawberry</li>
</ol>
</body>
</html>
Coba save file tersebut dan lihat di browser sobat. Itu adalah contoh ordered list, sekarang mari kita ganti angkanya dengan yang lain engan menambahkan attribut type di tag ol, berikut daftar attribut type yang bisa digunakan di tag ol :
Tugasnya yaitu sahabat harus membuat file html persis seperti diatas. Mungkin cukup sekian postingan dari saya, terima kasih dan semoga bermanfaat.
