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.
Jika ditulis:
Hasilnya adalah:
Atau jika ditulis:
Hasilnya adalah:
Atau juga jika ditulis:
Hasilnya adalah:
Dan atau jika ditulis:
Hasilnya adalah:
<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. |
Jika ditulis:
Hasilnya adalah:
<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 |
Jika ditulis:
Hasilnya adalah:
Atau jika ditulis:
Hasilnya adalah:
Dan jika ditulis:
Hasilnya adalah:
Jika ditulis:
Hasilnya adalah:
<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:
Hasilnya adalah:
<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.
0 comments:
Tinggalkan Komentar Anda
Terimakasih telah berkunjung, untuk kritik, saran, ataupun pertanyaan, silahkan berikan komentar anda disini: