Home Web Desain CSS CSS Tabel Sederhana

CSS Tabel Sederhana

Kali ini saya akan memberikan tutorial membuat tabel dengan html dan css sederhana. Tabel pada website biasa digunakan untuk menampung data atau menampilkan data agar terlihat rapi dan urut. Dan untuk mempercantik tampilan tabel maka dibutuhkan css. Berikut tutorialnya.

Seperti biasa kita siapkan text editor.

Step 1

Buatlah file index.html, lalu tulis source code yang dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial Membuat Tabel Sederhana</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<table>
	<tr>
		<th>First Name</th>
		<th>Last Name</th>
		<th>E-mail</th>
	</tr>
	<tr>
		<td>Jhon</td>
		<td>Todi</td>
		<td>jhon@email.com</td>
	</tr>
	<tr>
		<td>Terry</td>
		<td>Bang</td>
		<td>terry@email.com</td>
	</tr>
	<tr>
		<td>Jessica</td>
		<td>Puth</td>
		<td>jess@email.com</td>
	</tr>
	<tr>
		<td>Han</td>
		<td>Tio</td>
		<td>hantio@email.com</td>
	</tr>
</table>
</body>
</html>

 

Lalu kita buat folder css, dan buat file style.css, lalu tulis source code dibawah ini.

table {
	width: 100%;
	border-collapse: collapse;
}
th {
	background-color: #7130b6;
	color: #fff;
}
td,th {
	text-align: left;
	padding: 8px;
	font-family: arial;
}
tr:nth-child(even) {
	background-color: #f2f2f2;
}

 

Jika telah selesai maka tampilannya akan seperti yang dibawah ini.

Sekian tutorial kali ini. Selamat Mencoba~~

***PIU***

 

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here