Belajar CSS: Desain Table Professional

Belajar css desain table

Tutorial belajar CSS kali ini masih tentang tampilan pengguna atau user interface. Ada kala nya saat kita membuat website perlu menampilkan data konten agar terlihat rapih dengan menggunakan table.

Aku akan berbagi tips untuk mendesain tampilan table dengan HTML dan CSS agar terlihat professional.

1. Table Zebra Striping

Belajar CSS Desain Table

Kode CSS:

.table-zebra-striping {
	width: 100%;
	border-collapse: collapse;
}

.table-zebra-striping th {
	background: #8CAAD4;
	color: #FFFFFF;
	padding: 1em;
	text-align: left;
	text-transform: uppercase;
}

.table-zebra-striping td {
	border-bottom: 1px solid #ddd;
	padding: 1em;
}

/* EVEN */

.table-zebra-striping tr:nth-child(even) {
	background: #F5F5F5;
}

/* ODD */

.table-zebra-striping tr:nth-child(odd) {
	background: #D5DDE8;
}

Kode HTML:

<table class="table-zebra-striping">
	<tr>
		<th>No.</th>
		<th>Name</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Bill Gates</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Steve Jobs</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Jack Dorsey</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Mark Zuckerberg</td>
	</tr>
</table>

2. Table with Line

Belajar CSS Desain Table

Kode CSS:

.table-line {
	width: 100%;
	border-collapse: collapse;
}

.table-line th {
	background: #850785;
	color: #FFFFFF;
	padding: 1em;
	text-align: left;
	text-transform: uppercase;
}

.table-line td {
	border-bottom: 1px solid #DDDDDD;
	color: #666666;
	padding: 1em;
}

Kode HTML:

<table class="table-line">
	<tr>
		<th>No.</th>
		<th>Name</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Bill Gates</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Steve Jobs</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Jack Dorsey</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Mark Zuckerberg</td>
	</tr>
</table>

Demikian sedikit tips dan tutorial cara mendesain table dengan CSS. Silakan pakai source code tersebut secara gratis.

Semoga bermanfaat dan jangan lupa share yah! 😀

Leave a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Shares
Scroll to Top