Style or Design HTML Tables with CSS

Ad Banner Image

CSS Tables Style

Table is one of the important element and with the help of CSS Properties you can make it more attractive and beautiful.

Through Table Borders Property you can apply border to a table.

Example 1 – CSS Table Border Style

<!DOCTYPE html>
<html>
  <head>
	<style>
		table1, th, td
		{
		 border: 1px solid black;
		}
	</style>
  </head>
  <body>
	<h4>Table Of Student Result</h4>
	<table>
		<tr>
			<th>Student Name</th>
			<th>Roll No.</th>
			<th>Marks</th>
		</tr>
		
	 	<tr>
			<td>Aiden</td>
			<td>01</td>
			<td>80%</td>
		</tr>
		<tr>
			<td>Ava</td>
			<td>02</td>
			<td>70%</td>
		</tr>
		<tr>
			<td>Benjamin</td>
			<td>03</td>
			<td>89%</td>
		</tr>
	</table>
	
  </body>
</html>

Here the above code shows that how can you apply CSS Properties to a Table.

Style or Design HTML Tables with CSS
Fig.1 – Design HTML Tables with CSS

Collapse Table Design Border with CSS Property

Double border view does not look clean, to remove the double border look border-collapse property is used.

Example 2 – Collapse Table Border Property

<!DOCTYPE html>
<html>
  <head>
	<style>
		table 
		{
		 border-collapse: collapse;
		}
		table, th, td 
		{
		border: 1px solid black;
		}
	</style>
  </head>
  <body>
	<h4>Table Of Student Result</h4>
	<table>
		<tr>
			<th>Student Name</th>
			<th>Roll No.</th>
			<th>Marks</th>
		</tr>
		
	 	<tr>
			<td>Aiden</td>
			<td>01</td>
			<td>80%</td>
		</tr>
		<tr>
			<td>Ava</td>
			<td>02</td>
			<td>70%</td>
		</tr>
		<tr>
			<td>Benjamin</td>
			<td>03</td>
			<td>89%</td>
		</tr>
	</table>
	
  </body>
</html>

Here the above code shows that how can you apply CSS Border Property to a Table without double-border.

Tables Design Examples
Fig.2 – Tables Design Examples with th tag

Styling HTML Tables with Width and Height Property

Through Width and Height Property you can change the height and width of the table cells.

Example 3 -Table Width and Height Property

<!DOCTYPE html>
<html>
  <head>
	<style>
		table, th, td
		{
		 border: 1px solid black;
		}
		table 
		{
		 width: 100%;
		}
		th
		{
		 height: 50px;
		}
	</style>
  </head>
  <body>
	<h4>Table Of Student Result</h4>
	<table>
		<tr>
			<th>Student Name</th>
			<th>Roll No.</th>
			<th>Marks</th>
		</tr>
		
	 	<tr>
			<td>Aiden</td>
			<td>01</td>
			<td>80%</td>
		</tr>
		<tr>
			<td>Ava</td>
			<td>02</td>
			<td>70%</td>
		</tr>
		<tr>
			<td>Benjamin</td>
			<td>03</td>
			<td>89%</td>
		</tr>
	</table>
  </body>
</html>

Here the above code shows that how can you apply CSS Width and Height Property to a Table.

Tables Design with border
Fig.3 – Table Style with border

Table Text Alignment Property

If you want alignment of text(left, right or center) than text-align property is used.

Example 4 -Table Text Alignment Property

<!DOCTYPE html>
<html>
  <head>
	<style>
		table, th, td
		{
		 border: 1px solid black;
		}
		table 
		{
		 width: 100%;
		 border-collapse: collapse;
		}
		th, td
		{
		 height: 50px;
		}
		td
		{
		 text-align: center;
		}
	</style>
  </head>
  <body>
	<h4>Table Of Student Result</h4>
	<table>
		<tr>
			<th>Student Name</th>
			<th>Roll No.</th>
			<th>Marks</th>
		</tr>
		
	 	<tr>
			<td>Aiden</td>
			<td>01</td>
			<td>80%</td>
		</tr>
		<tr>
			<td>Ava</td>
			<td>02</td>
			<td>70%</td>
		</tr>
		<tr>
			<td>Benjamin</td>
			<td>03</td>
			<td>89%</td>
		</tr>
	</table>
  </body>
</html>

Here the above code shows that how can you apply alignment to text of the Table.

Tables Code
Fig.4 – More Styling Tables

Table Vertical Alignment Property

If you arrange the text vertically(top, bottom or middle) than vertical-align property is used.

Example 5 -Table Vertical Alignment Property

<!DOCTYPE html>
<html>
  <head>
	<style>
		table, th, td
		{
		 border: 1px solid black;
		}
		table 
		{
		 width: 100%;
		 border-collapse: collapse;
		}
		th, td
		{
		 height: 50px;
		  vertical-align: bottom;
		}
		td
		{
		 text-align: center;
		}
	</style>
  </head>
  <body>
	<h4>Table Of Car</h4>
	<table>
		<tr>
			<th>Car Name</th>
			<th>Price</th>
			<th>Speed</th>
		</tr>
		
	 	<tr>
			<td>Hyundai Grand i10</td>
			<td>Rs. 4.25 lakh</td>
			<td>100 kmph</td>
		</tr>
		<tr>
			<td>Chevrolet Cruze</td>
			<td>Rs. 10.25 lakh</td>
			<td>190 kmph</td>
		</tr>
		<tr>
			<td>Bugatti Veyron</td>
			<td>Rs. 12 crore</td>
			<td>100 kmph</td>
		</tr>
	</table>
  </body>
</html>

Here the above code shows that how can you apply vertical alignment to text of the Table.

Table Vertical Alignment Property
Fig.5 – Table Vertical Alignment Property Example

Table Padding

If you want to modify the spacing of table text from the border than padding property is used.

Example 6 – Table Padding Property

<!DOCTYPE html>
<html>
  <head>
	<style>
		table, th, td
		{
		 border: 1px solid black;
		}
		table 
		{
		 width: 100%;
		 border-collapse: collapse;
		}
		th, td
		{
		 height: 30px;
		 padding-left: 20px;
		}
		
	</style>
  </head>
  <body>
	<h4>Table Of Mobile</h4>
	<table>
		<tr>
			<th>Mobile Name</th>
			<th>Brand</th>
			<th>Price</th>
		</tr>
		
	 	<tr>
			<td>Redmi Note 7</td>
			<td>Xiaomi</td>
			<td>Rs. 13,999</td>
		</tr>
		<tr>
			<td>Galaxy M30</td>
			<td>Samsung</td>
			<td>Rs. 14,990</td>
		</tr>
		<tr>
			<td>Honor 10 Lite</td>
			<td>Honor</td>
			<td>Rs. 13,999</td>
		</tr>
	</table>
  </body>
</html>

Here the above code shows that how can you apply padding to Table text.

Below image shows that how padding is apply. And padding is shown by the voilet color.

Table Padding Property
Fig.6 – Styling Table Padding Property

Table Hoverable Property

To apply mouse over effect to the particular row of table than hover property is used.

Example 7 – Table Hoverable Property Code

<!DOCTYPE html>
<html>
  <head>
	<style>
		table, th, td
		{
		 border-bottom: 1px solid black;
		}
		table 
		{
		 width: 100%;
		 border-collapse: collapse;
		}
		th, td
		{
		 height: 30px;
		 padding-left: 20px;
		}
		tr:hover
		{
		 background-color: orange;
		}
		
	</style>
  </head>
  <body>
	<h4>Table Of Mobile</h4>
	<table>
		<tr>
			<th>Mobile Name</th>
			<th>Brand</th>
			<th>Price</th>
		</tr>
		
	 	<tr>
			<td>Redmi Note 7</td>
			<td>Xiaomi</td>
			<td>Rs. 13,999</td>
		</tr>
		<tr>
			<td>Galaxy M30</td>
			<td>Samsung</td>
			<td>Rs. 14,990</td>
		</tr>
		<tr>
			<td>Honor 10 Lite</td>
			<td>Honor</td>
			<td>Rs. 13,999</td>
		</tr>
	</table>
  </body>
</html>

Here the above code shows that how can you apply hover effect to Table row.

Table Hoverable Example
Fig.7 – Table Hoverable Property Example

Striped Tables Property

Striped Tables means that alternate rows of the table have different color. Through stripped the content of table is easiy to read. nth-child(even or odd) property is used to apply stripped effect.

Example 8 – Striped Tables Property

<!DOCTYPE html>
<html>
  <head>
	<style>
		table, th, td
		{
		 border-bottom: 1px solid black;
		}
		table 
		{
		 width: 100%;
		 border-collapse: collapse;
		}
		th, td
		{
		 height: 30px;
		 padding-left: 20px;
		}
		tr:nth-child(even) 
		{
		 background-color: lightgrey;
		}
		th
		{
		 text-align: left;
		}
	</style>
  </head>
  <body>
	<h4>Table Of Member</h4>
	<table>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Contact No.</th>
		</tr>
		
	 	<tr>
			<td>Alexander</td>
			<td>Elizabeth</td>
			<td>6534689689</td>
		</tr>
		<tr>
			<td>Aiden</td>
			<td>Smith</td>
			<td>7676545489</td>
		</tr>
		<tr>
			<td>George</td>
			<td>Willimson</td>
			<td>6576455444</td>
		</tr>
				
	 	<tr>
			<td>Lee</td>
			<td>Franklin</td>
			<td>6538905613</td>
		</tr>
		<tr>
			<td>Petter</td>
			<td>Park</td>
			<td>8989534390</td>
		</tr>
	</table>
  </body>
</html>

Here the above code shows that how can you apply stripped to Table row and how will it look.

Striped Tables Property
Fig.8 – Striped Tables Property Example

Table Color Property

If you want to apply a color to the row of table than color property is used. To apply the color you have to see the background-color of the table-row.

Example 9 – Table Color Property

<!DOCTYPE html>
<html>
  <head>
	<style>
		table, th, td
		{
		 border-bottom: 1px solid black;
		}
		table 
		{
		 width: 100%;
		 border-collapse: collapse;
		}
		th, td
		{
		 height: 30px;
		 padding-left: 20px;
		}
		tr:nth-child(odd) 
		{
		 background-color: lightgrey;
		}
		th
		{
		 text-align: left;
		 background-color: darkcyan;
		 color: white;
		}
		
	</style>
  </head>
  <body>
	<h4>Table Of Hospital At Washington DC</h4>
	<table>
		<tr>
			<th>Hospital Name</th>
			<th>Address</th>
			<th>Contact No.</th>
		</tr>
		
	 	<tr>
			<td>Unity Health Care Southwest Health Center</td>
			<td>b/t S 7th St & S 5th St Navy Yard</td>
			<td>(202)469-4699</td>
		</tr>
		<tr>
			<td>Fort Washington Now Urgent Care</td>
			<td>10709 Indian Head Hwy Ste D</td>
			<td>(240)493-9650</td>
		</tr>
		<tr>
			<td>Sibley Memorial Hospital</td>
			<td>5255 Loughboro Rd NW</td>
			<td>(202)537-4000</td>
		</tr>
				
	 	<tr>
			<td>The George Washington University Hospital</td>
			<td>900 23rd St NW</td>
			<td>(202)715-4000</td>
		</tr>
		<tr>
			<td>MedStar Georgetown University Hospital</td>
			<td>3800 Reservoir Rd NW</td>
			<td>(855)546-2805</td>
		</tr>
		
	</table>
  </body>
</html>

Here the above code shows that how can you apply color to the heading of Table and how will it look.

Color Property for Table
Fig.9 – Color Property for Table
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress