HTML Elements

◄Page 15►

Tables

Table Alternating Row Colors

Introduction

Organize information in columns and rows with HTML tables. Learn about table borders, dimensions, headers, spacing, basic styling and column groups, caption, thead, tbody and tfooter elements with scrollbars. Click a link below to see examples and markup.

Table Data List

Borders

Add borders around a table or between cells with different settings.

Dimensions

Change the width or height of the entire table or caption, individual or all cells, rows and columns.

Headers

Apply vertical or horizontal headers to a table.

Spaces

Add or remove spacing between cells.

Spanning

Apply attributes colspan or rowspan. Cause individual cells, or columns to cover a range of cells.

CSS

Apply interesting styles to a table.

Column Groups

Assign specific values to a set of column.

thead, tbody & tfoot

Assign specific values to a set of column.

Borders

The following's just a simple table. However, I styled the caption and tr attribute value as text-align:left.

caption,tr{text-align:left;}

Table Markup

This page re-uses the following markup with different styles and attributes.

Notice that tr declares a table row, td declares a space for table data and caption provides an overall header for the table, inside the table. By default the th cell text appears bold, in my browser. Also the th field declares a table header for each column.

The entire table markup follows.

<table>
<caption>
Learn About Tables
</caption>

<tr>
<th>One</th>
<th>Two</th>
<th>Three
</th>
</tr>

<tr>
<td>Gold</td>
<td>Silver</td>
<td>Bronze</td>
</tr>

<tr>
<td>Adams</td>
<td>Jamis</td>
<td>Talik</td>
</tr>

</table>

Border

Add a simple border to the table, header and data cells.

table.one, th.one, td.one,caption{
border: 1px solid black;
}

Dimensions

Add a style to the overall table, header cells, header, or individual cells to declare the width or height.

Add styles to th elements to assign width to all the columns below the header cells. You can also style the cell height individually or as a group with an external style sheet or internal rule-sets.

You can see below that the first and third column widths were adjusted. I didn't add a border to the overall table, either.

Spanning

Apply HTML attribute-value pairs with colspan or rowspan. Below the th colspan="2" applies to the first column. If you included a third column header here, it would have no aligning column data. The third column header would display with zero data cells under its column.

Be careful with colspan and rowspan attributes. Try to organize tables logically. Avoid unmatched columns and rows. However colspan can be very useful in some situations.

colspan

<th class="one" colspan="2">One</th>

rowspan

The following example renders the first column which spans three rows. Therefore we don't want any data cells under the first column.

<th class="one" rowspan="3">Winners</th>

Headers

Apply vertical or horizontal headers to a table. Replace td with th, wherever you want a header.

Spacing

Apply the following space between borders, for the entire table. The border-spacing, below, was applied to the following table.

style="border-spacing:30px;"

Spacing Versus Collapse

The border-collapse: collapse; style would remove the space between borders, which counteracts increasing the space between borders. collapse causes the border to display as one line. border-spacing creates a wider space between the outline and inline.

Increase Padding

You can increase the internal spacing within each cell with the following rule-set.

style="padding:8px;"

I created an internal rule set named pd which increases the padding for every element that you receives class pd. The class was applied to all th and td cells.

.pd{padding:32px;}

Increase Margins

Spacing within cells is accomplished with border-spacing. You don't need to apply cell margins.

CSS

CSS rule-sets can apply many unique effects. Perhaps the most useful and interesting effect easily applies color to alternating rows or columns. The following internal rule set, when applied to rows, causes every other row to display with a blue background and white foreground text color. The default row settings apply to opposite rows, which in this case have a white background.

tr.alt:nth-child(even) { 
background-color:blue;
color:white;
}

The following table has a few more rows, to highlight the rule-set. The width equals one hundred percent.

Column Groups

Column groups have a limited number of options for CSS style attributes.

<colgroup>

<
col 
span="2" 
style="background-color:red"
>

</colgroup>

Apply colgroups inside a table. Assign styles to the spanned columns, as follows. However, the validator I use expects every column to be including in the colgroup. Therefore add the other columns into the colgroup with or without a style. The sum of the span attributes equal three. That equals the sum of the columns.

<table 
class="one"
>

<colgroup>

<col 
span="2" 
style="background-color:#99ff99;"
>

<col 
span="1"
>

</colgroup>
...

</table
>

thead, tbody & tfoot

Tags thead, tbody and tfoot, allow developers to group cells in a table. They also enable scroll bars within the table. The thead, tbody and tfoot elements must be used together.

The thead element apparently sticks, when scrollbars are enabled. However, when I tested, thead moved with the scrollbars. To enable scroll bars include the following rule-sets in a block element, such as a div. Optionally you can assign the table to display in block mode, as follows.

Table: Header, Footer, Body, Scrollbars:

Header, Footer, Body, Scrollbars Markup

<table 
class="one"  
style="height:128px; display:block; overflow-y:auto;"
>

<thead>

<tr>
<th></th>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>


</thead>

<tbody>

<tr><td>
</td><td>Gold</td>
<td>Silver</td>
<td>Bronze</td></tr>

<tr><td>
</td><td>Adams</td>
<td>Jamis</td>
<td>Talik</td></tr>

<tr><td></td>
<td>Jordan</td>
<td>Doris</td>
<td>daniel</td>
</tr>
...
<tr>
<td></td>
<td>Jordan</td>
<td>Doris</td>
<td>daniel</td>
</tr>

<tr>
<td></td>
<td>Kayan</td>
<td>Eliza</td>
<td>Zoolander</td>
</tr>

</tbody>

<tfoot>
<tr 
style="font-weight:bold;">
<td>Most:</td>
<td>Kayan</td>
<td>Eliza</td>
<td>Zoolander</td>
</tr>

</tfoot>
</table>

Summary

You learned to organize information in columns and rows with HTML tables. You saw table borders, dimensions, headers, spacing, basic styling and column groups, caption, thead, tbody and tfooter elements with scrollbars. Click a link from the Data List above to see examples and markup.

Unusual HTML5 Skills

See the markup, CSS and results of various HTML5 elements, with styles and some unusual or seldom used techniques.

Tags