Cara Menciptakan Grup Kolom Pada Tabel Html (Tag Colgroup Dan Col)
Tuesday, February 9, 2016
Add Comment
Pada artikel kali ini kita akan membahas Cara Membuat Grup Kolom Pada Tabel HTML dengan memakai tag
Penggunaan dan Penulisan Tag
Tag
Berikut ini penulisan tag
Terlihat pada gambar diatas, tampilan kolom tabel tersebut mempunyai warna latar belakang, itu sebab Saya menambahkan atribut
Berikut ini penulisan atribut
Pada teladan isyarat HTML diatas, Saya memakai atribut
Nah, jikalau 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 :
Terlihat pada gambar diatas kolom kedua pada tabel tersebut tidak mempunyai warna latar belakang alias default, itu sebab Saya tidak menambahkan atribut
Pada artikel selanjutnya kita akan mempelajari Cara Menampilkan Garis Pembatas didalam Tabel HTML.
<colgroup> dan <col>. Penggunaan dan Penulisan Tag <colgroup> dan <col>
Tag <colgroup> dipakai untuk memasukkan grup kolom didalam tabel sedangkan tag <col> dipakai untuk menunjukkan kolom didalam tabel. Anda sanggup mengisi tag <col> dengan atribut style untuk 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 sebab Saya menambahkan atribut
style="background: //Warna;" pada masing-masing tag col yang dipakai untuk mengubah warna latar belakang pada kolom tabel tersebut. Anda juga sanggup memakai atribut width untuk 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 teladan isyarat HTML diatas, Saya memakai atribut
width untuk mengatur lebar dari kolom tersebut, contohnya aku mengisi tag <col> yang pertama dengan atribut width="50px" maka jikalau dibuka dibrowser kolom tabel yang pertama mempunyai lebar sebesar 50px. Untuk pembahasan lebih lanjut perihal atribut style dan width akan dijelaskan pada artikel yang terpisah.Nah, jikalau 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 sebab Saya tidak menambahkan atribut
style="background: //warna;" pada tag <col> yang kedua.Pada artikel selanjutnya kita akan mempelajari Cara Menampilkan Garis Pembatas didalam Tabel HTML.
0 Response to "Cara Menciptakan Grup Kolom Pada Tabel Html (Tag Colgroup Dan Col)"
Post a Comment