Styling Table Menggunakan CSS
Table merupakan salah satu dari tag pada html. Dengan CSS, table yang dibuat dapat diedit dan diubah tampilanya sesuai keinginan.
Property yang digunakan yaitu :
1.Border
2.Border-collapse
3.Border-spacing
4.Caption-side
5.Empity-cell
6.Table-layout
1. Border
Diskripsi : Properti ini digunakan untuk mensetting semua value dari properti dalam satu deklarasi.
Value : border-width, border-style, border-color
border-width : mengatur lebar dari border. value dari dari border-width yaitu medium, thin, thick, length (contoh: px)
border-style : mengatur type dari border. value dari border-style yaitu none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
border-color : mengatur warna dari border.
ex.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
2. Border-collapse
Diskripsi : Untuk mensetting apakah table dibatasi oleh 2 border yang bergabung atau terpisah
Value : Separate (default), Collapse.
ex.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Manda</td>
<td>Mandi Kembang</td>
</tr>
<tr>
<td>Bobi</td>
<td>Blagu</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Manda</td>
<td>Mandi Kembang</td>
</tr>
<tr>
<td>Bobi</td>
<td>Blagu</td>
</tr>
</table>
</body>
</html>
3. Border-spacing
Diskripsi : Digunakan untuk mengatur jarak antara border yang berdekatan
Value : length(px,cm, etc)
ex.
<!DOCTYPE html>
<html>
<head>
<style>
table.ex1 {
border-collapse: separate;
border-spacing: 10px;
}
table.ex2 {
border-spacing: 10px 50px;
}
</style>
</head>
<body>
<table class="ex1" border="1">
<tr>
<td>Manda</td>
<td>Mandi Kembang</td>
</tr>
<tr>
<td>Bobi</td>
<td>Blagu</td>
</tr>
</table>
<br>
<table class="ex2" border="1">
<tr>
<td>Budi</td>
<td>Baper</td>
</tr>
<tr>
<td>iritology</td>
<td>no 54</td>
</tr>
</table>
</body>
</html>
4. Caption-side
Diskripsi : Digunakan untuk memberi keterangan judul pada table.
Value : top, bottom.
ex.
<!DOCTYPE html>
<html>
<head>
<style>
caption {
caption-side: bottom;
}
</style>
</head>
<body>
<table border="1">
<caption>Table 1.1 Mahasiswa</caption>
<tr>
<th>Nama</th>
<th>NIM</th>
<th>Jurusan</th>
</tr>
<tr>
<td>Manda Mandikembang</td>
<td>12345001</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>Bobi Blagu</td>
<td>12345002</td>
<td>Sistem Informasi</td>
</tr>
<tr>
<td>Budi Baper</td>
<td>12345002</td>
<td>Ilmu Komunikasi</td>
</tr>
</table>
</body>
</html>
5. Empity-cells
Diskripsi : Digunakan untuk menghilangkan menampilkan border atau tidak pada cells yang tidak di beri data di dalamnya.
Value : show, hide.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
empty-cells: hide;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>
6. table-layout
Diskripsi : Digunakan untuk mengatur algoritma tata letak
value : fixed, auto.
ex.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
width: 100%;
border: 1px solid black;
}
td {
border: 1px solid black;
}
table.ex1 {
table-layout: auto;
}
table.ex2 {
table-layout: fixed;
}
</style>
</head>
<body>
<p>table-layout: auto:</p>
<table class="ex1">
<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">10000000</td>
</tr>
</table>
<p>table-layout: fixed:</p>
<table class="ex2">
<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">10000000</td>
</tr>
</table>
</body>
</html>
Demikian post tentang table pada css, Semoga Bermanfaat,sampai jumpa di postingan selanjutnya.
Written by @akhi_syabab
Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency