HTML Table Border
HTML Tutorial » HTML Table Border
Study in this chapter:
1. - How do we add a border to a table in HTML?
2. - HTML table border style
3. - Table Border collapse, radius, color
The HTML border attribute specifies if a border should be displayed around the table cells or not.
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:
border: value;
}
Inline CSS.
Example:
| title 1 | title 2 | title 3 |
|---|---|---|
| line 2- column 1 | line 2- column 2 | line 2- column 3 |
| line 3- column 1 | line 3- column 2 | line 3- column 3 |
| line 4- column 1 | line 4- column 2 | line 4- column 3 |
Browser Support
| Element |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| table border | Yes | Yes | Yes | Yes | Yes |
Style Table Borders
Definition and Usage:
To stylize the element we need, we set the background color for each cell and assign a blue color to the border.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
background-color: #0C6;
}
</style>
</head>
<body><h2>Table Style</h2>
<p>Style the table.</p>
<table style="width:99%">
<tr>
<th>First_name</th>
<th>Last_name</th>
<th>Age</th>
</tr>
<tr>
<td>JillJo</td>
<td>RoSmith</td>
<td>39</td>
</tr>
<tr>
<td>Eva-Maria</td>
<td>Jacksson</td>
<td>51</td>
</tr>
<tr>
<td>JohnDep</td>
<td>DoeJo</td>
<td>43</td>
</tr>
</table></body>
</html>
Related subjects:
HTML Table Style
HTML Table Color
Table HTM
Round Table Borders
border-radius property, the borders table gets rounded corners:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-radius: 6px;
}
th, td {
background-color: #0C6;
}
</style>
</head>
<body><h2>Table border radius</h2>
<p>Table border radius 6px</p>
<table style="width:99%">
<tr>
<th>First_name</th>
<th>Last_name</th>
<th>Age</th>
</tr>
<tr>
<td>JillJo</td>
<td>RoSmith</td>
<td>39</td>
</tr>
<tr>
<td>Eva-Maria</td>
<td>Jacksson</td>
<td>51</td>
</tr>
<tr>
<td>JohnDep</td>
<td>DoeJo</td>
<td>43</td>
</tr>
</table></body>
</html>
Tags: Border without css, attribute, color style, collapse, radius, none, inline, color without css
Border Color
border-color property, set the color of the border.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-style:solid;
border-color: #96D4D4;
}
th, td {
background-color: #0C6;
}
</style>
</head>
<body><h2>Table border color</h2>
<p>Table border radius 6px</p>
<table style="width:99%">
<tr>
<th>First_name</th>
<th>Last_name</th>
<th>Age</th>
</tr>
<tr>
<td>JillJo</td>
<td>RoSmith</td>
<td>39</td>
</tr>
<tr>
<td>Eva-Maria</td>
<td>Jacksson</td>
<td>51</td>
</tr>
<tr>
<td>JohnDep</td>
<td>DoeJo</td>
<td>43</td>
</tr>
</table></body>
</html>
Summary of description
Border without CSS, attribute, color, style, collapse, radius, none, inline, color without CSS
HTML Table Border - html 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.