Membuat Tabel Responsive Dengan HTML5 Dan CSS3

Hai, jumpa lagi dengan saya 🙂 apa kabarnya ? semoga baik yah, amin.

Pada artikel kali ini saya akan berbagi sedikit tutorial mengenai bagaimana cara Membuat Tabel Responsive Dengan HTML5 Dan CSS3, biasanya ketika kita ingin membuat tampilan menjadi responsive kita perlu yang namanya framework bootsrap, nah kali ini saya akan kasih tau membuat table responsive tanpa bootsrap, bagaimana cara membuatnya ? yuk kita praktikan.

1. Buka dulu teks editornya, kemudian ketikan kode HTML berikut.

<table>
  <caption>Data Pelanggan</caption>
    <thead>
        <tr>
            <th scope="col">Nama</th>
            <th scope="col">Alamat</th>
            <th scope="col">Email</th>
            <th scope="col">Nomor Telepon</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row" data-label="Nama">Sarinem</td>
            <td data-label="Alamat">Manchester, Inggris</td>
            <td data-label="Email">Sarinem@example.com</td>
            <td data-label="Nomor Telepon">021-0101012323123313</td>
        </tr>
        <tr>
            <td scope="row" data-label="Nama">Soleh</td>
            <td data-label="Alamat">California, Amerika Serikat</td>
            <td data-label="Email">Soleh@example.com</td>
            <td data-label="Nomor Telepon">021-9198199189291929</td>
        </tr>
        <tr>
            <td scope="row" data-label="Nama">Markonah</td>
            <td data-label="Alamat">New York, Amerika Serikat</td>
            <td data-label="Email">Markonah@example.com</td>
            <td data-label="Nomor Telepon">021-2929292929101019</td>
        </tr>
        <tr>
            <td scope="row" data-label="Nama">Sujarwo</td>
            <td data-label="Alamat">Texas, Amerika Serikat</td>
            <td data-label="Email">Sujarwo@example.com</td>
            <td data-label="Nomor Telepon">021-819199191991919</td>
        </tr>
    </tbody>
</table>

2. Setelah itu, lanjutkan untuk kode CSS, silahkan ketikan kode nya berikut.

body {
	font-family: "Times New Roman", serif;
	line-height: 1.25;
	padding: 40px 20px;
}
.header{
	text-align: center;
	border-bottom: 1px solid #ddd;
}
table {
	border: 1px solid #0094D0;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
}
table caption {
	font-size: 1.5em;
	margin: .25em 0 .75em;
}
table tr {
	background: #E6E5E6;
	border: 1px solid #333333;
	padding: .35em;
}
table th,
table td {
	padding: .625em;
	text-align: center;
}
table th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: #0094D0;
	color: white;
}
table td img {
	text-align: center;
}
@media screen and (max-width: 600px) {
	table {
		border: 0;
	}
	table caption {
		font-size: 1.3em;
	}
	table thead {
		display: none;
	}
	table tr {
		border-bottom: 3px solid green;
		display: block;
		margin-bottom: .725em;
	}
	table td {
		border-bottom: 1px solid green;
		display: block;
		font-size: .8em;
		text-align: right;
	}
	table td:before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}
	table td:last-child {
		border-bottom: 0;
	}
}

3. Kalo sudah jangan lupa disimpan kemudian jalankan di browsernya, dan lihat hasil nya. Selesai

Cukup mudah cara membuat nya ! silahkan modifikasi lagi yah, sampai disini tutorial mengenai  cara Membuat Tabel Responsive Dengan HTML5 Dan CSS3, semoga bermanfaat, amin.

Selamat mencoba.