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 Seputar Ketramilan */
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 1	Title/Header 2
Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2
Row 3, Column 1	Row 3, Column 2
Row 4, Column 1	Row 4, Column 2
Row 5, Column 1	Row 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 1	Title/Header 2
Row 1, Column 1	Row 1, Column 2
	Row 1, Column 2.1
Row 2, Column 1	Row 2, Column 2
	Row 2, Column 2.1
Row 3, Column 1	Row 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 1	Title/Header 2
Row 1, Column 1	Row 1, Column 2
Row 1, Column 1.1
Row 2, Column 1	Row 2, Column 2
Row 2, Column 1.1
Row 3, Column 1	Row 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 HTML	Fungsi/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 Seputar Ketramilan...