CSS table border
CSS Tutorial » CSS table border
Study in this chapter:
1. - explanations - How can you add border to CSS table?
2. - css table border-color
3. - css table border-radius
4. - css table border-collapse
HTML tables enhance the design of a web page and can have borders of different styles and shapes
The border of the table is added with the property css border as:Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Inline - by using the style attribute in HTML elements
Syntax:
Inline CSS.
Example:
FirstName | LastName | Age |
---|---|---|
OdPeter | Pascual | 29 |
Salwin | Langford | 46 |
Browser Support
Element | ![]() Chrome |
![]() IE |
![]() Firefox |
![]() Opera |
![]() Safari |
border: value |
Yes | Yes | Yes | Yes | Yes |
Table border radius
Using the border-radius:
property, we can get the borders to become rounded corners:
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {
border: 2px solid blue;
border-radius: 6px;
padding: 6px;
}
th { background:#6CF
}
</style>
</head>
<body><h2>Table With Rounded Borders</h2>
<p>Adding rounded corners to
the borders use CSS border-radius property.</p><table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jilles</td>
<td>Smithoh</td>
<td>29</td>
</tr>
<tr>
<td>EveMari</td>
<td>Jaccksson</td>
<td>46</td>
</tr>
<tr>
<td>Johny</td>
<td>Dove</td>
<td>48</td>
</tr>
</table></body>
</html>
Related subjects:
Table border
Table padding
Responsive table
CSS table border radius collapse
CSS table border collapse
Using the border-collapse:
property it is observed that the cells inside a <table> have shared or separate borders.
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {
border: 2px solid blue;
padding: 6px;
border-collapse: collapse;
}
th { background:#6CF;}
</style>
</head>
<body><h2>Table With border-collapse: collapse;</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jilles</td>
<td>Smithoh</td>
<td>29</td>
</tr>
<tr>
<td>EveMari</td>
<td>Jaccksson</td>
<td>46</td>
</tr>
<tr>
<td>Johny</td>
<td>Dove</td>
<td>48</td>
</tr>
</table></body>
</html>
Example: border-collapse: separate;
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {
border: 2px solid blue;
padding: 6px;
border-collapse: separate;
}
th { background:#6CF;}
</style>
</head>
<body><h2>Table With border-collapse: separate;</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jilles</td>
<td>Smithoh</td>
<td>29</td>
</tr>
<tr>
<td>EveMari</td>
<td>Jaccksson</td>
<td>46</td>
</tr>
<tr>
<td>Johny</td>
<td>Dove</td>
<td>48</td>
</tr>
</table></body>
</html>
Tags: table border radius, collapse, none, spacing, width, not showing, bottom, radius not working, inside, bottom only
border-spacing: property
Using border-spacing:
property we can make the distance between the borders of adjacent cells.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 2px solid blue;
}
th{ background:#6CF
}
#table11 {
border-collapse: separate;
border-spacing: 10px;
}#table22 {
border-collapse: separate;
border-spacing: 20px 40px;
}
</style>
</head>
<body><h2>border-spacing: 10px:</h2>
<p>When using "border-collapse: separate",
the border-spacing property can be used to set
the space between the cells:</p>
<table id="table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table><h2>border-spacing: 20px 40px:</h2>
<p>Using two values (the first sets
the horizontal spacing and the second sets
the vertical spacing):</p>
<table id="table2">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table></body>
</html>
Summary of description
table border-radius, collapse, none, spacing, width, not showing, bottom, radius not working, inside, bottom only
CSS Table Border. Examples of border-radius, collapse, spacing, width - css tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.