Kegiatan menulis dalam aktifitas blogging tidak pernah lepas dari tabel. Tabel ditampilkan untuk lebih memperjelas isi dari postingan blog yang kita buat. Tabel biasanya kita munculkan untuk jenis postingan blog yang membahas perbandingan dua hal. Agar inti pembeda dari dua hal yang diperbandingkan tersebut mudah dipahami oleh pembaca maka kita dapat membuat perbandingan tersebut dalam tampilan tabel.
Membuat tabel memang mudah, tetapi untuk menampilkannya pada blog cukup sulit. Kita harus paham kode HTML untuk merangkai tabel agar terlihat utuh. Di bawah ini merupakan contoh code html dengan css yang akan di terapkan ke blog anda.
Mungkin simple dan sederhana, tapi dengan mengetahui dasarnya saya yakin kita bisa kembangkan menjadi luar biasa.
Oke kita langsung ke TKP ya bos..hehe
Tulis Atau Copy Paste code di bawah :
Membuat tabel memang mudah, tetapi untuk menampilkannya pada blog cukup sulit. Kita harus paham kode HTML untuk merangkai tabel agar terlihat utuh. Di bawah ini merupakan contoh code html dengan css yang akan di terapkan ke blog anda.
Mungkin simple dan sederhana, tapi dengan mengetahui dasarnya saya yakin kita bisa kembangkan menjadi luar biasa.
Oke kita langsung ke TKP ya bos..hehe
Tulis Atau Copy Paste code di bawah :
Contoh 1 : Hanya Menggunakan HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:100%">
<tr>
<th><b>Nama Lengkap</b></th>
<th><b>Alamat</b></th>
<th><b>Umur</b></th>
</tr>
<tr>
<td>Luna Maya</td>
<td>Jakarta</td>
<td>38 tahun</td>
</tr>
<tr>
<td>Maikel Pesik</td>
<td>Manado</td>
<td>20 tahun</td>
</tr>
<tr>
<td>Milan Ruus</td>
<td>Bitung</td>
<td>6 tahun</td>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<body>
<table style="width:100%">
<tr>
<th><b>Nama Lengkap</b></th>
<th><b>Alamat</b></th>
<th><b>Umur</b></th>
</tr>
<tr>
<td>Luna Maya</td>
<td>Jakarta</td>
<td>38 tahun</td>
</tr>
<tr>
<td>Maikel Pesik</td>
<td>Manado</td>
<td>20 tahun</td>
</tr>
<tr>
<td>Milan Ruus</td>
<td>Bitung</td>
<td>6 tahun</td>
</tr>
</table>
</body>
</html>
Contoh 2 : Menggunakan HTML dan CSS
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<table id="t01">
<tr>
<th><b>Nama Lengkap</b></th>
<th><b>Alamat</b></th>
<th><b>Umur</b></th>
</tr>
<tr>
<td>Luna Maya</td>
<td>Jakarta</td>
<td>38 tahun</td>
</tr>
<tr>
<td>Maikel Pesik</td>
<td>Manado</td>
<td>20 tahun</td>
</tr>
<tr>
<td>Milan Ruus</td>
<td>Bitung</td>
<td>6 tahun</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<table id="t01">
<tr>
<th><b>Nama Lengkap</b></th>
<th><b>Alamat</b></th>
<th><b>Umur</b></th>
</tr>
<tr>
<td>Luna Maya</td>
<td>Jakarta</td>
<td>38 tahun</td>
</tr>
<tr>
<td>Maikel Pesik</td>
<td>Manado</td>
<td>20 tahun</td>
</tr>
<tr>
<td>Milan Ruus</td>
<td>Bitung</td>
<td>6 tahun</td>
</tr>
</table>
</body>
</html>
Hasil Contoh 1
| Nama Lengkap | Alamat | Umur |
|---|---|---|
| Luna Maya | Jakarta | 38 tahun |
| Maikel Pesik | Manado | 20 tahun |
| Milan Ruus | Bitung | 6 tahun |
Hasil Contoh 2
| Nama Lengkap | Alamat | Umur |
|---|---|---|
| Luna Maya | Jakarta | 38 tahun |
| Maikel Pesik | Manado | 20 tahun |
| Milan Ruus | Bitung | 6 tahun |
Semangat belajar dan selamat mencoba ya..!
Tabel merupakan salah satu unsur penting untuk memudahkan pembaca memahami isi konten artikel yang kita buat. Tabel akan menampilkan inti dari pembahasan tanpa perlu penjabaran yang kompleks.
Bentuk tabel yang ditampilkan hanya dapat dimodifikasi dalam batas ukuran font, jenis font, dan warna header. Kita tidak dapat melakukan modifikasi lanjutan seperti saat kita membuat tabel pada program pengolahan tabel yang sebenarnya. Meskipun demikian, tampilan tabel yang rapi dan sederhana sudah cukup untuk membuat pembaca memahami isi bacaan yang ditampilkan menggunakan tabel tersebut.
Bentuk tabel yang ditampilkan hanya dapat dimodifikasi dalam batas ukuran font, jenis font, dan warna header. Kita tidak dapat melakukan modifikasi lanjutan seperti saat kita membuat tabel pada program pengolahan tabel yang sebenarnya. Meskipun demikian, tampilan tabel yang rapi dan sederhana sudah cukup untuk membuat pembaca memahami isi bacaan yang ditampilkan menggunakan tabel tersebut.
Artikel Lainnya :
Makasih..artikelnya bermanfaat..
BalasHapus