Membuat Table Menggunakan CSS + HTML


Membuat Table Menggunakan CSS + HTML - Alhamdulillah, sampai saat ini saya masih di berikan kesehatan dan kenikmatan menjalani hidup yang tiada tara. Puji syukur sudah semestinya saya panjatkan kehadirat Mu ya Allah... :) Pada kesempatan kali ini saya akan share sedikit tutorial mengenai cara membuat table menggunakan CSS + HTML. Sebenarnya untuk membuat sebuah table, baik yang sederhana atau yang kompleks sekalipun cukup menggunakan HTML saja sudah bisa. Namun dengan adanya penggunaan CSS ini maka tampilan dari table yang di hasilkan bisa kita maksimalkan lagi.

Tak perlu banyak kata lagi, mendingan langsung saja simak tutorial cara membuat table menggunakan CSS + HTML berikut ini dengan baik!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".


3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".


4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

/* CSS Table by Ngeposta */
table[border="1"]{
border-collapse:collapse;margin:0px;
}
table[border="1"],table[border="1"] th,table[border="1"] td{
border:1px solid #ccc;padding:2px 7px;
}
td{
vertical-align:top;
}
table[border="1"] th{
background-color:#fafafa;text-align:left;
}
.full,table.full{
width:99%;
}
table.config{
background-color:#FFF;
}
table.config td,table.config th{
border-color:#ccc;
}
table.config th{
background-color:#111;color:white;
}

5. Kemudian klik save/simpan template.

Script CSS di atas fungsinya untuk merapikan, memperindah, ataupun mengatur design tampilan dari table yang akan di buat. Nahhh, setelah itu tinggal kita buat struktur table yang kita inginkan menggunakan HTML. Perhatikan script HTML berikut ini!

Contoh 1 :
<table border="1" class="full config"><tbody>
<tr><th>Title/Header 1</th><th>Title/Header 2</th></tr>
<tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
<tr><td>Row 3, Column 1</td><td>Row 3, Column 2</td></tr>
<tr><td>Row 4, Column 1</td><td>Row 4, Column 2</td></tr>
<tr><td>Row 5, Column 1</td><td>Row 5, Column 2</td></tr>
</tbody></table>

Hasilnya :

Title/Header 1Title/Header 2
Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2
Row 3, Column 1Row 3, Column 2
Row 4, Column 1Row 4, Column 2
Row 5, Column 1Row 5, Column 2

Contoh 2 :
<table border="1" class="full config"><tbody>
<tr><th>Title/Header 1</th><th>Title/Header 2</th></tr>
<tr><td rowspan="2">Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
<tr><td>Row 1, Column 2.1</td></tr>
<tr><td rowspan="2">Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
<tr><td>Row 2, Column 2.1</td></tr>
<tr><td rowspan="2">Row 3, Column 1</td><td>Row 3, Column 2</td></tr>
<tr><td>Row 3, Column 2.1</td></tr>
</tbody></table>

Hasilnya :

Title/Header 1Title/Header 2
Row 1, Column 1Row 1, Column 2
Row 1, Column 2.1
Row 2, Column 1Row 2, Column 2
Row 2, Column 2.1
Row 3, Column 1Row 3, Column 2
Row 3, Column 2.1

Contoh 3 :
<table border="1" class="full config"><tbody>
<tr><th>Title/Header 1</th><th>Title/Header 2</th></tr>
<tr><td>Row 1, Column 1</td><td rowspan="2">Row 1, Column 2</td></tr>
<tr><td>Row 1, Column 1.1</td></tr>
<tr><td>Row 2, Column 1</td><td rowspan="2">Row 2, Column 2</td></tr>
<tr><td>Row 2, Column 1.1</td></tr>
<tr><td>Row 3, Column 1</td><td rowspan="2">Row 3, Column 2</td></tr>
<tr><td>Row 3, Column 1.1</td></tr>
</tbody></table>

Hasilnya :

Title/Header 1Title/Header 2
Row 1, Column 1Row 1, Column 2
Row 1, Column 1.1
Row 2, Column 1Row 2, Column 2
Row 2, Column 1.1
Row 3, Column 1Row 3, Column 2
Row 3, Column 1.1

Note :
Script CSS bisa anda sesuaikan sendiri, seperti background, padding, border, dll. Dan untuk script HTML silahkan perhatikan table di bawah ini :

Tag/Kode HTMLFungsi/Kegunaan
<table> </table>Untuk memulai dan mengakhiri pembuatan table
<tbody> </tbody>Untuk menampung struktur table yang anda buat
<th> </th>Untuk membuat title/judul di dalam baris/kolom table
<tr> </tr>Untuk membuat row (baris) baru / ganti baris
<td> </td>Untuk membuat column (kolom) baru / ganti kolom

Cukup sekian dulu postingan pada kesempatan kali ini, semoga postingan tentang cara membuat table menggunakan CSS + HTML ini bisa bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kesalahan/kekurangan yang ada. Salam sejahtera by ngeposta...

About Author

Muhammad Khoirul Umam

I'm a student of a famous vocational high school in Pekalogan city. My hobby is blogging, and I really enjoy it although some of my friends say that blogging is so difficult. But, for me it's very interesting and I really love it. :)

3 comments:

  1. blog nya semakin aksis aja nih . terus semangat ya ngeblognya semoga sukses :)

    Salam dari SHARE4RT

    ReplyDelete
    Replies
    1. heheeee :D TQ sob...
      salam suksesss dari NGEPOSTA

      Delete
  2. salam gan,akhir nya terpasang juga table pada postingan saya, ternyata saya belum menyimpan table css nya, makasih info dan tutorial nya

    ReplyDelete