BELAJAR MENGGUNAKAN ATRIBUT DALAM TAG TABLE DI HTML

Menggunakan Atribut Tag dan Elemen TABLE - HTML

Salam kawan-kawan pembahasan sebelumnya membuat tabel dengan tag HTML, dan kali ini IJOREMBUK akan memberi pembahasan tentang cara memperindah tabel dengan atribut didalam tag/elemen tabel html.

Saya jelaskan sedikit tentang Atribut didalam html ialah sebuah fungsi maupun perintah berisi angka/kata/link yang berada dalam tag dan elemen html dan di tulis di antara tanda (" "), contoh : pada tag table (<table border="1">) atribut border="1" memiliki fungsi untuk memberi garis pada tabel dengan tingkat tebal "1px".

Oke langsung saja kita hias table dari pembahasan sebelumnya agar lebih enak di pandang dengan atribut tag table, sebagai berikut :

+ Atribut didalam tag <table>

   - border="..": tebal garis (berisi angka default ukuran pixel)

   - width="..": lebar tabel (berisi angka default ukuran pixel bisa juga %)

   - cellspacing="..": jarak antar kolom (berisi angka ukuran pixel)

   - cellpadding="..": jarak kolom antara isi (berisi angka ukuran pixel)

+ Atribut didalam elemen <tr> 

   - bgcolor="..": memberi warna tabel (berisi karakter)

+ Atribut didalam elemen <th>/<td>

   - width="..": lebar tabel (berisi angka ukuran %)

   - align="..": rata text isi (berisi kata)

kita hias table berikut :

Jika belum punya script pembahasan sebelumnya : unduh script

kita tambahkan atribut diatas didalam tag table seperti berikut :

-sebelum : <table border="1">

-menjadi : <table border="1" cellspacing="5" cellpadding="5"     width="25%">

dan kita tambahkan atribut diatas didalam elemen <tr> baris 1 dan 2 seperti berikut :

(baris 1)

-sebelum : <tr>

-menjadi : <tr bgcolor="orange">

(baris 2)

-sebelum : <tr>

-menjadi : <tr bgcolor="yellow">

dan tambahkan juga didalam elemen <th>/<td> kolom 1,3, dan 4 seperti berikut :

(baris 1, kolom 1,3 dan 4)

-sebelum : <th>

-menjadi : <th width="10%">

(baris 2 dan 3, kolom 1,3 dan 4)

-sebelum : <td>

-menjadi : <td align="center">

jika sama seperti script diatas maka hasil seperti berikut :

Penjelasan isi atribut :