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.

Table Caption
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