CSS TABLE
Tabel border yaitu untuk menentukan batas pada tabel dalam CSS dengan menggunakan properti border. Untuk menetapkan pembatas dapat menggunakan elemen <table>, <th> dan <td>.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Border table:</h2>
<table>
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Dian</td>
<td>XI RPL-1</td>
</tr>
</table>
</body>
</html>
properti border-collapse ini digunakan untuk menetapkan perbatasan tabel harus runtuh kedalam perbatasan tunggal.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Dian</td>
<td>XI RPL-1</td>
</tr>
</table>
</body>
</html>
Menentukan lebar dan tinggi tabel dapat menggunakan properti width dan height. Contoh dibawah ini mengunakan lebar 100% dan tinggi 50px.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Dian</td>
<td>XI RPL-1</td>
</tr>
</table>
</body>
</html>
properti text-align menetapkan penyelarasan horizontal seperti kiri, kanan maupun tengah dari dalam konten <th> dan <td>
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Dian</td>
<td>XI RPL-1</td>
</tr>
</table>
</body>
</html>
properti vertical-align menetapkan align vertikal seperti atas, bawah maupun tengah dari dalam konten <th> atau <td>
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Dian</td>
<td>XI RPL-1</td>
</tr>
</table>
</body>
</html>
Menggunakan :hover pada <tr> untuk menyorot baris tabel pada mouse .
Contoh :
tr:hover{background-color:#f5f5f5}
Tabel bergaris dapat menggunkan nth-child() dan menambahkan background-color semua baris tabel.
Contoh :
tr:nth-child(even) {background-color: #f2f2f2}
Tabel warna dapat menentukan warna latar belakang dan teks warna dengan elemen <th>.
Contoh :
th {
background-color: #4CAF50;
color: white;
}
Tabel Responsif akan menampilkan scroll bar horizontal jika layar terlalu kecil untuk menampilkan konten lengkap.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<p>A responsive table will display a horizontal scroll bar if the screen is too
small to display the full content. Resize the browser window to see the effect:</p>
<p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>
<div style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
Referensi :
http://www.w3schools.com/css/css_table.asp
Sekian dan terimaksih semoga bermanfaat.
0 komentar:
Posting Komentar