HTML table add border and title
Table border
The <table>
tag can have an optional border
attribute that controls the table's borders. By default, browsers do not display a border around the table and cells, but the presence of the border
attribute indicates to the browser that the table must have a border.
According to the HTML 5 standard, the value of the border
attribute can be either 1
or an empty string (denoted as a pair of double quotation marks ""
). It does not matter what attribute value you specify, if it is present, then the border will be displayed:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page title</title> </head> <body> <h4>Table with border:</h4> <table border="1"> <tr><td>First</td><td>row</td></tr> <tr><td>Second</td><td>row</td></tr> </table> <h4>Table without border:</h4> <table> <tr><td>First</td><td>row</td></tr> <tr><td>Second</td><td>row</td></tr> </table> </body> </html>Try it »
If you don't like the default table view of a border, i.e. a double border, you can use the style
attribute by setting the CSS property border-collapse
with the value collapse
, this will give the border a standard view:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page title</title> </head> <body> <table border="1" style="border-collapse: collapse;"> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td></tr> </table> </body> </html>Try it »
Table title
Each table usually has a title describing its contents. To create a table header, use the <caption>
tag, usually it is placed immediately after the opening <table>
tag, but it can also be placed almost anywhere within the table between <tr>
elements.
A <caption>
tag can contain any elements that can be used in the body of an HTML document. By default, the contents of the <caption>
tag are displayed above the table and aligned to its center:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page title</title> </head> <body> <table border="1"> <caption>My first table</caption> <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr> <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr> </table> </body> </html>Try it »
The title location can be changed by applying the caption-side
CSS property to it. The caption-side
property can take only two values: top
and bottom
. Top
is the default value, it indicates that the title is located above the table. The bottom
value allows you to place the title below the table.
With this theme look: