Styling Tables

21 Nov 2006 > 0 Comments

Creating a <div> based Template using CSS (Part: 6)

Tables are used to display tabular data.

They are also used for website layouts, but this practice is semantically incorrect, and (nowadays) completely unnecessary. See chapter one of this tutorial.

You can give your tables a small amount of styling, by adding a border to the <table> and the <td> elements, like this:

CSS

table, td {border: 1px solid #000;}

Table Basics

A simple table consists of three main elements.

Note: Other Table tags, including, <th>, <thead>, and <tfoot>, go beyond the range of this tutorial.

The <table> Tag

The <table> tag defines the table element:

<table>  </table>

The <tr> Tag

The <tr> tag defines a horizontal table row:

<table> 

<tr>

</tr>

</table>

The <td> Tag

The <td> tag defines a table cell. All tabular data is contained within <td>
tags:

<table> 

<tr>

<td> table data goes here </td>

</tr>

</table>

The above markup will render a basic single cell table:

table data goes here

The Colspan and Rowspan attributes

The <td> tag has two important attributes:

Colspan

The colspan attribute is used when you want a table cell (within a <tr>) to span two or more table cells (within another <tr>):

Mark up

<table>
<tr><td colspan="2">Colspan</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>

Colspan
1	2

Rowspan

rowspan is a little more complicated, but easy to get the hang of.

If you want a table cell (<td>) on the left to span two table cells on the right, table cell 1 must be contained within the same table row (<tr>). Then create another table row to contain table cell two.

Mark up

<table>

<!-- Table Row One -->

<tr><td rowspan="2">Rowspan</td><td>1</td></tr>

<!-- Table Row Two -->

<tr><td>2</td></tr>

</table>

Rowspan	1
	2

If you want one table cell (<td>) on the right to span two table cells on the left, you need to place table cell 1 (first) and the table cell containing the rowspan attribute (second) on the same table row (<tr>), and then create another row for table cell 2.

<table>

<!-- Table Row One -->

<tr><td>1</td><td rowspan="2">Rowspan</td></tr>

<!-- Table Row Two -->

<tr><td>2</td></tr>

</table>

1	Rowspan
2

Rowspan drives me nuts, but makes sense when you think about it

< Back to everything
Keep going… >

Related Posts

• Creating a <div> based Template using CSS (part 1 - 12)
• Creating rounded corners when working with screenshots
• Styling Horizontal Rules
• Styling Links
• Bullet images for list items