Dasar Pembuatan Tabel

by Iman Tumorang , at 9:31 PM , have 0 comments
Dasar Pembuatan Tabel

Ehm.., sedikit  basa-basinya yang ternyata sangat basi. -_-

Baiklah, Tabel seperti yang kita ketahui terdiri dari baris dan kolom,
dan untuk itu, dalam HTML pembuatan tabel juga di dasarkan pada baris dan kolom.

Layaknya valid HTML, selalu di awali dengan tag pembuka, dan di tutup dengan tag penutup.

untuk tabel, :


<table>
...........</table>

Nah, sekarang untuk membuat baris dan kolomnya yaitu dengan menggunakan "table row" dan "table data".
Untuk tag HTMLnya



<tr>
<td>
.......</td>
</tr>

dimana: <tr> merupakan tabel row
<td> merupakan tabel data

Berikut contoh tabel sederhana:
Gambar Terposting

Untuk tabel diatas kode htmlnya adalah sebagai berikut:

<table border="1" bgcolor="cyan" width="50%" height="50%" >
<tr><td> Data 1</td> <td> Data 2</td> </tr>
<tr> <td> Data 3 </td> <td> Data 4 </td> </tr>
</table>



Syaratnya pembuatan colom dan baris adalah,
pertama kita membuat tabel row, lalu tabel data.
Jumlah tabel data, yang kita masukkan akan menentukan jumlah kolom pada tabel kita.

Berikut beberapa tag  yang cukup sering digunakan dalam pembuatan tabel di HTML.


1. border   ------>  untuk membuat border tabel.
 <table border="1"> ............ </table> 

2. width ------> untuk mengatur lebar tabel
<table width="50%">...... </table> 

3. height    ------> untuk mengatur tinggi tabel
 <table height="50%"> ...... </table> 

4. bgcolor  ------> untuk mengatur warna background tabel
<table bgcolor="#DCDCDC">..... </table> 

5. cellspacing -------> untuk mengatur jarak antar sel
<table cellspacing="1">.......</table> 

6. cellpadding --------> untuk mengatur jarak antar sel dengan isi sell atau data yang di dalamnya.
<table cellpadding="1">........</table> 

7. align ------> untuk mengatur  posisi tabel pada halaman, terdapat 4 pilihan: center, left , right, justify
<table align="center">........</table> 

8. valign ------> untuk mengatur posisi table secara vertikal.
<table valign="center">........</table> 

9. backgorund --------> untuk mengatur latar belakang tabel dengan menggunakan gambar
<table background="N3.png">........ </table> 


Penggunaan Colspan dan Rowspan

1.Colspan

Colspan fungsinya untuk menggabungkan beberapa kolom pada tabel sesuai jumlah yang kita inginkan.
dan penggunaannya pada tag <td> dengan menambahkan colspan
<table> <tr> <td colspan="2">.................</td> </tr> </table> 

contoh
Gambar Terposting

untuk bentuk table diatas sourcenya adalah sbb:
<table border="1" width="50%" height="50%" bgcolor="cyan">
<tr> <td colspan="2"> Data ku </td> </tr>
<tr> <td> data 1 </td> <td>data 2 </td> </tr>
<tr> <td> data 3 </td> <td> data 3 </td> </tr>
</table>


2. Rowspan
Berbeda dengan colspan, rowspan fungsinya untuk mengabungkan 2 baris pada tag <td>
Format:

<table><tr> <td rowspan="2"> </td>............ </tr></table>


Contoh:
Gambar Terposting
untuk soucenya :
<table border="1" width="50%" height="50%" bgcolor="cyan">
<tr><td rowspan="2"> Dataku </td> <td>Data 1 </td> <td> Data 2 </td> </tr>
<tr> <td> Data 3 </td> <td> Data 4 </td> </tr>


Nah, Demikianlah tutorial dasar dalam pembuatan Tabel secara sederhana. Untuk tingkat selanjutnya, bisa kita latih bersama.
Karena semua berawal dari Niat.... :)


Referensi:
Diktat_Website_Development_IT_DeL.pdf


sumber: http://nyit-nyit.net

Iman Tumorang
Dasar Pembuatan Tabel - written by Iman Tumorang , published at 9:31 PM, categorized as Education , Tips . And have 0 comments
No comment Add a comment
Cancel Reply
GetID
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger