Assalamualaikum wr wb
Hallo semuanya pengunjung blog ini, kembali lagi dengan saya di #SharingSession, hari ini saya akan sharing Membuat Table HTML,
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>, dan tag <td>:
- Tag <table> digunakan untuk memulai tabel
- Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
- Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:
Contoh penggunaan tag <table>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table cellpadding="10" border="1">
<tr>
<td> Baris 1, Kolom 1 </td>
<td> Baris 1, Kolom 2 </td>
<td> Baris 1, Kolom 3 </td>
</tr>
<tr>
<td> Baris 2, Kolom 1 </td>
<td> Baris 2, Kolom 2 </td>
<td> Baris 2, Kolom 3 </td>
</tr>
<tr>
<td> Baris 3, Kolom 1 </td>
<td> Baris 3, Kolom 2 </td>
<td> Baris 3, Kolom 3 </td>
</tr>
<tr>
<td> Baris 4, Kolom 1 </td>
<td> Baris 4, Kolom 2 </td>
<td> Baris 4, Kolom 3 </td>
</tr>
</table>
</body>
</html>
Perhatikan bahwa pada tag <table> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel dan cellpadding="10", berarti akan ada jarak tiap cell nya. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.
Beberapa contoh Tabel HTML yg sudah pernah saya buat :
<!DOCTYPE html> <html> <head> <title> Table 1</title> </head> <body> <table cellpadding="30" border="1"> <tr > <td colspan="3" > Mata Kuliah R5Q </td> </tr> <tr > <td> html</td> <td rowspan="3"> </td> <td rowspan="3"> Web 1 </td> </tr> <tr> <td> CSS </td> </tr> <tr> <td> JavaScript</td> </tr> </table> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>Table 2</title>
</head>
<body>
<table cellpadding="30" border="1">
<tr>
<td colspan="2"> Kelas R5Q </td>
</tr>
<tr >
<td> 1.TBO</td>
<td rowspan="3"><img src="Han.jpg" height="100" width="100" > </td>
</tr>
<tr>
<td > 2.PBO </td>
</tr>
<tr>
<td> 3. KBO</td>
</tr>
<tr>
<td colspan="2"> Pemrograman 1</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Table 3</title>
</head>
<body>
<table cellpadding="20" border="2">
<tr >
<td align="center" colspan="4"> R5Q </td>
</tr>
<tr >
<td rowspan="2"> R5X</td>
<td > R5T </td>
<td > R5W </td>
<td > X5N </td>
</tr>
<tr>
<td align="center" colspan="3"> X5Q </td>
</tr>
<tr>
<td > Q5Y </td>
<td align="center" colspan="3"> X5M </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Soal No.3</title>
</head>
<body>
<table cellpadding="30" border="1">
<tr>
<td align="center">Semester 5</td>
</tr>
<tr>
<td rowspan="5">
<table cellpadding="15" border="1">
<tr>
<td colspan="2" align="center"> Mata Kuliah</td>
</tr>
<tr>
<td align="center"> PBO </td>
<td align="center"> TBO </td>
</tr>
<tr>
<td align="center"> Web </td>
<td align="center"> ISBD </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Soal No.5</title>
</head>
<body>
<table cellpadding="30" border="1">
<tr>
<td colspan="2" align="center"> Home Page </td>
</tr>
<tr>
<td rowspan="3">
<table cellpadding="15" >
<tr>
<td align="center"><u> HOME</u></td>
</tr>
<tr>
<td align="center"><u> HTML </u></td>
</tr>
<tr>
<td align="center"><u> CSS </u></td>
</tr>
</table>
<td rowspan="3"><img src="Han.jpg" height="200" width="200" > </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Soal No.6</title>
</head>
<body>
<table cellpadding="50" border="1">
<tr >
<td align="center" colspan="2"> 1 </td>
</tr>
<tr>
<td align="center" rowspan="1"> 2 </td>
<td rowspan="2">
<table cellpadding="15" border="1" >
<tr>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
</tr>
<tr>
<td align="center" rowspan="2"> 7 </td>
</tr>
<tr>
<td rowspan="1">
<table cellpadding="20" border="1" >
<tr>
<td align="center"> 8</td>
<td align="center"> 9</td>
<td align="center"> 10</td>
</tr>
</table>
</tr>
<tr>
<td align="center" colspan="2"> 11 </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Soal UTS 1</title>
</head>
<body>
<table cellpadding="15" border="1" width="500" height="250">
<tr>
<td colspan="3" align="center"> FORM KOMENTAR </td>
</tr>
<tr>
<td align="right" valign="top"> Nama </td>
<td> </td>
<td><input type="text" name="Nama"></td>
</tr>
<tr>
<td align="right" valign="top"> Komentar </td>
<td> </td>
<td><textarea rows="5" cols="20"></textarea> </td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" value="Kirim"/> <input type="submit" value="Batal"/></td>
</tr>
</table>
</body>
</html>
Itu saja sharing kita untuk saat ini nantikan #SharingSession kita selanjutnya semoga bisa bermanfaat, Terima kasih Wassalamualaikum.
makasih ka ilmu nya bermanfaat..
ReplyDeleteiya sama-sama, jangan lupa di share juga yaa
Deletemakasih bang ilmu nya jos banget.. saya kebantu banget.. wauw banget dah
ReplyDeleteMaturnuhun mas sangat membantu sekali postingan mas
ReplyDelete