Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya
» » Table Style Berbeda-beda

Table Style Berbeda-beda

Oleh
Table Style Berbeda-beda - Sebelumnya Sinahu Coding sudah membahas tentang Table Colspan dan Rowspan, di sana juga sudah dibahas keterangan-keterangan tag yang dipakai dalam membuat table dengan HTML. Sekarang kita lanjutkan dengan cara membuat beberapa table style berbeda-beda. Artinya, antara satu table dengan table lainnya akan terlihat tidak sama.

Menyajikan data dengan cara table style yang berbeda-beda seperti ini sangat bermanfaat untuk memudahkan pembaca mencerna data yang ingin disampaikan melalui table. Terutama jika data yang disajikan memang sangat penting, rumit, dan perlu untuk dipilah-pilah. Baik dari segi bentuk, warna, maupun data.

Sebagai contoh, di bawah ini saya hanya akan menyajikan dua table dengan style/gaya yang berbeda. Untuk beberapa table yang lebih banyak nanti bisa konco sinahu kembangkan sendiri.

Contoh Membuat Table Style Berbeda-beda



<!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: yellow;
}

table#t02 {
    width: 100%;    
    background-color: red;
}
</style>
</head>

<body>

<table id="t01">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>  
    <th>Umur</th>
  </tr>
  <tr>
    <td>Jono</td>
    <td>Joni</td>  
    <td>50</td>
  </tr>
  <tr>
    <td>Joko</td>
    <td>Joki</td>  
    <td>45</td>
  </tr>
  <tr>
    <td>Yanto</td>
    <td>Sutono</td>  
    <td>30</td>
  </tr>
</table>

<br>

<table id="t02">
    <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>  
    <th>Umur</th>
  </tr>
  <tr>
    <td>Jono</td>
    <td>Joni</td>  
    <td>50</td>
  </tr>
  <tr>
    <td>Joko</td>
    <td>Joki</td>  
    <td>45</td>
  </tr>
  <tr>
    <td>Yanto</td>
    <td>Sutono</td>  
    <td>30</td>
  </tr>
</table>
</body>
</html>

Hasilnya akan terlihat seperti di bawah ini :

Nama Depan Nama Belakang Umur
Jono Joni 50
Joko Joki 45
Yanto Sutono 30

Nama Depan Nama Belakang Umur
Jono Joni 50
Joko Joki 45
Yanto Sutono 30

Tidak sulit ya? Silahkan konco sinahu kembangkan sendiri untuk versi table yang lebih banyak. Jika sudah sukses bisa share ke sini.


0 Komentar untuk "Table Style Berbeda-beda"

Back To Top