Setting the border for a table in CSS

1 Hour CSS
1 Hour CSS
Learn how to code in CSS in 1 hour. This class is set up for complete beginners!

With HTML 4, you can stipulate that a border be placed around the cells in a table using the border parameter, e.g.: <table border="1">. However with HTML5, use of the "border=" element for putting a border around elements of a table has been deprecated. E.g., if you check your HTML code for adherence to the HTML 5 standard with the Nu Html Checker provided by the World Wide Web Consortium, you will see an warning similar to the following one displayed, if you have the border parameter set in the HTML code for a table.

The border attribute on the table element is presentational markup. Consider using CSS instead. For example: table, td, th { border: 1px solid gray }
From line 130, column 1; to line 130, column 18
ure.</p>↩↩<table border="1">↩<capt

So how can you achieve the same effect, but make your HTML code HTML 5 compliant using Cascading Style Sheets, instead? One way is to include the following in the HEAD section of the HTML for a page.

<style type="text/css">
   table { border: 1px outset black; }
   th { padding: 3px; border: solid 1px black; }
   td { padding: 3px; border: solid 1px black; }

If you used that style section, all tables in the web page in which you used it would have those style settings applied. If, instead, you only wanted to have a border around some tables, you could use the following:

<style type="text/css">
   .bordered_table { border: 1px outset black; }
   .bordered { border: solid 1px black; }

If you create bordered_table and bordered class that can be applied to particular tables, then you can set a border around only specific tables in the page. The table below on the left shows what a table will look like when <table border="1"> is used. The table on the right shows what the same table looks like when <table class="bordered_tabled"> is used in conjunction with <th class="bordered"> and <td class="bordered">.

HTML 4: <table border="1">
CSS: .bordered_table, .bordered_th, .bordered_td
FruitColor Quantity
AppleRed 10
OrangeOrange 12
BananaYellow 7


TechRabbit ad 300x250

Justdeals Daily Electronics Deals1x1 px