Variasi HTML Table (Cara membuat tabel di blog dengan HTML)

Cara membuat tabel di blog dengan HTML

Cara membuat tabel di blog dengan HTML. Seringkali pada saat kita membuat postingan, apalagi yang berhubungan dengan data selalu dibubuhi dengan tabel sebagai prasyarat kelengkapan data yang akan kita bahas. Selain itu pada saat kita membuat widget profil di sidebar agar data tampak rapi kita juga bisa menggunakan HTML table ini.

Banyak juga situs-situs yang menawarkan pembuatan tabel otomatis, namun yang paling saya favoritkan adalah http://www.tablesgenerator.com/html_tables.

HTML Table di Blog

Ada berbagai macam variasi dalam membuat table, namun kali ini saya akan membagikan hanya beberapa. Bagaimana cara membuatnya?

Untuk membuat HTML Table sebenarnya tidak serumit membuat element properties dalam blog. Hanya dibutuhkan dasar HTML Table yang kemudian tinggal bagaimana kita memodifikasinya.

Adapun dasarnya adalah sebagai berikut.

<table>
  <tbody>
   <tr>
    <td></td>
    <td></td>
   </tr>
</tbody>
</table>

Dengan menambahkan menambahkan class pada element tersebut diatas kita bisa memodifikasinya dengan sesuka hati. Contohnya seperti dibawah ini.

First Column	Second Column
anak pitik	kutuk

<table class="tb">
  <tbody>
<tr>
    <th>First Column</th>
    <th>Second Column</th>
  </tr>
<tr>
    <td>anak pitik</td>
    <td>anak wedhus</td>
  </tr>
</tbody></table>

.tb{border-collapse:collapse;border-spacing:0;margin:0px auto;font-size:90%}
.tb th{background-color:#333;color:#fff;font-weight:normal;padding:5px 10px;border:1px solid #000;overflow:hidden;word-break:normal;}
.tb td{padding:5px 10px;border:1px solid #000;overflow:hidden;word-break:normal;}

Kita juga bisa memodifikasinya seperti di bawah ini :

First Column	Second Column
anak pitik	kutuk
anak wedhus	cempe
anak sapi	pedet
anak jaran	belo

<table class="tb2">
  <tbody>
<tr>
    <th>First Column</th>
    <th>Second Column</th>
  </tr>
  <tr>
    <td>anak pitik</td>
    <td>kutuk</td>
  </tr>
  <tr>
    <td>anak wedhus</td>
    <td>cempe</td>
  </tr>
  <tr>
    <td>anak sapi</td>
    <td>pedet</td>
  </tr>
  <tr>
    <td>anak jaran</td>
    <td>belo</td>
  </tr>
</tbody></table>

.tb2{border-collapse:collapse;border-spacing:0;margin:0px auto;font-size:90%}
.tb2 th{background-color:#333;color:#fff;font-weight:normal;padding:5px 10px;border:1px solid #000;overflow:hidden;word-break:normal;}
.tb2 td{padding:5px 10px;border:1px solid #000;overflow:hidden;word-break:normal;}
.tb2 tr:nth-child(even){background:#eee}

Kita pun juga bisa menggunakan :hover pada masing-masing kolom pada saat disorot dengan menggunakan mouse seperti contoh di bawah ini

First Column	Second Column
anak pitik	kutuk
anak wedhus	cempe
anak sapi	pedet
anak jaran	belo

<table class="tb3">
  <tbody>
<tr class='head'>
    <th>First Column</th>
    <th>Second Column</th>
  </tr>
<tr>
    <td>anak pitik</td>
    <td>kutuk</td>
  </tr>
<tr>
    <td>anak wedhus</td>
    <td>cempe</td>
  </tr>
<tr>
    <td>anak sapi</td>
    <td>pedet</td>
  </tr>
<tr>
    <td>anak jaran</td>
    <td>belo</td>
  </tr>
</tbody></table>

.tb3{border-collapse:collapse;border-spacing:0;margin:0px auto;font-size:90%}
.tb3 th{background-color:#333;color:#fff;font-weight:normal;padding:5px 10px;border:1px solid #000;overflow:hidden;word-break:normal;}
.tb3 td{padding:5px 10px;border:1px solid #000;overflow:hidden;word-break:normal;}
.tb3 tr .head:hover{background:#000}
.tb3 tr:hover{background:#eee}

Jika kita ingin membuat widget profile Organisasi di sidebar kita bisa memakai tehnik dengan menghilangkan bordernya seperti contoh di bawah.

Nama Organisasi	CV. Ayam goreng
Alamat	Jl. Ayam panggang No.1 California USA
Telp.	0123456789
email	[email protected]

<table class="tb4">
  <tbody>
<tr>
    <td>Nama Organisasi</td>
    <td>CV. Ayam goreng</td>
  </tr>
<tr>
    <td>Alamat</td>
    <td>Jl. Ayam panggang No.1 California USA</td>
  </tr>
<tr>
    <td>Telp.</td>
    <td>0123456789</td>
  </tr>
<tr>
    <td>email</td>
    <td>[email protected]</td>
  </tr>
</tbody></table>

.tb4{border-collapse:collapse;border-spacing:0;margin:0px auto;font-size:90%}
.tb4 td{padding:5px 10px;border:1px solid #000;overflow:hidden;word-break:normal;}
.tb4{color:#888;border:1px solid #000;background:#212121}
.tb4 td{padding:5px 10px;border:0px solid #000;overflow:hidden;word-break:normal;}

Sebenarnya masih banyak modifikasi-modifikasi yang bisa dibuat, tergantung bagaimana kita untuk mau bereksperimen.

Demikian tutorial membuat HTML table di Blog semoga bermanfaat. Terima kasih telah membaca artikel Agung Jaka Nugraha

Wassalam

Variasi HTML Table (Cara membuat tabel di blog dengan HTML)