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; }