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; }
</style>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; }
</style>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">.
| Fruit | Color | Quantity |
|---|---|---|
| Apple | Red | 10 |
| Orange | Orange | 12 |
| Banana | Yellow | 7 |
| Fruit | Color | Quantity |
|---|---|---|
| Apple | Red | 10 |
| Orange | Orange | 12 |
| Banana | Yellow | 7 |