Cara bikin tabel dipostingan blog

- September 30, 2018
Dalam kegiatan blog kerap kali kita harus membuat tabel dalam postingan namun blogger tidak menyediakan fitur untuk membuat tabel maka mau tidak mau harus membuatnya sendiri.

Namun jangan panik dulu karena ada sebuah penolong yaitu menggunakan kode HTML , seperti yang kita tahu blogger support kode HTML dipostingan dan saat ini sudah ada banyak kode HTML untuk membuat tabel digoogle.

Cara bikin tabel dipostingan blog


Berikut cara untuk membuat tabel diblog.

1. Copy Code Css dibawah ini

/* CSS Post Table */table { max-width: 960px; margin: 10px auto;} caption {font-size: 1.6em; font-weight: 400; padding: 10px 0;} thead th {font-weight: 400;background: #8a97a0;color: #fff;} tr {background: #f4f7f8;border-bottom: 1px solid #fff; margin-bottom: 5px;} tr:nth-child(even) {background: #e8eeef;} th, td {text-align: left;padding: 20px;font-weight: 300;} tfoot tr {background:none;} tfoot td {padding: 10px 2px;font-size: 0.8em; font-style: italic; color: #8a97a0;}

2. Kemudian cari kode ]]></b:skin> atau </Style> kemdian tempelkan kode css tadi diatas ]]></b:skin> atau </style>

3. untuk menerapkannya dipostingan silahkan gunakan kode berikut


<table>
      <thead>
        <tr>
          <th scope="col">Nama</th>
          <th scope="col">E-mail</th>
          <th scope="col">Pekerjaan</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="3">Data di Update 2018.</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <th scope="row">Hasan</th>
          <td>hasan@example.com</td>
          <td>Blogger</td>
        </tr>
        <tr>
          <th scope="row">Mustofa</th>
          <td>mustofa@example.com</td>
          <td>Programer</td>
        </tr>
        <tr>
          <th scope="row">Ali Budiardi</th>
          <td>ali_budiardi@example.com</td>
          <td>Web Designer</td>
        </tr>
        <tr>
          <th scope="row">Nanda</th>
          <td>nanda@example.com</td>
          <td>Tester</td>
        </tr>
      </tbody>
    </table>




Semoga Bermanfaat


EmoticonEmoticon

 

Start typing and press Enter to search