Belajar CSS chapter 5 (Tabel)


Assalamualaikum wr wb
Pada postingan kali ini saya akan berbagi mengenai CSS yang digunakan untuk Mengubah tampilan tabel menjadi lebih menarik lagi. Berikut tutorialnya. Selamat membaca.

Table

1.    Table Border

Untuk memberikan border pada tabel kita dapat menggunakan properti border. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Maka hasilnya :


2.    Collapse Border

Properti border-collapse digunakan untuk mengatur border pada tabel menjadi melipat dalam satu border atau terpisah. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table
{
border-collapse:collapse;
}
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :

3. Tinggi dan Lebar Tabel

Untuk mengatur tinggi dan lebar tabel dapat menggunakan properti height dan width. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table
{
width:100%;
}
th
{
height:50px;
}
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :

4. Perataan teks pada tabel

Perataan teks pada table dapat menggunakan properti text-align dan vertical-align. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table
{
width:100%;
}
th
{
height:50px;
}
td
{
text-align:right;
}
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :
Contoh lain :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table
{
width:100%;
}
th
{
height:50px;
}
td
{
height:50px;
vertical-align:bottom;
}
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :

5.    Table padding

Untuk mengontrol jarak diantara border dan konten dapat menggunakan properti padding. Contoh :
<!DOCTYPE html>
<html>
<head>

<style type=”text/css”>
table
{
width:100%;
}
th
{
height:50px;
}
td
{
padding:15px;
}
table, th, td
{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :

6.    Mewarnai Tabel

Untuk mewarnai tabel dapat menggunakan properti color untuk teks dan background-color untuk latar belakang. Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>
<body>
<table>
<tr><th>zzzz</th></tr>
<tr><td>qwer</td></tr>
</table>
</body>
</html>

Hasilnya :
Sekian untuk pembahasan kali ini.
Wassalamualaikum wr wb.
Sumber : w3schools.com

Komentar

Postingan populer dari blog ini

Penilaian (Definisi, Prinsip dan Tujuan)

Penilaian Portofolio (Definisi, Karakteristik, Kelebihan dan Kekurangan)