Baca Juga
Tampilan tabel yang diinginkan
Saya ingin membuat tampilan tabel dengan warna background seperti contoh dibawah dengan menggunakan CSS dan html.
CSS dan HTML
Untuk membuat tampilan tabel seperti diatas, adalah sebagai berikut :
<style>
#tabel3 {
width:80%;
border: 3px solid lightblue;
}
#tabel3 tr:nth-child(even) {
background-color: #f2f2f2;
}
#tabel3 tr:nth-child(odd) {
background-color: #f3d9c0;
}
#tabel3 th {
height:25px;
background-color: #f38ec0;
border-bottom: 2px solid lightblue;
color : white;
}
#tabel3 td {
border-bottom: 1px solid #dacbe7;
color : #480063;
padding:10px;
}
#tabel3 th:hover {
background-color:lightgreen;
}
#tabel3 td:hover {
background-color:lightblue;
}
</style>
<span class="subjudul"><b>Tampilan tabel yang diinginkan</b></span>
<br />
<br />
<span class="normal1">Saya ingin membuat tampilan tabel seperti dibawah dengan menggunakan CSS dan html. </span><br />
<br />
<table align="center" id="tabel3">
<tbody>
<tr>
<th style="width: 30px;">No.</th>
<th style="width: 150px;">Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Nita</td>
<td>Jl. Mawar no. 10, RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten.</td>
</tr>
<tr>
<td>2</td>
<td>Alisa</td>
<td>Jl. Melati no. 5 RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten.</td>
</tr>
<tr>
<td>3</td>
<td>Lois</td>
<td>Jl. Melati no. 3 </td>
</tr>
<tr>
<td>4</td>
<td>Puspa</td>
<td>Perumahan Citra Raya Blok AA</td>
</tr>
</tbody>
</table>
Penjelasan
Kode yang digunakan untuk style CSS :
http://www.w3schools.com/css/css_table.asp
Artikel terkait :
Saya ingin membuat tampilan tabel dengan warna background seperti contoh dibawah dengan menggunakan CSS dan html.
| No. | Nama | Alamat |
|---|---|---|
| 1 | Nita | Jl. Mawar no. 10, RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten. |
| 2 | Alisa | Jl. Melati no. 5 RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten. |
| 3 | Lois | Jl. Melati no. 3 |
| 4 | Puspa | Perumahan Citra Raya Blok AA |
CSS dan HTML
Untuk membuat tampilan tabel seperti diatas, adalah sebagai berikut :
<style>
#tabel3 {
width:80%;
border: 3px solid lightblue;
}
#tabel3 tr:nth-child(even) {
background-color: #f2f2f2;
}
#tabel3 tr:nth-child(odd) {
background-color: #f3d9c0;
}
#tabel3 th {
height:25px;
background-color: #f38ec0;
border-bottom: 2px solid lightblue;
color : white;
}
#tabel3 td {
border-bottom: 1px solid #dacbe7;
color : #480063;
padding:10px;
}
#tabel3 th:hover {
background-color:lightgreen;
}
#tabel3 td:hover {
background-color:lightblue;
}
</style>
<span class="subjudul"><b>Tampilan tabel yang diinginkan</b></span>
<br />
<br />
<span class="normal1">Saya ingin membuat tampilan tabel seperti dibawah dengan menggunakan CSS dan html. </span><br />
<br />
<table align="center" id="tabel3">
<tbody>
<tr>
<th style="width: 30px;">No.</th>
<th style="width: 150px;">Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Nita</td>
<td>Jl. Mawar no. 10, RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten.</td>
</tr>
<tr>
<td>2</td>
<td>Alisa</td>
<td>Jl. Melati no. 5 RT 001/RW 013 Kelapa Dua - Kabupaten Tangerang - Banten.</td>
</tr>
<tr>
<td>3</td>
<td>Lois</td>
<td>Jl. Melati no. 3 </td>
</tr>
<tr>
<td>4</td>
<td>Puspa</td>
<td>Perumahan Citra Raya Blok AA</td>
</tr>
</tbody>
</table>
Penjelasan
Kode yang digunakan untuk style CSS :
- selector nth-child() digunakan untuk garis zebra, tambahkan background-color untuk baris genap (even) atau ganjil (odd)
- color digunakan untuk memberi warna text
- background-color digunakan untuk memberi warna pada background table
- width digunakan untuk mengatur lebar
- table align="center" id="tabel3" digunakan untuk meletakkan tabel ditengah.
http://www.w3schools.com/css/css_table.asp
Artikel terkait :
- Membuat hyperlink di blogger menggunakan html
- Membuat garis pada blogger dengan kode html
- Membuat bullet dan mumbering html
- Membuat bullet dan numbering CSS
- Membuat tabel di blogger menggunakan CSS, Contoh 1
- Membuat tabel di blogger menggunakan CSS, Contoh 2
- Membuat tabel di blogger menggunakan CSS, Contoh 4
- Cara menggabungkan kolom dan baris pada tabel di blog , contoh 5 membuat tabel,
- Tabel dengan scroll dan header tetap, contoh 6 membuat tabel
Membuat tabel di blogger menggunakan CSS, Contoh 3
4/
5
Oleh
Unknown