Jumat, 28 Januari 2011

Menggunakan Tabel

Tabel dalam pembuatan website sangat dibutuhkan, tabel juga bisa membantu programmer dalam pembuatan template untuk tata letak bagian website seperti header dan footer, di samping itu tabel juga dapat menampilkan data dengan rapi sehingga lebih enak di pandang, dibawah ini adalah contoh kode dari tag table.

MENGGUNAKAN TABEL
Dasar Penggunaan Tabel
1
<table>.....</table>
Mengawali dan mengakhiri sebuah tabel
2
<caption>.....</caption>
Menentukan judul pada tabel
3
<tr>.....</tr>
Membuat sebuah baris dalam tabel
4
<th>.....</th>
Membuat judul kolom
5
<Td>.....</td>
Membuat sebuah sel data pada kolom
Memberi Garis Pada Tabel
1
<table border = “1”>.....</table>
Tebal garis sebesar 1
Meletakkan Judul di Bawah Tabel
1
<caption align = “bottom”>
Menampilkan judul dibawah tabel
Menentukan Warna Latar Belakang
1
<table  bgcolor = “silver” border = “10”>
.....</table>
Menambah warna latar belakang terhadap tabel
2
<td bgcolor = “pink”>.....</td>
Menambah warna latar belakang terhadap sel
Menggabungkan Sel
1
<td rowspan  = “3”>.....</td>
Menggabungkan beberapa baris sel
2
<td colspan = “2”>.....</td>
Menggabungkan beberapa kolom
3
<td colspan = “2” rowspan = “2”>.....</td>
Menggabungkan colspan dan rowspan
Mengatur Peletakan Teks Dalam Tabel <tr>, <th>, <td>
1
Align = “left”
Teks diatur rata kiri
2
Align = “center”
Teks diatur rata tengah
3
Align = “right”
Teks diatur rata kanan
Mengatur Tinggi Sel
1
<table border = “1” height = “150”>.....</table>
Mengatur tinggi tabel
2
<th height = “50”>.....</th>
Mengatur tinggi sel
Menatur Teks pada Posisi Vertikal <th>, <tr>, <td>
1
Valign = “top”
Teks diletakkan di bagian  atas pada sel
2
Valign = “middle”
Teks diletakkan di bagian tengah pada sel
3
Valign = “bottom”
Teks diletakkan di bagian bawah pada sel
Mengatur Lebar Tabel dan Sel
1
<td width = “200”>.....</td>
Mengatur lebar sel
Mengatur Jarak Pada Tabel
1
<table border = “50” cellspacing = “20” cellpadding = “10”>.....</table>






0 komentar:

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Justin Bieber, Gold Price in India