HTML table with border between cells
Although a style
attribute could easily be coded on the <table> tag to add a border style to an HTML table (<table style="border: 4px inset gray">
), this will only create a border around the whole table:
First Column Heading | Second Column Heading | |
---|---|---|
This is an example of an HTML table footer. | ||
Row 1 | Row 1 Column 1 | Row 1 Column 2 |
Row 2 | Row 2 Column 1 | Row 2 Column 2 |
For an HTML table with borders between cells, each cell needs the border style. Since coding a style attribute on every cell would be extremely rendundant, the easiest and simplest way to add the border style attribute is using CSS. Code a class
attribute on the <table> tag as shown in the HTML table example above. Then add the border styles using a link tag for a style sheet containing the following CSS code:
table.border { border-collapse: collapse; } table tr { vertical-align: top; } table.border th, table.border td { border: 4px inset gray; }
The value of "collapse"
for the CSS border-collapse
style displays a single border between cells rather than the default which gives each cell its own separate border. The CSS vertical-align
attribute shown aligns the text in each table row at the top of the cells in that row, unless overridden as shown for the table headings in the table example code above. Note that the CSS border
style is applied to the <th> tag and <td> tag on tables with borders in order to display a border around each table cell.
Multiple Column Heading | ||
---|---|---|
First Column Heading | Second Column Heading | |
This is an example of an HTML table footer. | ||
Row 1 | Row 1 Column 1 | Row 1 Column 2 |
Row 2 | Row 2 Column 1 | Row 2 Column 2 |