Dalam HTML tabel disusun secara perbaris dengan menggunakan tag <td> dan <tr>. Pola susunan sepert ini akan susah jika ingin menambahkan atribut tertentu, apalagi jika menggunakan CSS nantinya. Bila telah bisa memakai CSS untuk memanipulasi sebuah baris maka tinggal menambahkan atriut class, style atau tr sesuai selera. Baris akan berubah tampilannya sesuai yang diinginkan.
Namun untuk memberikan customisasi berdasarkan kolom akan sedikit susah. Misalnya ketika menginginkan kolom pertama berwarna merah, kolom ke dua berwarna biru dan kolom ke tiga berwarna abu-abu.
<!DOCTYPE html>
<html>
<head>
<title>ibahasa pemograman</title>
</head>
<body>
<h3>Belajar Tag colgroup </h3>
<table border="1">
<tr>
<th style="background-color:green">Judul 1</th>
<th style="background-color:yellow">Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td style="background-color:green" >Baris 1, Kolom 1</td>
<td style="background-color:yellow">Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr style="color:blue">
<td style="background-color:green">Baris 2, Kolom 1</td>
<td style="background-color:yellow">Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Tampilan akan diperoleh seperti gambar di atas. Namun memberikan warna untuk masing masing baris pada kolom 1 dan dua akan panjang jika dilakukan masing masing. Untuk itu bisa di sederhanakan kodenya dengan menggunakan tag <colgroup>. Perhatikan kode di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan tag colgroup dan col dalam Tabel</title>
</head>
<body>
<h3>Belajar Tag colgroup dan col dalam Tabel</h3>
<table border="1">
<colgroup>
<col style="background-color:yellow" />
<col style="background-color:green" />
<col />
</colgroup>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr style="color:blue">
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Dengan kode ke dua ini warna cukup didefenisikan melalui tag khusus <colgroup> seperti yang berwarna merah. Cukup sederhana bukan?
Namun untuk memberikan customisasi berdasarkan kolom akan sedikit susah. Misalnya ketika menginginkan kolom pertama berwarna merah, kolom ke dua berwarna biru dan kolom ke tiga berwarna abu-abu.
Kustomisasi Kolom pada tabel HTML
Dalam hal ini bisa menggunakan tag <colgroup>. Jika tidak tentu anda harus memberikan kustomisasi untuk masing persatu sel pada tabel dalam mengkustomisasi. Contohnya seperti berikut ini, ketika mengkostumisasi masing masing kolom.<!DOCTYPE html>
<html>
<head>
<title>ibahasa pemograman</title>
</head>
<body>
<h3>Belajar Tag colgroup </h3>
<table border="1">
<tr>
<th style="background-color:green">Judul 1</th>
<th style="background-color:yellow">Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td style="background-color:green" >Baris 1, Kolom 1</td>
<td style="background-color:yellow">Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr style="color:blue">
<td style="background-color:green">Baris 2, Kolom 1</td>
<td style="background-color:yellow">Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan tag colgroup dan col dalam Tabel</title>
</head>
<body>
<h3>Belajar Tag colgroup dan col dalam Tabel</h3>
<table border="1">
<colgroup>
<col style="background-color:yellow" />
<col style="background-color:green" />
<col />
</colgroup>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr style="color:blue">
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Dengan kode ke dua ini warna cukup didefenisikan melalui tag khusus <colgroup> seperti yang berwarna merah. Cukup sederhana bukan?
Kustomisasi Baris pada tabel HTML
Lalu bagaimana jika ingin memeri warna untuk setiap baris. Misalkan anda menginginkan tampilan seperti berikut.
Untuk tampilan seperti di atas, kostumisasi bisa dilakukan dengan mudah. Yaitu dengan menambahkan style pada masing masing <tr>. Lebih lengkap kodenya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan tag colgroup dan col dalam Tabel</title>
</head>
<body>
<h3>Belajar Tag colgroup dan col dalam Tabel</h3>
<table border="1">
<tr style="background-color:yellow" >
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr style="background-color:red" >
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr style="background-color:blue">
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Perhatikan kode yang diwarnai biru. Kode tersebut yang memberikan perintah tampilan agar untuk tiap baris diberikan kustomisasi (dalam hal background). style akan disisipkan pada tag <tr> dengan format penulisan seperti di atas. Bentuk lain kustomisasi adalah tulisan, warna huruf ( "color:blue") , jenis huruf ("font:monospace") dan ukuran huruf ("font-size: 2px").
Demikianlah cara mengelompokkan tabel dan mengkostumisasi khusus secara kolom dan secara tabel. Semoga ini bermanfaat.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment