Kursus Membuat Web

iklan

Membuat Tabel CSS 1

Tabel ini dibuat menggunakan HTML 5 dan CSS 3

Gambar Tabel
membuat menu css
Lihat Demo ..

Source Code HTML

Buat kode HTML 5 sebagai berikut

Source Code HTML
<!DOCTYPE html>
<html lang="id">
	<head>
		<title>Membuat Tabel CSS - Kursus Membuat Web</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="tabel.css" media="all">
	</head>
	<body>
		<table>
			<tr>
				<th>No</th>
				<th>Nama</th>
				<th>Anak Ke</th>
			</tr>
			<tr>
				<td>1</td>
				<td>Riziq Sihab</td>
				<td>I</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Luqmanul Hakim</td>
				<td>II</td>
			</tr>
			<tr>
				<td>3</td>
				<td>Fatimah Zahra</td>
				<td>III</td>
			</tr>
		</table>
	</body>
</html>

Source Code CSS

Selanjutnya buat kode CSS 3 sebagai berikut

Source Code CSS
table, tr, th, td {
	border-collapse: collapse;
	border: 1px solid #98BF21;
}

th{
	background-color: #A7C942;
	border-bottom: 3px solid #98BF21;
}

th, td{
	padding: 5px;
}

td:first-child{
	text-align: right;
}

tr:nth-child(odd) {
	background-color: #EAF2D3;
}

tr:nth-child(even) {
	background-color: #D0DFA5;
}

tr:hover{
	background-color: #ffffff;
	cursor: pointer;
}
Lihat Demo ..

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015