Cara Membuat Tabel di Post atau Page sebuah Blog

Cara Membuat Tabel tersebut, masukan script ini pada tab html di sebuah Post atau Page di dashboard Blogspot atau Blogger Anda:

 

1. Untuk tampilan TABEL yang Responsif

   Responsive Table

   First Name	Last Name	Job Title	Favorite Color	Wars or Trek?	Porn Name	Date of Birth
   James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979
   The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968
   Jokey	Smurf	Giving Exploding Presents	Smurflow	Smurf	Smurflane Smurfmutt	Smurfuary Smurfteenth, 1945
   Cindy	Beyler	Sales Representative	Red	Wars	Lori Quivey	July 5, 1956
   Captain	Cool	Tree Crusher	Blue	Wars	Steve 42nd	December 13, 1982

   <div id="page-wrap" style="height: 323; width: 593;"> <h1 style="line-height: 150%; margin-bottom: 3;"> Responsive Table</h1> <table>   <thead> <tr>    <th>First Name</th>    <th>Last Name</th>    <th>Job Title</th>    <th>Favorite Color</th>    <th>Wars or Trek?</th>    <th>Porn Name</th>    <th>Date of Birth</th>   </tr> </thead>   <tbody> <tr>    <td>James</td>    <td>Matman</td>    <td>Chief Sandwich Eater</td>    <td>Lettuce Green</td>    <td>Trek</td>    <td>Digby Green</td>    <td>January 13, 1979</td>   </tr> <tr>     <td>The</td>     <td>Tick</td>     <td>Crimefighter Sorta</td>     <td>Blue</td>     <td>Wars</td>     <td>John Smith</td>     <td>July 19, 1968</td>   </tr> <tr>     <td>Jokey</td>     <td>Smurf</td>     <td>Giving Exploding Presents</td>     <td>Smurflow</td>     <td>Smurf</td>     <td>Smurflane Smurfmutt</td>     <td>Smurfuary Smurfteenth, 1945</td>   </tr> <tr>     <td>Cindy</td>     <td>Beyler</td>     <td>Sales Representative</td>     <td>Red</td>     <td>Wars</td>     <td>Lori Quivey</td>     <td>July 5, 1956</td>   </tr> <tr>     <td>Captain</td>     <td>Cool</td>     <td>Tree Crusher</td>     <td>Blue</td>     <td>Wars</td>     <td>Steve 42nd</td>     <td>December 13, 1982</td>   </tr> </tbody>  </table> </div>

   
   
   
   

2. Untuk tampilan TABEL yang tidak Responsif

   Non-Responsive Table

   First Name	Last Name	Job Title	Favorite Color	Porn Name	Date of Birth
   James	Matman	Chief Sandwich Eater	Lettuce Green	Digby Green	January 13, 1979
   The	Tick	Crimefighter Sorta	Blue	John Smith	July 19, 1968
   Jokey	Smurf	Giving Exploding Presents	Smurflow	Smurflane Smurfmutt	Smurfuary Smurfteenth, 1945
   Cindy	Beyler	Sales Representative	Red	Lori Quivey	July 5, 1956
   Captain	Cool	Tree Crusher	Blue	Steve 42nd	December 13, 1982

   <div align="center"> <div id="page-wrap" style="height: 276; width: 518;"> <h1 style="line-height: 150%; margin-bottom: 3;"> Non-Responsive Table</h1> <center>    <table>   <tbody> <tr>    <th>First Name</th>    <th>Last Name</th>    <th>Job Title</th>    <th>Favorite Color</th>    <th>Porn Name</th>    <th>Date of Birth</th>   </tr> <tr>    <td>James</td>    <td>Matman</td>    <td>Chief Sandwich Eater</td>    <td>Lettuce Green</td>    <td>Digby Green</td>    <td>January 13, 1979</td>   </tr> <tr>     <td>The</td>     <td>Tick</td>     <td>Crimefighter Sorta</td>     <td>Blue</td>     <td>John Smith</td>     <td>July 19, 1968</td>   </tr> <tr>     <td>Jokey</td>     <td>Smurf</td>     <td>Giving Exploding Presents</td>     <td>Smurflow</td>     <td>Smurflane Smurfmutt</td>     <td>Smurfuary Smurfteenth, 1945</td>   </tr> <tr>     <td>Cindy</td>     <td>Beyler</td>     <td>Sales Representative</td>     <td>Red</td>     <td>Lori Quivey</td>     <td>July 5, 1956</td>   </tr> <tr>     <td>Captain</td>     <td>Cool</td>     <td>Tree Crusher</td>     <td>Blue</td>     <td>Steve 42nd</td>     <td>December 13, 1982</td>   </tr> </tbody></table> </center> </div> </div>

    

 

Lalu masukan Script TABEL ini ke Tambah CSS di dashboard Blogspotatau Blogger Anda:

/* Tabel Orange di Blogspot */     * {     margin: 0;     padding: 0; } body {     font: 12px/1.4 Georgia, Serif; text-align: justify; } #page-wrap {     margin: 10px; } p {     margin: 20px 0; }     /*     Generic Styling, for Desktops/Laptops     */     table {         width: 100%;         border-collapse: collapse;     }     /* Zebra striping */     tr:nth-of-type(odd) {         background: #F8DD9A; /* warna orange muda*/     }     th {         background: #523C05; /* warna orange tua*/         color: white;         font-weight: bold;     }     td, th {         padding: 6px;         border: 1px solid #000; /* warna orange hitam*/         text-align: left;     }

Hasilnya seperti ini:

Tampilannya akan seperti ini kalau dilihat di browser Internet Explorer (IE)

Tampilannya akan seperti ini kalau dilihat di broser  Firefox (Mozila) dan Chrome

dan hasilnya seperti ini, jika kolom pada tabelnya banyak:

Jika ingin tampilan warna Tabelnya seperti gambar dibawah ini:

Maka script CSS diatas diubah menjadi seperti ini:
 

/* Tabel Biru di Blogspot */ * {     margin: 0;     padding: 0; } body {     font: 14px/1.4 Georgia, Serif; } #page-wrap {     margin: 50px; } p {     margin: 20px 0; }     /*     Generic Styling, for Desktops/Laptops     */     table {         width: 100%;         border-collapse: collapse;     }     /* Zebra striping */     tr:nth-of-type(odd) {         background: #eee;     }     th {         background: #333;         color: white;         font-weight: bold;     }     td, th {         padding: 6px;         border: 1px solid #ccc;         text-align: left;     }

SUMBER:

https://css-tricks.com/responsive-data-tables

SELESAI, SELAMAT MENCOBA !!!

NOTE:

Anda tinggal mengganti Judul Tabel dan isinya sesuai dengan yang diinginkan