Membuat tabel di blog memang gak disediakan secara default, baik itu di Blogger maupun WordPress. Tapi untung keduanya memberikan fitur HTML Editor, membuat tabel di postingan blog pun jadi semakin mudah.
| Nama | Umur | Alamat |
|---|---|---|
| Arif Syamsudin | 23 | Indonesia |
| Florence Stanley | 34 | Mexico |
Untuk membuatnya copy kode berikut:
Copy this code:
<!DOCTYPE html><html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<th><b>Nama</b></th>
<th><b>Umur</b></th>
<th><b>Alamat</b></th>
</tr>
<tr>
<td>Arif Syamsudin</td>
<td>23</td>
<td>Indonesia</td>
</tr>
<tr>
<td>Florence Stanley</td>
<td>34</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
NOTES:
- Kamu bisa mengganti font-family: arial dengan font pilihanmu.
- Untuk mengganti warna atau ketebalan border, ganti border: 1px solid #dddddd
- Ganti background-color: #dddddd untuk background strip
- Huruf berwarna biru adalah Header. Cukup tambahkan tag <th> untuk menambah jumlah kolom Header.
- Tag <tr> digunakan untuk menambahkan baris kolom baru.
- Tag <td> digunakan untuk value (warna ungu) baris baru (child) bukan Header.
- Silahkan coba dipraktekan sendiri
Tabel ini responsive, gak perlu edit width & height
- HTML ini diambil dari w3schools.com
________
featured image source is created by Arti.cf and has no-copyrights.
No comments:
Post a Comment
Komentarnya pakai akun Google saja ya! 😋