How to add a borders to a table with CSS

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”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://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

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