The HTML border attribute doesn’t create the prettiest of borders for tables. You can use a CSS border, which gives you more flexibility in terms of design.
You can use the next CSS code to specify the border around the table:
.datatable
{
border: 4px solid #04B404;
border-collapse: collapse;
}
You can render the border around table cells with the next CSS code:
.datatable td, .datatable th
{
border: 2px solid #FE2E2E;
}
If you want to test how it is work you can use the next two test files:
File test.css
.datatable
{
border: 4px solid #04B404;
border-collapse: collapse;
}
.datatable td, .datatable th
{
border: 2px solid #FE2E2E;
}
File test.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>How to add a border to a table with CSS</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
<body>
<table class=”datatable” summary=”This table shows Apple Inc. Annual Data for years 2009 through 2012″>
<caption>Yearly Income Statements 2009 – 2012</caption>
<tr>
<th scope=”col”>In Millions of USD (except for per share items)</th>
<th scope=”col”>52 weeks ending 2012-09-29</th>
<th scope=”col”>52 weeks ending 2011-09-24</th>
<th scope=”col”>52 weeks ending 2010-09-25</th>
<th scope=”col”>52 weeks ending 2009-09-26</th>
</tr>
<tr>
<th scope=”row”>Revenue</th>
<td>156,508.00</td>
<td>108,249.00</td>
<td>65,225.00</td>
<td>42,905.00</td>
</tr>
<tr>
<th scope=”row”>Other Revenue, Total</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th scope=”row”>Total Revenue</th>
<td>156,508.00 </td>
<td>108,249.00</td>
<td>65,225.00</td>
<td>42,905.00</td>
</tr>
<tr>
<th scope=”row”>Cost of Revenue, Total</th>
<td>87,846.00</td>
<td>64,431.00</td>
<td>39,541.00</td>
<td>25,683.00</td>
</tr>
<tr>
<th scope=”row”>Gross Profit</th>
<td>68,662.00</td>
<td>43,818.00</td>
<td>25,684.00</td>
<td>17,222.00</td>
</tr>
<tr>
<th scope=”row”>Selling/General/Admin. Expenses, Total</th>
<td>10,040.00</td>
<td>7,599.00</td>
<td>5,517.00</td>
<td>4,149.00</td>
</tr>
<tr>
<th scope=”row”>Research & Development</th>
<td>3,381.00</td>
<td>2,429.00</td>
<td>1,782.00</td>
<td>1,333.00</td>
</tr>
<tr>
<th scope=”row”>Total Operating Expense</th>
<td>101,267.00</td>
<td>74,459.00</td>
<td>46,840.00</td>
<td>31,165.00</td>
</tr>
</table>
</body>
</html>
The next picture shows the result:
Adding a border to a table with CSS
There is a range of different values that you can apply to the CSS border-style property. These values are shown in the next table:
|
Constant |
Supporting Browsers |
|
double |
All CSS browsers |
|
groove |
|
|
inset |
|
|
none |
|
|
outset |
|
|
ridge |
|
|
solid |
|
|
dashed |
Netscape 6, Mozilla, IE 5.5/Win, IE 4/Mac |
|
dotted |
|
|
hidden |
Netscape 6, Mozilla, IE 5.5/Win, IE 4/Mac |