Tutorial HTML Bag 11: Tabel, Colspan dan Rowspan
Tutorial HTML Bag 11: Tabel, Colspan dan Rowspan| Tutorial HTML ini dibuat untuk melengkapi bahan ajar materi pemrograman website dasar untuk SMK, melengkapi tutorial sebelumnya.
Kali ini kita akan belajar membuat tabel menggunakan HTML, nantinya akan dibahas dengan contoh antara lain pengenalan baris dan kolom, colspan (menggabungkan kolom), rowspan (menggabungkan baris), mengatur tinggi-lebar tabel, dan lainnya.
Tabel dalam HTML
Untuk membuat Tabel dalam HTML syntak dasarnya:
<html>
<head>
<title>syntak dasar tabel</title>
<body>
<table>
<tr> <!--tag baris-->
<td>Kolom</td><!--sel data-->
</tr>
</table>
</body>
</head>
</html>
Tag-tag dalam Tabel
Untuk membuat garis (border:) pada tabel:
<table border = "1">
Angka 1 merupakan nilai pada border, jika tidak disertakan maka nilai dianggap sama dengan nol. Alias garis tidak akan ditampilkan.
Contoh:
<html>
<head>
<title>Contoh Tabel Dengan Border</title>
<body>
<table border="1">
<tr>
<td>Baris ke 1 Kolom Ke 1</td>
</tr>
<tr>
<td>Baris ke 2 Kolom Ke 1</td>
</tr>
</table>
</body>
</head>
</html>
Contoh Tabel dalam HTML
Perhatikan contoh tabel berikut:
Menampilkan Tabel 3 baris 2 kolom:
<html>
<head>
<title>syntak dasar tabel</title>
<body>
<table border="1">
<tr>
<td>Baris ke 1 Kolom ke 1</td>
<td>Baris ke 1 Kolom ke 2</td>
</tr>
<tr>
<td>Baris ke 2 Kolom ke 1</td>
<td>Baris ke 2 Kolom ke 2</td>
</tr>
<tr>
<td>Baris ke 3 Kolom ke 1</td>
<td>Baris ke 3 Kolom ke 2</td>
</tr>
</table>
</body>
</head>
</html>
Mengatur Tinggi dan Lebar Tabel
Kita akan membuat tabel dengan ketentuan:
<head>
<title>Mengatur tinggi dan lebar</title>
<body>
<table border="1" align="center">
<!--baris ke 1-->
<tr height="50px">
<td width="200px">Baris ke 1 kolom ke 1</td>
<td width="400px">Baris ke 1 kolom ke 2</td>
</tr>
<!---baris ke 2-->
<tr>
<td>Baris ke 1 kolom ke 1</td>
<td>Baris ke 1 kolom ke 2</td>
</tr> </table>
</body>
</head>
</html>
Menggabungkan kolom (Rowspan)
Tag untuk menggabungkan kolom pada tabel / colspan, syntaks dasarnya:
<table border="1">
<tr>
<td colspan="2">Baris ke 1 kolom ke 1</td>
<!--penulisan tag untuk membuat kolom ke 2 pada baris ke 1 dihilangkan--->
</tr>
<tr>
<td>Baris ke 2 kolom ke 1</td>
<td>Baris ke 2 kolom ke 2</td>
</tr>
</table>
Contoh Colspan
Kita akan membuat sebuah tabel dengan ketentuan:
<head>
<title>Contoh Colspan</title>
<body>
<table border="1">
<tr height="50px">
<td colspan="3"> Baris ke 1 Kolom ke 1,2</td>
<!--tag kol ke 2 dihilangkan-->
</tr>
<tr>
<td> Baris ke 2 Kolom ke 1</td>
<td width="600px"> Baris ke 2 Kolom ke 2</td>
</tr>
<tr>
<td> Baris ke 3 Kolom ke 1</td>
<td> Baris ke 3 Kolom ke 2</td>
</tr>
</table>
</body>
</head>
</html>
Menggabungkan baris (Rowspan)
Tag untuk rospan:
<html>
<head>
<title>contoh rowspan</title>
<body>
<table border="1">
<tr>
<td rowspan="2">Baris ke 1 kol ke 1</td>
<td>Baris ke 1 kol ke 2</td>
</tr>
<tr>
<!---tag baris ke 2 kol 1 dihilangkan--->
<td>Baris ke 2 kol ke 2</td>
</tr>
</table>
</body>
</head>
</html>
Contoh Rowspan
Kita akan membuat tabel dengan ketentuan:
<head>
<title>Contoh Rowspan</title>
<body>
<table border="1">
<tr>
<td rowspan="3">Baris ke 1 kol ke 1</td>
<td width="600px">Baris ke 1 kol ke 2</td>
</tr>
<tr>
<!---tag baris ke 2 kol ke 1 dihilangkan--->
<td>Baris ke 2 kol ke 2</td>
</tr>
<tr>
<!---tag baris ke 3 kol ke 1 dihilangkan--->
<td>Baris ke 3 kol ke 2</td>
</tr> </table>
</body>
</head>
</html>
Demikian tutorial kali ini, selanjutnya kita akan belajar membuat layout.
Kali ini kita akan belajar membuat tabel menggunakan HTML, nantinya akan dibahas dengan contoh antara lain pengenalan baris dan kolom, colspan (menggabungkan kolom), rowspan (menggabungkan baris), mengatur tinggi-lebar tabel, dan lainnya.
Tabel dalam HTML
Untuk membuat Tabel dalam HTML syntak dasarnya:
<html>
<head>
<title>syntak dasar tabel</title>
<body>
<table>
<tr> <!--tag baris-->
<td>Kolom</td><!--sel data-->
</tr>
</table>
</body>
</head>
</html>
Tag-tag dalam Tabel
- <table>...</table> tag untuk mengawali dan mengakhiri sebuah tabel
- <tr>....</tr> tag untuk membuat sebuah baris dalam tabel
- <td>.....</td> tag untuk membuat sebuah sel data
- <th>......</th> tag untuk membuat judul kolom
- <caption>.....</caption> tag untuk membuat judul tabel
Untuk membuat garis (border:) pada tabel:
<table border = "1">
Angka 1 merupakan nilai pada border, jika tidak disertakan maka nilai dianggap sama dengan nol. Alias garis tidak akan ditampilkan.
Contoh:
<html>
<head>
<title>Contoh Tabel Dengan Border</title>
<body>
<table border="1">
<tr>
<td>Baris ke 1 Kolom Ke 1</td>
</tr>
<tr>
<td>Baris ke 2 Kolom Ke 1</td>
</tr>
</table>
</body>
</head>
</html>
Contoh Tabel dalam HTML
Perhatikan contoh tabel berikut:
Menampilkan Tabel 3 baris 2 kolom:
<html>
<head>
<title>syntak dasar tabel</title>
<body>
<table border="1">
<tr>
<td>Baris ke 1 Kolom ke 1</td>
<td>Baris ke 1 Kolom ke 2</td>
</tr>
<tr>
<td>Baris ke 2 Kolom ke 1</td>
<td>Baris ke 2 Kolom ke 2</td>
</tr>
<tr>
<td>Baris ke 3 Kolom ke 1</td>
<td>Baris ke 3 Kolom ke 2</td>
</tr>
</table>
</body>
</head>
</html>
Mengatur Tinggi dan Lebar Tabel
- Untuk mengatur keseluruhan tabel:
<table border="1" width="75%"> - Untuk mengatur tinggi dan lebar kolom tertentu:
---menampilkan lebar keseluruhan tabel---
<table border="1" width="75%">
---menampilkan tinggi baris---
<tr height="250px">
---menampilkan lebar kolom---
<td width="300px">Text dalam kolom 1</td>
</tr>
</table>
Kita akan membuat tabel dengan ketentuan:
- Tinggi baris pada baris pertama = 50px, baris kedua dan ketiga normal
- Lebar pada kolom pertama = 200px, kolom kedua 400px
<head>
<title>Mengatur tinggi dan lebar</title>
<body>
<table border="1" align="center">
<!--baris ke 1-->
<tr height="50px">
<td width="200px">Baris ke 1 kolom ke 1</td>
<td width="400px">Baris ke 1 kolom ke 2</td>
</tr>
<!---baris ke 2-->
<tr>
<td>Baris ke 1 kolom ke 1</td>
<td>Baris ke 1 kolom ke 2</td>
</tr> </table>
</body>
</head>
</html>
Menggabungkan kolom (Rowspan)
Tag untuk menggabungkan kolom pada tabel / colspan, syntaks dasarnya:
<table border="1">
<tr>
<td colspan="2">Baris ke 1 kolom ke 1</td>
<!--penulisan tag untuk membuat kolom ke 2 pada baris ke 1 dihilangkan--->
</tr>
<tr>
<td>Baris ke 2 kolom ke 1</td>
<td>Baris ke 2 kolom ke 2</td>
</tr>
</table>
Contoh Colspan
Kita akan membuat sebuah tabel dengan ketentuan:
- 3 baris, 2 kolom
- kolom ke 1 dan 2 pada baris pertama digabungkan, tinggi kolom 50 px
- kolom ke 2 lebarnya 600px
<head>
<title>Contoh Colspan</title>
<body>
<table border="1">
<tr height="50px">
<td colspan="3"> Baris ke 1 Kolom ke 1,2</td>
<!--tag kol ke 2 dihilangkan-->
</tr>
<tr>
<td> Baris ke 2 Kolom ke 1</td>
<td width="600px"> Baris ke 2 Kolom ke 2</td>
</tr>
<tr>
<td> Baris ke 3 Kolom ke 1</td>
<td> Baris ke 3 Kolom ke 2</td>
</tr>
</table>
</body>
</head>
</html>
Menggabungkan baris (Rowspan)
Tag untuk rospan:
<html>
<head>
<title>contoh rowspan</title>
<body>
<table border="1">
<tr>
<td rowspan="2">Baris ke 1 kol ke 1</td>
<td>Baris ke 1 kol ke 2</td>
</tr>
<tr>
<!---tag baris ke 2 kol 1 dihilangkan--->
<td>Baris ke 2 kol ke 2</td>
</tr>
</table>
</body>
</head>
</html>
Contoh Rowspan
Kita akan membuat tabel dengan ketentuan:
- 3 baris 2 kolom
- baris ke 1,2,3 pada kolom ke 1 digabungkan
- Lebar kolom ke 2 adalah 600px
<head>
<title>Contoh Rowspan</title>
<body>
<table border="1">
<tr>
<td rowspan="3">Baris ke 1 kol ke 1</td>
<td width="600px">Baris ke 1 kol ke 2</td>
</tr>
<tr>
<!---tag baris ke 2 kol ke 1 dihilangkan--->
<td>Baris ke 2 kol ke 2</td>
</tr>
<tr>
<!---tag baris ke 3 kol ke 1 dihilangkan--->
<td>Baris ke 3 kol ke 2</td>
</tr> </table>
</body>
</head>
</html>
Demikian tutorial kali ini, selanjutnya kita akan belajar membuat layout.
No comments