HTML Table With Border

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

HTML Table With Border Design Pattern

Design pattern for an HTML table with border

HTML Table With Border Example

	Multiple Column Heading
	First Column Heading	Second Column Heading
Row 1	Row 1 Column 1	Row 1 Column 2
Row 2	Row 2 Column 1	Row 2 Column 2

This is an actual working demo of the table example code below.

See HTML-5's HTML Table Tutorial for more details on how to create an HTML table.

Table With Border Design Pattern Code

HTML Code for a Table with a Border

Here is the HTML code for the table demo above:

<table class="border" style="width: 100%">
   <thead>
      <tr>
         <th rowspan="2"></th>
         <th colspan="2"><#Multiple Column Heading#></th>
      </tr>
      <tr style="vertical-align: bottom">
         <th><#First Column Heading#></th>
         <th><#Second Column Heading#></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><#Column 1 data#></td>
         <td><#Column 2 data#></td>
      </tr>
      ...
   </tbody>
</table>

Following the avoid potentially conflicting input principle inspired in part by Segal's Law (A man with a watch knows what time it is. A man with two watches is never sure.), the existence of the border is controlled simply by presence or absence of the class="border" attribute. This avoids having to change a multitude of class and/or style attributes just to change the style of the border. Different style class selector names could be used to implement different border styles for different tables.

A CSS Style Sheet is used to specify the properties of the table border. In the style sheet, the names of any elements that need to be styled will include the class selector name specified in the <table class> attribute. This includes the selectors for the <table> element for the table itself and the <th> elements and <td> elements for the table heading and data cells.

table.border {
   border-collapse: collapse;
}

table.border th, table.border td {
   border: 4px inset #666666;
   padding: 4px;
}

Table With Border Examples

Examples of a Table with a Border in HTML

Here is the CSS code for the table with border demo above:

table.border {
   border-collapse: collapse;
}

table.border th, table.border td {
   border: 4px inset #666666;
   padding: 4px;
}

Here is the HTML code for the table with border demo above:

<table class="border" style="width: 100%">
   <caption>Table Caption</caption>
   <colgroup>
      <col style="width: 20%"/>
      <col style="width: 80%"/>
   </colgroup>
   <thead>
      <tr>
         <th rowspan="2"></th>
         <th colspan="2">Multiple Column Heading</th>
      </tr>
      <tr style="vertical-align: bottom">
         <th>First Column Heading</th>
         <th>Second Column Heading</th>
      </tr>
   </thead>
   <tfoot>
      <tr><td colspan="2">This is an example of an HTML table footer.</td></tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
      </tr>
      <tr>
         <td>Row 2 Column 1</td>
         <td>Row 2 Column 2</td>
      </tr>
   </tbody>
</table>

Valid HTML 5