Di bawah ini kita akan mempelajari cara membuat tabel berdampingan dengan CSS.
Tabel Berdampingan
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .row { margin-left:-5px; margin-right:-5px; } .column { float: left; width: 50%; padding: 5px; } /* Clearfix (clear floats) */ .row::after { content: ""; clear: both; display: table; } table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } th, td { text-align: left; padding: 16px; } tr:nth-child(even) { background-color: #f2f2f2; } </style> </head> <body> <h2>Tables Side by Side</h2> <p>Cara membuat tabel berdampingan dengan CSS:</p> <div class="row"> <div class="column"> <table> <tr> <th>Nama</th> <th>Usia</th> </tr> <tr> <td>Belly</td> <td>56</td> </tr> <tr> <td>Eva</td> <td>15</td> </tr> <tr> <td>Diena</td> <td>40</td> </tr> </table> </div> <div class="column"> <table> <tr> <th>Nama Depan</th> <th>Nama Belakang</th> </tr> <tr> <td>Sapri</td> <td>Smith</td> </tr> <tr> <td>Tony</td> <td>Stark</td> </tr> <tr> <td>Paul</td> <td>Pogba</td> </tr> </table> </div> </div> </body> </html>
Menempatkan Tabel Berdampingan
Cara membuat tabel berdampingan dengan properti float CSS:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.row {
margin-left:-5px;
margin-right:-5px;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Tables Side by Side</h2>
<p>Cara membuat tabel berdampingan dengan CSS:</p>
<div class="row">
<div class="column">
<table>
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Belly</td>
<td>56</td>
</tr>
<tr>
<td>Eva</td>
<td>15</td>
</tr>
<tr>
<td>Diena</td>
<td>40</td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
</tr>
<tr>
<td>Sapri</td>
<td>Smith</td>
</tr>
<tr>
<td>Tony</td>
<td>Stark</td>
</tr>
<tr>
<td>Paul</td>
<td>Pogba</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Cara membuat tabel berdampingan dengan properti CSS flex:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
margin-left:-5px;
margin-right:-5px;
}
.column {
flex: 50%;
padding: 5px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Tables Side by Side</h2>
<p>Cara membuat tabel berdampingan dengan CSS:</p>
<div class="row">
<div class="column">
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
</tr>
<tr>
<td>Sapri</td>
<td>Smith</td>
</tr>
<tr>
<td>Tony</td>
<td>Stark</td>
</tr>
<tr>
<td>Paul</td>
<td>Pogba</td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Belly</td>
<td>56</td>
</tr>
<tr>
<td>Eva</td>
<td>15</td>
</tr>
<tr>
<td>Diena</td>
<td>40</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Catatan: Flexbox tidak didukung di Internet Explorer 10 dan versi sebelumnya. Kamu bisa memilih untuk menggunakan flex atau float pada tabel atau tidak. Tapi jika memang ingin menggunakannya, maka kamu memerlukan dukungan browser untuk IE10 dan yang lebih lama.
Tambahkan Responsiveness
Contoh di atas tidak akan terlihat bagus pada perangkat seluler, karena dua kolom akan memakan terlalu banyak ruang halaman. Untuk membuat tabel responsif, yang harus berubah dari tata letak dua kolom menjadi tata letak lebar penuh di perangkat seluler, tambahkan kueri media berikut:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.row {
margin-left:-5px;
margin-right:-5px;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Tata letak responsif - membuat dua kolom bertumpuk, bukan bersebelahan pada layar yang lebih kecil dari 600 piksel */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive "Side-by-side" Tables</h2>
<p>Cara membuat gambar berdampingan dengan properti CSS float. Pada layar dengan lebar 600 piksel atau kurang, gambar akan bertumpuk, bukan bersebelahan.</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="column">
<table>
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Belly</td>
<td>56</td>
</tr>
<tr>
<td>Eva</td>
<td>15</td>
</tr>
<tr>
<td>Diena</td>
<td>40</td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
</tr>
<tr>
<td>Sapri</td>
<td>Smith</td>
</tr>
<tr>
<td>Tony</td>
<td>Stark</td>
</tr>
<tr>
<td>Paul</td>
<td>Pogba</td>
</tr>
</table>
</div>
</div>
</body>
</html>
