<table>
	<thead>
		<tr>
			<td>Name</td>
			<td>Gender</td>
			<td>Age</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>David</td>
			<td>Male</td>
			<td>23</td>
		</tr>
		<tr>
			<td>Jessica</td>
			<td>Female</td>
			<td>47</td>
		</tr>
		<tr>
			<td>Warren</td>
			<td>Male</td>
			<td>12</td>
		</tr>
	</tbody>
</table>

table {
	border-collapse: collapse;
    font-family: Tahoma, Geneva, sans-serif;
}
table td {
	padding: 15px;
}
table thead td {
	background-color: #54585d;
	color: #ffffff;
	font-weight: bold;
	font-size: 13px;
	border: 1px solid #54585d;
}
table tbody td {
	color: #636363;
	border: 1px solid #dddfe1;
}
table tbody tr {
	background-color: #f9fafb;
}
table tbody tr:nth-child(odd) {
	background-color: #ffffff;
}

New
Open/Save
Resources
Format
Minify
Validate
Share
Download
View Source
Settings
Packages

Back to Snippets

HTML Styling Tables Example

This example will show you how to style HTML tables with CSS.

647

#table

Share Code Snippet

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

Someone shared this code with you. Review it in the editors before running it. Run this code For your safety, previews from shared links run with reduced permissions: no pop-ups, redirects, downloads, or form submissions.

Console Clear

›