Pretty Tables

Pretty HTML tables that uses font awesome for checkmarks!

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
	
<div class="table-prices">
	<div style="width: 600px">
	<table>
		<colgroup>
		<col width="30%">
		<col width="70%">
		</colgroup>
		<thead>
		<tr>
		<th>Header</th>
		<th>Heading</th>
		</tr>
		</thead>
		<tbody>
			<tr>
				<td>Fantastic Item</td>
				<td><i>Apple</i></td>
			</tr>
			<tr>
				<td>Fantastic Item</td>
				<td><i class="icon-checkmark"></i></td>
			</tr>
			<tr>
				<td>Fantastic Item</td>
				<td><i class="icon-checkmark"></i></td>
			</tr>
			<tr>
				<td>Fantastic Item</td>
				<td><i class="icon-checkmark"></i></td>
			</tr>
			<tr>
				<td>Fantastic Item</td>
				<td><i class="icon-checkmark"></i></td>
			</tr>
		</tbody>
		<tfoot>
		    <tr>
		      <td colspan="2">$699</td>
		    </tr>
		</tfoot>
	</table>
	</div>
</div>


<div class="table-services">
	<div style="width: 600px">
	<table>
		<colgroup>
		<col width="100%">
		</colgroup>
		<thead>
		<tr>
		<th>Header</th>
		</tr>
		</thead>
		<tbody>
			<tr>
				<td>item</td>
			</tr>
			<tr>
				<td>item</td>
			</tr>
			<tr>
				<td>item</td>
			</tr>
			<tr>
				<td>item</td>
			</tr>
			<tr>
				<td>item</td>
			</tr>
		</tbody>
		<tfoot>
		    <tr>
		      <td colspan="2">$699</td>
		    </tr>
		</tfoot>
	</table>
	</div>
</div>

CSS

/*Note: Loading font aswesome eternal css*/

body { font-size: 15px; font-family: Proxima, Arial, sans-serif; }
.table-prices table { margin: 0 0 30px;  border-collapse:collapse; width: 100%;  }
.table-prices table thead tr th, 
.table-prices table tr td { height: 50px; padding: 0;  vertical-align: middle; text-align: left; }
.table-prices table thead tr hd {  }
.table-prices table thead tr th { background: #734E71; color: #fff; }
.table-prices table  tr td { background: #f8f7f6; color: #445859; border-bottom: 1px solid #fff; }
.table-prices table thead tr th:first-child, .table-prices table tr td:first-child { padding-left: 40px; } 
.table-prices table tr th:nth-child(2), .table-prices table tr td:nth-child(2) { text-align: center; }
.table-prices table tr:nth-child(even) td { background: #f3f2f1 }
.table-prices table tfoot tr td { background-color: #f1efed; color: #49c4be; font-weight: bold; padding: 0; text-align: center; }


.icon-checkmark {
    position: relative;
}
 
.icon-checkmark:before {
    content: "\f00c"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #4DA39F;
    font-size: 30px;
}

.table-services table { margin: 0 0 30px; border-collapse:collapse; width: 100%;  }
.table-services table thead tr th, 
.table-services table tr td { height: 50px; padding: 0 20px 0 20px; vertical-align: middle; text-align: center; }
.table-services table thead tr hd {  }
.table-services table thead tr th { background: #734E71; color: #fff; }
.table-services table  tr td { background: #f8f7f6; color: #445859; border-bottom: 1px solid #fff; }
.table-services table tr:nth-child(even) td { background: #f3f2f1 }
.table-services table tfoot tr td { background-color: #f1efed; color: #49c4be; font-weight: bold; padding: 0; text-align: center; }