HTML Table Borders

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Table Borders

How To Add a Border

To add a border to a table, borders around each table cell are also added:

Example:

				
					table, th, td {
  border: 1px solid black;
}
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
</table>
				
			

Output:

Firstname Lastname Age

Style Table Border

Style table background table border radius for rounded table border and giving border white.

				
					table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
  border-radius:5px;
}
th, td {
  background-color: #96D4D4;
}
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>
				
			

Output:

Firstname Lastname Age
Jill Smith 50

Style Table Border

The border-style property allows setting the appearance of the border.

The following values are allowed:

  • dotted     
  • dashed     
  • solid     
  • double     
  • groove     
  • ridge     
  • inset     
  • outset     
  • none     
  • hidden     

Example

				
					th, tr {
  border:1px dotted black;
}
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
</table>
				
			

Output:

Firstname Lastname Age

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420