Cara Membuat Tabel CSS Sederhana Type 1

Cara Membuat Tabel CSS Sederhana Type 1

HobbyTekno - Pada postingan kali ini Admin akan membahas cara membuat Tabel CSS Sederhana, sesuai namanya, kita hanya menggunakan CSS Dasar saja jadi hasilnya akan simple. Kalau anda ingin membuat yang lebih keren atau expert, silahkan baca Postingan Cara Membuat Tabel CSS Sederhana #2. Langsung saja kita bahas cara buatnya.

Langkah-Langkah Membuat Tabel CSS Sederhana Type 1

1. Buat File baru, simpan dengan nama index.html, terserah asalkan ekstensinya adalah .html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Table Type 1</title>
</head>
<body>
<center> <h1>Table Type 1 | HobbyTekno</h1>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi Hidayat</td>
<td>Jambi</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Ilham </td>
<td>Jakarta Selatan</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>Budi Setiawan</td>
<td>Pekanbaru</td>
<td>29</td>
</tr>
</table>
</center>
</body>
</html>
2.  Lalu copy kode dibawah ini, simpan sebagai style.css (Wajib)
.table1 {
    font-family: sans-serif;
    color: #232323;
    border-collapse: collapse;
}
.table1, th, td {
    border: 1px solid #999;
    padding: 8px 20px;
}

Nah, sekian untuk tutorial kali ini. Kode CSS yang digunakan sangatlah sedikit, kan sesuai namanya sederhana.

Sekian Cara Membuat Tabel CSS Sederhana Type 1, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Cara Membuat Tabel CSS Sederhana Type 1"