Home    About    Artikel        Blog Contoh

Senin, 09 Januari 2017

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

Tidak ada komentar:

Posting Komentar