Contoh tabel html |
Tabel HTML dapat dibuat dengan menggunakan tag <table> dan tag terkait seperti <tr>, <th>, dan <td>. Berikut adalah contoh kode untuk membuat tabel sederhana dengan menggunakan HTML:
```
<table>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Jalan Sudirman 123</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>Jalan Thamrin 456</td>
</tr>
</table>
```
Penjelasan kode:
- Tag <table> digunakan untuk menandai awal dan akhir dari tabel.
- Tag <tr> digunakan untuk menandai suatu baris dalam tabel.
- Tag <th> digunakan untuk menandai sel header.
- Tag <td> digunakan untuk menandai sel data.
Jika tidak ingin Bersusah payah, Silahkan salin tempel kode di bawah ini, hanya tinggal edit dan di tambah menu apabila kurang lengkap.
<html>
<head>
<title>Gustina Nur</title>
</head>
<body>
<marquee>------------------------->Halaman Web Sederhana ini Merupakan <b>"Tugas 1"</b>... Mata Kuliah <b>"Pemrogaman Web"</b><----------------------------- </marquee>
<table width="520" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#339900" bgcolor="violet">
<tr bgcolor="silver">
<th colspan="3" height="65">
<p>DATA BIODATA SAYA</p>
</th>
</tr>
<tr>
<td width="153"><b>NAMA</b></td>
<td width="23"><div align="center" >:</div></td>
<td width="326"> Gustina Nur Arifiyani </td>
</tr>
<tr>
<td><b>NPM</b></td>
<td><div align="center" >:</div></td>
<td> 1412110152</td>
</tr>
<tr>
<td><b>ANGKATAN</b></td>
<td><div align="center" >:</div></td>
<td> /B</td>
</tr>
<tr>
<td><b>TTL</b></td>
<td><div align="center" >:</div></td>
<td> Pemalang,11-14-2012</td>
</tr>
<tr>
<td><b>ALAMAT</b></td>
<td><div align="center" >:</div></td>
<td> jalan simalakam gang 10</td>
</tr>
<tr>
<td height="175"><b>RIWAYAT PENDIDIKAN </b></td>
<td><div align="center" >:</div></td>
<td><p> A.PENDIDIKAN FORMAL </p>
<table width="284" align="center" bordercolor="#000000">
<tr>
<td > i . SD/MI </td>
<td >:</td>
<td > SDN Sukomoro ll </td>
</tr>
<tr>
<td > ii . SMP/MTS </td>
<td >:</td>
<td > SMPN 1 Sukomoro </td>
</tr>
<tr>
<td > iii . SMA/SMK </td>
<td >:</td>
<td > SMAN 1 Nganjuk</td>
</tr>
</table>
<p > B. NON FORMAL : DEWAN AMBALAN, OSIS</p>
</td>
</tr>
<tr>
<td><b>EMAIL</b></td>
<td><div align="center" >:</div></td>
<td>contohwae@gmail.com</td>
</tr>
<tr>
<td><b>HOMEPAGE/BLOG</b></td>
<td><div align="center" >:</div></td>
<td> http://www.mastewe.com</td>
</tr>
<tr>
<td><b>HOBBY</b></td>
<td><div align="center" >:</div></td>
<td> Makan Jasuke</td>
</tr>
<tr bgcolor="silver">
<td height="23" colspan="3"><p><hr></p>
</td>
</tr>
<tr>
<td><b>DESKRIPSI PRIBADI</b></td>
<td align="center">:</td>
<td> Manis, Ramah dan Tidak Sombong</td>
</tr>
<tr>
<td><b>FOTO PROFIL </b></td>
<td align="center">:</td>
<td><div align="center"><img src="Gustina nur.png" alt="Gustina nur" width="250" height="200"></div></td>
</tr>
</table>
</body>
</html>
Dalam contoh kode di atas, tabel terdiri dari tiga kolom yaitu No., Nama, dan Alamat. Baris pertama merupakan header yang terdiri dari tiga sel header. Baris selanjutnya merupakan data dengan tiga sel data yang masing-masing diisi dengan nomor, nama, dan alamat.