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>
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>
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>
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>
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>
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>
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>
Sekian untuk pembahasan kali ini.
Wassalamualaikum wr wb.
Sumber : w3schools.com
Posting Komentar untuk "Belajar CSS chapter 5 (Tabel)"