Welcome to another article on Building Better Web Pages. This article series comprehensively covers building an HTML document: easily learned, but rarely perfected.
This article is dedicated solely to the <table> tag. Tables are everywhere, and almost every single one is improperly implemented. This article will show the proper syntax for your tables.
Improper formatting of your <table> tag may result in pages that don’t validate, improper JavaScript behaviors, and/or broken CSS. Even when elements are not being used, such as a table head, it is best practice to simply include them in your markup. This gets you in the habit of always properly coding your tables. Additionally, you might find yourself wondering, “Which comes first, a <tr> or a<tbody> ?” Having good habits will help you avoid improperly nesting your tags.
Solid Tip: If you create tables with JavaScript, omitting the tbody will cause your table to appear broken in Internet Explorer as soon as you insert it into the DOM.
Solid Tip: Notice the non-breaking space in the sample below. Always fill empty cells with or your CSS borders will be broken in certain versions of Internet Explorer.
<table> <thead> <tr> <th>ABC</th> <th>DEF</th> </tr> </thead> <tbody> <tr> <td>XYZ</td> <td> </td> </tr> </tbody> </table> |
Whenever you make a table, always cover your bases by using the above format.
