Selamat datang kembali di chakra media blog. Sekarang mari kita belajar Tag table dan list di HTML. Setelah sebelumnya mempelajari tutorial HTML dasar : 8. Mengenal Hyperlink dan image di HTML, Jika belum memperlajari hyperlink dan image, silakan klik saja link diatas.
Belajar Tag Table
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.
Baik, kita langsung saja membuat contohnya :
<!doctype 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 :
<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>
<!doctype 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 :
<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>
<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 :
table,th,td{border:1px solid black;border-collapse:collapse;}
</style>
<!doctype html>Sahabat bisa lihat sendiri perbedaannya setelah save sintak diatas.
<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>
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>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 :
<html>
<head>
<title>Belajar Table dan List</title>
</head>
<body>
<ul>
<li>Jeruk</li>
<li>Anggur</li>
<li>Strawberry</li>
</ul>
</body>
</html>
list-style-type:circleContoh:
list-style-type:circle
list-style-type:square
list-style-type:none
<ul style="list-style-type:circle">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 :
<li>Jeruk</li>
<li>Anggur</li>
<li>Strawberry</li>
</ul>
<!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 :
type="1" => Tipe ini adalah tipe default yaitu nomor biasa
type="A" => Tipe ini adalah list dengan huruf kapital.
type="a" => Tipe ini adalah list dengan huruf kecil.
type="I" => Tipe ini adalah list dengan angka romawi besar.
type="i" => Tipe ini adalah list dengan angka romawi kecil.
Contoh :
<!doctype html>Coba attribut diatas satu persatu, agar sobat tau perbedaannya. Sekarang saya sudah membuat tugas untuk sahabat chakra media blog, silakan lihat gambar dibawah ini :
<html>
<head>
<title>Belajar Table dan List</title>
</head>
<body>
<ol type="I">
<li>Jeruk</li>
<li>Anggur</li>
<li>Strawberry</li>
</ol>
</body>
</html>
Tugasnya yaitu sahabat harus membuat file html persis seperti diatas. Mungkin cukup sekian postingan dari saya, terima kasih dan semoga bermanfaat.
0 komentar