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:

---