Cara Mendesain Tabel Web Menggunakan CSS

Zona Internetku No Comment June 11, 2019

Seperti yang kalian ketahui bahwa kode CSS sangat berpengaruh besar pada tampilan website termasuk konten tabel, secara default tampilan tabel pada web sangat sederhana dan kurang menarik.
Pada kesempatan kali ini saya akan membagikan informasi mengenai cara untuk mengubah design atau tampilan tabel untuk terliat lebih menarik dengan menggunakan kode CSS.

1. Langkah pertama, buatlah file html di notepad kalian dan salin kode di bawah ini

<html>
<head>
<title>Cara Mendesain Tabel Dengan CSS</title>

<style>
.tabel{border:1px solid #000; border-collapse:collapse;font-family:sans-serif}
</style>
</head>
<body>

<h2>Cara Mendesain Tabel Web Dengan CSS [Zona Internetku]</h2>
<table class="tabel">

<tr>
<th>No.</th>
<th>Nama</th>
<th>Asal</th>
<th>Jenis Kelamin</th>
</tr>

<tr>
<td>1</td>
<td>Jaenudin Ngaciro</td>
<td>Surabaya</td>
<td>Laki-Laki</td>
</tr>

<tr>
<td>2</td>
<td>Mukidi Mekedel</td>
<td>Semarang</td>
<td>Laki-Laki</td>
</tr>

<tr>
<td>3</td>
<td>Mimin Perih</td>
<td>Jakarta</td>
<td>Perempuan</td>
</tr>

<tr>
<td>4</td>
<td>Sri Mbombok</td>
<td>Bandung</td>
<td>Perempuan</td>
</tr>

<tr>
<td>5</td>
<td>Zona Internetku</td>
<td>Jogja</td>
<td>Laki-Laki</td>
</tr>
</table>

</body>
</html>

2. Selanjutnya kalian simpan file html tersebut dengan ekstensi .html (jika belum tau silahkan baca dulu artikel ini Macam - Macam Tag HTML Beserta Fungsi Dan Contohnya

3. Jika kalian sudah menyimpan file tersebut, maka bukalah file tersebut menggunakan browser dan hasilnya akan terlihat seperti ini

Cara Mendesain Tabel Web Menggunakan CSS

Seperti yang kalian lihat, tampilan tabel tersebut sangat simpel. Untuk membuatnya lebih menarik tambahkan kode css berikut di atas kode </style> kode css ini berfungsi untuk mempercantik tampilan pada desain tabel web kalian

.tabel{border:1px solid #7bff96; border-collapse:collapse;font-family:sans-serif}
.tabel tr th{background:#24b913;color:#fff;padding:4px 7px;margin:0;}
.tabel tr td:nth-child(1){text-align:center;font-weight:bold}
.tabel tr td{padding:4px 7px;margin:0;}
.tabel tr:nth-child(odd){background:#a0efa0}

Silahkan kalian simpan perubahan pada file html tadi dan lihat hasilnya dengan browser kalian, dan hasil akhirnya akan menjadi seperti ini

Cara Mendesain Tabel Web Menggunakan CSS 2

Demikian tutorial singkat mengenai cara untuk mengubah tampilan tabel web html dengan menambahkan kode CSS.

Baca juga :
Cara Memakai Fungsi nth-child Selector
Memahami Konsep Pseudo Class Dan Pseudo Element Pada CSS
Cara Menggunakan Selector Pada Kode CSS

Promo Menarik