Working with Tables
Tables often get a bad rap from standards-based web developers due to the fact that for many years tables were used to layout web pages. That being said, you should never use tables for layout purposes, but they are perfectly acceptable as a means to mark up information that should be presented in a tabular format.
Here are the basic mark up elements (tags) of a table.
- <table> - Opens and closes a table
- <tr> - Table Row - Surrounds <td>(s) to create a table row
- <td> - Table Data - This represents each table cell.
- <th> - Table header - When appropriate, tables should have a header that include the Data types for a column or row
Here is an example of a bare bones Table structure with a horizontal header.
| Item | Quantity | Cost |
|---|---|---|
| Jolt | 6 | .75 |
| Doritos | 3 | 2.95 |
| Ramen | 12 | .99 |
Here is the code for the example above, Notice the addition of the border attribute on the <table> tag and scope attribute on the <th>
<table border="1">
<tr><th scope="col">Item</th><th scope="col">Quantity</th> <th scope="col">Cost</th></tr> <tr><td>Jolt</td><td>6</td><td>.75</td></tr>
<tr><td>Doritos</td><td>3</td><td>2.95</td></tr>
<tr><td>Ramen</td><td>12</td><td>.99</td></tr>
</table>
Other Table Attributes
- border*
- cellpadding* - The amount of space between the cell borders and the contents. The default is 2, so set it to 0 if you want no cellpadding.
- cellspacing - The amount of space between the table cells and the cells. The default is 2, so set it to 0 if you want no cellspacing.
- width* - If you want your table to have a pre-set width, then you should use the width attribute.
- scope - allows you to associate a header value with a column or row
- summary - allows you to summarize the tables content for accessibility purposes, added to the <table> tag
* should be styled with CSS rather than inline values when possible
