Cara Membuat Table Pada HTML Secara Lengkap

Cara Membuat Table Pada HTML Secara Lengkap

Table - Mungkin kita tidak asing dengan kata table apabila kita sering menggunakan salah satu aplikasi Microsoft Office Excel, yaitu aplikasi untuk membantu para pekerja dalam merekap angka, bayaran, daftar hadir, nilai dll yang mengharuskan sebuah table untuk memisah antara satu nilai dengan nilai lainnya. Cell pada Adapun Excell adalah penamaan untuk setiap satu table, sedangkan untuk penggabungan beberapa cell di excell menggunakan istilah Marge(Penggabungan). hal ini berbeda dengan pengkodean untuk membuat sebuah penggabungan sebuah table dengan table lainnya pada HTML.
Istilah yang dipakai adalah Colspan dan Rowspan.

Colspan adalah pengkodean pada HTML untuk penggabungan table berdasarkan kolom kiri ke kanan table.
Rowspan adalah pengkodean pada HTML untuk penggabungan table berdasarkan table dari satu kolom atas sampai kolom kebawah yang sama.

Kolom 

Berikut ini merupakan cara beserta kodenya :

<table border="1" style="width: 700px;">

<tr>
<td> Baris 1 Kolom 1 </td>
<td> Baris 1 Kolom 2 </td>
</tr>

</table>

Maka, kode diatas akan menjadikan sebuah baris dengan 2 kolom, ibaratkan barisan sholat itu hanya satu baris dan terdapat 2 orang yang satu baris tersebut. maka apabila anda ingin menambahkan kolom kekanan maka tambhlah <td> Baris 1 Kolom 3</td> dan seterusnya.

Baris

Kemudian apabila anda ingin menambahkan baris maka anda harus menambah atribut <tr> beserta kawannya. Seperti berikut ini :

<table border="1" style="width: 700px;">

<tr>
<td> Baris 1 Kolom 1 </td>
<td> Baris 1 Kolom 2 </td>
</tr>

<tr>
<td> Baris 2 Kolom 1 </td>
<td> Baris 2 Kolom 2 </td>
</tr>

</table>

Kode diatas akan memiliki 4 tabel yang masing masing 2 table, yaitu baris 1 mempunyai 2 table dan baris 2 terdapat 2 table. ini ibaratkan sholat yang makmumnya ada 4 yaitu baris pertama diisi 2 orang dan dilanjutkan baris dibelakangnya 2 orang. anda dapat menambahkan baris sesuai keinginan anda dengan menambahkan kode <tr> beserta kawannya.

Penggabungan Kolom

Penggabungan kolom juga sangat diperlukan untuk anda yang membutuhkan gabungan kolom, Yaitu satu baris yang sebelumnya berisi dua tabel maka pada satu baris akan memiliki satu table.
Berikut ini merupakan caranya :

<table border="1" style="width: 700px;">

<tr>
<td colspan="2"> Baris 1 Kolom 1 & 2 </td>
// <td> Baris 1 Kolom 2 </td> // Maka kode ini dihilangkan beserta //nya karena sudah digabung pada pengkodean colspan sebelumnya yaitu penggabungan table yang berada pada baris yang sama.
</tr>

<tr>
<td> Baris 2 Kolom 1 </td>
<td> Baris 2 Kolom 2 </td>
</tr>

</table>

dengan begitu maka baris paling atas yang mempunyai 2 kolom akan menjadi 1 baris namun dibawahnya tetap diikuti oleh 2 kolom kebawah. Colspan berlaku untuk baris yang sama.

Penggabungan Baris

Penggabungan Baris juga sangat diperlukan untuk anda yang membutuhkan gabungan baris, Yaitu satu kolom yang sebelumnya berisi dua tabel maka pada satu kolom hanya akan memiliki satu table.
Berikut ini merupakan pengkodeannya :

<table border="1" style="width: 700px;">

<tr>
<td rowspan="2"> Baris 1 & 2 Kolom 1 </td>
<td> Baris 1 Kolom 2 </td>
</tr>

<tr>
// <td> Baris 2 Kolom 1 </td> // Maka kode ini dihilangkan beserta //nya karena sudah digabungkan pada pengkodean rowspan sebelumnya yaitu penggabungan table yang berada pada kolom yang sama.
<td> Baris 2 Kolom 2 </td>
</tr>

</table>

dengan begitu maka kolom 1 yang mempunyai 2 baris akan menjadi 1 kolom kebawah yang bergabung namun disampingnya tetap diikuti oleh 2 baris kesamping. rowspan berlaku untuk kolom yang sama.

Keterangan Tambahan :
border="1" dapat anda ubah sesuai selera anda, angka 1 menunjukan ketebalan dari border/ketebalan garis table, semakin besar nilai maka akan semakin tebal pula garis yang ada.
style="width: 700px" itu sama dengan width="700", anda lebih baik menggunakan cara kiri apabila anda dalam website blogger, dan cara kanan untuk website sendiri atau HTML sendiri. adapun angka 700 mewakili lebar dari semua kolom, anda dapat menyesuaikan besar kecilnya sesuai keinginan dan keadaan website anda.

Itulah Cara Membuat Table Pada HTML Secara Lengkap pada HTML atau Blogger.
Semoga dapat memberikan anda wawasan dan juga ilmu sehingga anda dapat membuat table secara mudah pada website atau blog anda.
Sekian dan Terimakasih.