About this snippet

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

Size
735 bytes
Uses
HTML, CSS
Loads
Nothing external
Views
714

Collections

Related snippets

<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;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save