Sunday, December 17, 2017

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.




PERLU DIKETAHUI


Iklan yang tampil pada halaman situs ini sepenuhnya sudah diatur oleh Pihak Google, kami hanya menyediakan tempat kosong khusus untuk iklan dari Google. Maka, apabila ada iklan yang dirasa kurang baik bagi anda sehingga tidak seharusnya ditampilkan, harap segera menginformasikan hal tersebut kepada kami dengan melalui Formulir Kontak yang ada di bagian bawah sendiri pada situs ini. Kemudian, kami akan segera menyampaikannya pada pihak Google terkait masalah tersebut.
Laporan dapat anda sertakan lampiran :
  • Nama Iklan
  • Alamat Screenshoot(Gambar) Iklan


Load Disqus Comments Hide Disqus Comments