<colgroup> dan <col>. Penggunaan dan Penulisan Tag <colgroup> dan <col>
Tag <colgroup> dipakai untk memasukkan grup kolom didalam tabel sedangkan tag <col> dipakai untk mengatakan kolom didalam tabel. Anda sanggup mengisi tag <col> dengan atribut style untk merubah tampilan pada setiap kolom tabel.Berikut ini penulisan tag
<colgroup> dan <col> di dalam tabel HTML :<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <table border="1"> <colgroup> <col style="background: lightpink;"/> <col style="background: lightgreen;"/> <col style="background: lightblue;"/> </colgroup> <tr> <th>No</th> <th>Barang</th> <th>Harga</th> </tr> <tr> <td>1</td> <td>Kaos kaki</td> <td>Rp 10.000</td> </tr> <tr> <td>2</td> <td>Tas</td> <td>Rp 50.000</td> </tr> <tr> <td>3</td> <td>Sepatu</td> <td>Rp 30.000</td> </td> <tr> <td colspan="2">Total Harga</td> <td>Rp 90.000</td> </tr> </table> </body> </html>
Terlihat pada gambar diatas, tampilan kolom tabel tersebut mempunyai warna latar belakang, itu alasannya Saya menambahkan atribut
style="background: //Warna;" pada masing-masing tag col yang dipakai untk mengubah warna latar belakang pada kolom tabel tersebut. Anda juga sanggup memakai atribut width untk mengatur lebar pada setiap kolom tabel.Berikut ini penulisan atribut
width didalam tag <col> :<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <table border="1"> <colgroup> <col style="background: lightpink;" width="50px"/> <col style="background: lightgreen;" width="100px"/> <col style="background: lightblue;" width="150px"/> </colgroup> <tr> <th>No</th> <th>Barang</th> <th>Harga</th> </tr> <tr> <td>1</td> <td>Kaos kaki</td> <td>Rp 10.000</td> </tr> <tr> <td>2</td> <td>Tas</td> <td>Rp 50.000</td> </tr> <tr> <td>3</td> <td>Sepatu</td> <td>Rp 30.000</td> </td> <tr> <td colspan="2">Total Harga</td> <td>Rp 90.000</td> </tr> </table> </body> </html>
Pada pola isyarat HTML diatas, Saya memakai atribut
width untk mengatur lebar dari kolom tersebut, contohnya aku mengisi tag <col> yang pertama dengan atribut width="50px" maka kalau dibuka dibroser kolom tabel yang pertama mempunyai lebar sebesar 50px. Untuk pembahasan lebih lanjut perihal atribut style dan width akan dijelaskan pada article yang terpisah.Nah, kalau Anda ingin mengubah tampilan warna latar belakang pada kolom tabel yang pertama dan ketiga saja tanpa mengubah tampilan warna latar belakang pada kolom tabel yang kedua Anda sanggup menulis isyarat HTML ibarat ini :
<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <table border="1"> <colgroup> <col style="background: lightpink;"/> <col/> <col style="background: lightblue;"/> </colgroup> <tr> <th>No</th> <th>Barang</th> <th>Harga</th> </tr> <tr> <td>1</td> <td>Kaos kaki</td> <td>Rp 10.000</td> </tr> <tr> <td>2</td> <td>Tas</td> <td>Rp 50.000</td> </tr> <tr> <td>3</td> <td>Sepatu</td> <td>Rp 30.000</td> </td> <tr> <td colspan="2">Total Harga</td> <td>Rp 90.000</td> </tr> </table> </body> </html>
Terlihat pada gambar diatas kolom kedua pada tabel tersebut tidak mempunyai warna latar belakang alias default, itu alasannya Saya tidak menambahkan atribut
style="background: //warna;" pada tag <col> yang kedua.Pada article selanjutnya kita akan mempelajari Trik Menampilkan Garis Pembatas didalam Tabel HTML. Sumber https://mas-abdi.blogspot.com/
No comments:
Post a Comment