Sponsor Ads   X  
Sponsor Ads   X  

24/03/2010

TABEL SEDERHANA HTML II

Tag <tr>

Masih terkait dengan posting sebelumnya yaitu tabel sederhana html,dimana kali ini adalah akan sedikit mengulas tentang salah satu tag yang dalam penggunaanya selalu beriringan dengan tag <table> yaitu tag <tr>(table rows).
Atribut untuk tag ini antara lain:
align
Untuk menentukan perataan kanan-kiri konten dalam tabel. Pilihan nilai/value yang diperlukan adalah "left" "center" "justify" dan "right"
height
Untuk mengatur ketinggian tabel. Nilainya adalah dalam satuan piksel "px"
valign(vertical align)
Untuk menentukan perataan atas-bawah. Value/nilainya adalah, "top" "middle" "bottom" "baseline"

Lihat beberapa contoh dibawah ini.

Contoh 1 dengan align
Jika ditulis:
<table border="1">
<tr align="left"><td> Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata di sebelah kiri. </td></tr>
</table>

Hasilnya adalah:
Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata di sebelah kiri.

Atau jika ditulis:
<table border="1">
<tr align="center"><td> Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata di tengah. </td></tr>
</table>

Hasilnya adalah:
Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata di tengah.

Atau juga jika ditulis:
<table border="1">
<tr align="justify"><td> Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata kanan-kiri. </td></tr>
</table>

Hasilnya adalah:
Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata kanan-kiri.

Dan atau jika ditulis:
<table border="1">
<tr align="right"><td> Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata di kanan. </td></tr>
</table>

Hasilnya adalah:
Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata kanan.

Contoh 2 dengan height
Jika ditulis:
<table border="1" width="200px">
<tr height="100px">
<td> Tinggi tabel sama dengan dua kali lebar tabel
</td></tr>
</table>

Hasilnya adalah:
Tinggi tabel sama dengan dua kali lebar tabel

Contoh 6 dengan valign
Jika ditulis:
<table border="1" width="200px">
<tr height="100px" valign="top">
<td>
Pelanglang Maya
</td></tr>
</table>

Hasilnya adalah:
Pelanglang Maya

Atau jika ditulis:
<table border="1" width="200px">
<tr height="100px" valign="middle">
<td>
Pelanglang Maya
</td></tr>
</table>

Hasilnya adalah:
Pelanglang Maya

Dan jika ditulis:
<table border="1" width="200px">
<tr height="100px" valign="bottom">
<td>
Pelanglang Maya
</td></tr>
</table>

Hasilnya adalah:
Pelanglang Maya

Jika ditulis:
<table border="1" width="200px">
<tr height="100px" valign="baseline">
<td>
Hasil tidak tampak pada browser opera mini
</td></tr>
</table>

Hasilnya adalah:
Hasil tidak tampak pada browser opera mini

Untuk contoh berikut ini adalah tabel yang terdiri lebih dari satu baris.

Jika ditulis:
<table border="1" width="250px" cellpadding="10px">
<tr><td>Baris 1 </td></tr>
<tr><td>Baris 2 </td></tr>
<tr><td>baris 3 </td></tr>
<tr><td>Baris 4 </td></tr>
<tr><td>Baris 5 </td></tr>
</table>

Hasilnya adalah:
Baris 1
Baris 2
Baris 3
Baris 4
Baris 5


Untuk mengoptimalkan hasilnya, cobalah sendiri dengan memberikan beberapa atribut pada setiap tag.



Sebelumnya | Berikutnya

Silahkan baca juga yang ini:

0 comments:

Tinggalkan Komentar Anda

Terimakasih telah berkunjung, untuk kritik, saran, ataupun pertanyaan, silahkan berikan komentar anda disini:

 
Halaman Muka | Tentang | Kontak | Sitemap | 2008- © kakangsung All Rights Reserved