Tables
Tables have a long and controversial history in relation to the web. Tables were the original method for formatting and laying out web pages. Today, the common practice is to use them solely for what they were meant for: presenting tabular data.
Table of Contents
- The Basic Markup
- Table Headers
- Captions and Summaries
- Setting Table Width
- Table Borders
- Cell Padding
The Basic Markup
The most basic level markup for an html table is the tag <table>.
Inside of a table we have rows, columns, and cells. However, there is a not html markup for a column. Columns are determined by the number of cells placed within a row.
For example, lets say that we want a table with three rows and three columns that looked like the example below.
| Row One, Cell One | Row One, Cell Two | Row One, Cell Three |
| Row Two, Cell One | Row Two, Cell Two | Row Two, Cell Three |
| Row Three, Cell One | Row Three, Cell Two | Row Three, Cell Three |
(It looks pretty plain, we will get to the styling after covering the semantic markup)
Here is what the markup would look like for this table:
<table id="data_table">
<tr>
<td>Row One, Cell One</td>
<td>Row One, Cell Two</td>
<td>Row One, Cell Three</td>
</tr>
<tr>
<td>Row Two, Cell One</td>
<td>Row Two, Cell Two</td>
<td>Row Two, Cell Three</td>
</tr>
<tr>
<td>Row Three, Cell One</td>
<td>Row Three, Cell Two</td>
<td>Row Three, Cell Three</td>
</tr>
</table>
More Table Markup - Table Headers - the th tag
The first row in a table usually contains the headers for the columns. This can be markup up semantically by using the <th> tag instead of the <td> tag for the first row in your tables. See the example below.
<table id="data_table">
<tr>
<th>Header for Column One</th>
<th>Header for Column Two</th>
<th>Header for Column Three</th>
</tr>
<tr>
<td>Row One, Cell One</td>
<td>Row One, Cell Two</td>
<td>Row One, Cell Three</td>
</tr>
<tr>
<td>Row Two, Cell One</td>
<td>Row Two, Cell Two</td>
<td>Row Two, Cell Three</td>
</tr>
</table>
The table above would not display any differently in a web browser than the previous example. The key difference is meaningful semantic markup.
We can also use the <td> tag in our css to give the table headers a different look than the other table. This can be seen in the where we are now tables. Notice how the table headers are styled to have a dark grey/brown color.
More Table Markup - Captions and Summaries
Table captions and summaries are used to give readers a bit more information about the tables. This is especially helpful for viewers using screen readers. The screen reader would read the table caption and summary before proceeding into the entire table.
Table captions come right after the table tag and before the first row.
<table id="data_table">
<caption>A brief caption for the table</caption>
<tr>
<th>Header for Column One</th>
<th>Header for Column Two</th>
<th>Header for Column Three</th>
</tr>
<tr>
<td>Row One, Cell One</td>
<td>Row One, Cell Two</td>
<td>Row One, Cell Three</td>
</tr>
</table>
Captions will display, by default, like below. However, css gives us the power to display cations exactly how we want. Some designers will create a caption for accessibility purposes but turn it off with css (display: none).
| Header for Column One | Header for Column Two | Header for Column Three |
|---|---|---|
| Row One, Cell One | Row One, Cell Two | Row One, Cell Three |
Summaries are less common in html tables. They are an attribute to the table tag and therefore do not usually display in the browser.
Styling Tables
Table Width
There are two ways to set width for html tables: with an html attribute or with css.
HTML Table Attribute
The html width attribute can be applied to two logical tags within the table. It can be assigned to the table tag and the th (or td) tag.
By default the width of a table will spread to the largest width possible. Therefore, learning to master setting the width of tables can be really helpful.
Here is what it would look like to assign the width attribute to the table tag.
<table id="data_table" width="500px">
<caption>A brief caption for the table</caption>
<tr>
<th>Header for Column One</th>
<th>Header for Column Two</th>
<th>Header for Column Three</th>
</tr>
<tr>
<td>Row One, Cell One</td>
<td>Row One, Cell Two</td>
<td>Row One, Cell Three</td>
</tr>
</table>
The width attribute can also be applied to the th or tr tags. This can be helpful if you want a column (or table cell) to a certain width.
This is what it would look like.
<table id="data_table" width="500px">
<caption>A brief caption for the table</caption>
<tr>
<th width="30%">Header for Column One</th>
<th width="50%">Header for Column Two</th>
<th width="20%">Header for Column Three</hd>
</tr>
<tr>
<td>Row One, Cell One</td>
<td>Row One, Cell Two</td>
<td>Row One, Cell Three</td>
</tr>
</table>
Notice the value of the width attribute here is set using percentages. Width can be set using pixels, percentages, or even em.
Table Width with CSS
While using the html width attribute can be helpful in certain situations, I prefer using css. If you choose to use css to set the width for your tables it is extremely helpful to apply class and id attributes to your tables, th, and tr tags. This will allow you to define custom css styling for each of your tables.
Take a look at what the html markup would look like.
<table id="data_table">
<caption>A brief caption for the table</caption>
<tr>
<th id="column_one">Header for Column One</th>
<th id="column_two">Header for Column Two</th>
<th id="column_three">Header for Column Three</th>
</tr>
<tr>
<td>Row One, Cell One</td>
<td>Row One, Cell Two</td>
<td>Row One, Cell Three</td>
</tr>
</table>
Now lets go in and add some css styling to set the table exactly how you want it to look.
table#data_table {
width: 500px;
}
table#data_table th#column_one {
width: 30%
}
table#data_table th#column_two {
width: 50%
}
table#data_table th#column_three {
width: 20%
}
Although we have our widths set, the tables still don't look like tables, we need borders and cell padding.
Border Style
It is possible to add the border attribute to the table tag to create a border around each cell of the table. However, css gives us more flexibility over our table borders.
If you want your table to have a border around it, you would add the following css to your page.
table#data_table {
border: 1px #000000 solid;
}
As you see, this puts a border around the whole table. Try putting a border around table#data_table tr and table#data_table td until you get the combination of exactly what you are looking for. Try experimenting with a combination of the styles below and see how they affect your table.
table#data_table tr {
border: 1px #000000 solid;
}
table#data_table td {
border: 1px #000000 solid;
}
Here is what a table would look like with both width and borders applied. The css is below the table.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row One, Cell One | Row One, Cell Two | Row One, Cell Three |
table#data_table {
width: 500px;
border: 3px #ccc solid;
}
table#data_table th, table#data_table tr {
border: 1px #000000 solid;
}
table#data_table th {
background-color: #000;
color: #fff;
}
table#data_table th#col_one {
width: 30%
}
table#data_table th#col_two {
width: 50%
}
table#data_table th#col_three {
width: 20%
}
Cell Spacing and Padding
Like with many of the other table styling options, padding can be done with either css and html attributes. Also, as with the other styling options, I would suggest a combination of meaningful html markup and css styling.
There are two html attributes that deal with table spacing: cellspacing and cellpadding. Cell spacing is the distance between two table cells (td tags). Cell padding is the space between the wall of cell and the text.
There is not really a css equivalent for cellspacing (that I am aware of). Cellpadding, however, translates into css padding applied to td (and th) tags. Lets take a look at what applying some padding to the table above can do to help with the style.
NOTE: whatever you add in padding, you must subtract from the width of the table cell. It may be easier then to work with width in pixels.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row One, Cell One | Row One, Cell Two | Row One, Cell Three |
table#data_table {
width: 500px;
border: 3px #ccc solid;
padding: 3px
}
table#data_table th, table#data_table tr {
border: 1px #000000 solid;
padding: 5px;
}
table#data_table th {
background-color: #000;
color: #fff;
font-size: 1.2em;
padding: 10px;
}
There is one final piece to this cell spacing business, which is the border collapse property that can be applied to the table tag. However, IE6 does not have full support for this so use with caution. This is the same table as above with the following piece of css added.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row One, Cell One | Row One, Cell Two | Row One, Cell Three |
table#data_table {
border-collapse: collapse;
}
