Quantcast
Channel: Comment Redirect Wordpress Plugin with Popup » Design
Viewing all articles
Browse latest Browse all 2

Modern Table CSS (Flat Design)

0
0

Note: You make copy the CSS for these button designs and use them on your own sites and products, with no need for attribution.

Beautiful table design is a rarity on the internet. Everywhere, we see examples of beautiful flat button CSS, or beautiful navigation bars – but table designs aren’t as readily available. Even the Boostrap table CSS isn’t that great in my opinion; despite the fact that tables are extremely widely used.

Tables are meant for data. Maybe developers will use tables for other puporses, but there are good reasons to use them strictly to display data. One of these being that information in tables are hardly ever relevant for search engines, and so information there might be devalued by web crawlers.

So this tutorial will focus on creating beautiful, flat tables that you can use to display data.

Table examples

First Name Last Name City Donation
John Smith Seattle $12.95
Eddy Johnston Palo Alto $15
First Name Last Name City Donation
John Smith Seattle $12.95
Eddy Johnston Palo Alto $15
First Name Last Name City Donation
John Smith Seattle $12.95
Eddy Johnston Palo Alto $15

Table HTML and CSS Code

HTML
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

<table class="flat-table flat-table-1">
	<thead>
		<th>First Name</th>
		<th>Last Name</th>
		<th>City</th>
		<th>Donation</th>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>Smith</td>
			<td>Seattle</td>
			<td>$12.95</td>
		</tr>
		<tr>
			<td>Eddy</td>
			<td>Johnston</td>
			<td>Palo Alto</td>
			<td>$15</td>
		</tr>
	</tbody>
</table>
<table class="flat-table flat-table-2">
	<thead>
		<th>First Name</th>
		<th>Last Name</th>
		<th>City</th>
		<th>Donation</th>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>Smith</td>
			<td>Seattle</td>
			<td>$12.95</td>
		</tr>
		<tr>
			<td>Eddy</td>
			<td>Johnston</td>
			<td>Palo Alto</td>
			<td>$15</td>
		</tr>
	</tbody>
</table>
<table class="flat-table flat-table-3">
	<thead>
		<th>First Name</th>
		<th>Last Name</th>
		<th>City</th>
		<th>Donation</th>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>Smith</td>
			<td>Seattle</td>
			<td>$12.95</td>
		</tr>
		<tr>
			<td>Eddy</td>
			<td>Johnston</td>
			<td>Palo Alto</td>
			<td>$15</td>
		</tr>
	</tbody>
</table>
CSS
<style type="text/css">
	.flat-table {
		margin-bottom: 20px;
		border-collapse:collapse;
		font-family: 'Lato', Calibri, Arial, sans-serif;
		border: none;
                border-radius: 3px;
               -webkit-border-radius: 3px;
               -moz-border-radius: 3px;
	}
	.flat-table th, .flat-table td {
		box-shadow: inset 0 -1px rgba(0,0,0,0.25), 
			inset 0 1px rgba(0,0,0,0.25);
	}
	.flat-table th {
		font-weight: normal;
		-webkit-font-smoothing: antialiased;
		padding: 1em;
		color: rgba(0,0,0,0.45);
		text-shadow: 0 0 1px rgba(0,0,0,0.1);
		font-size: 1.5em;
	}
	.flat-table td {
		color: #f7f7f7;
		padding: 0.7em 1em 0.7em 1.15em;
		text-shadow: 0 0 1px rgba(255,255,255,0.1);
		font-size: 1.4em;
	}
	.flat-table tr {
		-webkit-transition: background 0.3s, box-shadow 0.3s;
		-moz-transition: background 0.3s, box-shadow 0.3s;
		transition: background 0.3s, box-shadow 0.3s;
	}
	.flat-table-1 {
		background: #336ca6;
	}
	.flat-table-1 tr:hover {
		background: rgba(0,0,0,0.19);
	}
	.flat-table-2 tr:hover {
		background: rgba(0,0,0,0.1);
	}
	.flat-table-2 {
		background: #f06060;
	}
	.flat-table-3 {
		background: #52be7f;
	}
	.flat-table-3 tr:hover {
		background: rgba(0,0,0,0.1);
	}
</style>

The post Modern Table CSS (Flat Design) appeared first on Comment Redirect Wordpress Plugin with Popup.


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images