demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Basic HTML for Tables

html / tables

Estimated reading time: 3 minutes

First, and most important, remember the Golden Rule: tables are for the use they were intended for, representing tabular data (lists of figures, etc). They are not for layout of graphics and text!

That being said, tables are relatively easy to construct, so long as you remember that they are made up of rows, with each row of the table containing cells. It is vitally important that the cell count on each row is the same. If they are not, horrid results tend to happen.

Tables start very simply, with a <table> tag. Each row in the table is signified by a <tr> tag, and each cell inside this row is listed in order with a <td> tag. All of these tags are nested, so the result looks something like this:

<table>
<tr>
<td>This is the content of cell one</td>
<td>This is the content of cell two</td>
</tr>
</table>

Which produces a table that will look something like this:

This is the content of cell oneThis is the content of cell two

The borders of the table are likely invisible in your browser, as this is the default UA style. Ironically, to make a table look the way we expect, we must use : a solution is provided in an upcoming article.

Also note that closing tags for the table cells and rows are optional in , although it is good practice to include them.

This simple piece of code creates a simple one row, two cell table. Alternatively, you could think of it as a “one row, two column” table. If we add another row, it will alter the code of the table as follows:

<table>
<tr>
<td>This is the content of the first cell in the first row</td>
<td>This is the content of the second cell in the first row </td>
</tr>
<tr>
<td>This is the content of the first cell in the second row</td>
<td>This is the content of the second cell in the second</td>
</tr>
</table>

This code creates the table you see below (again, without any styles applied.)

This is the content of the first cell in the first row This is the content of the second cell in the first row
This is the content of the first cell in the second row This is the content of the second cell in the second

There are two cell-specific attributes that you should be aware of: rowspan and colspan. colspan makes one cell “equal to” two or more cells, such as the following example:

<table>
<tr>
<td colspan="2">This is the content of the first cell in the first row, spanning two cells</td>
<td>This is the content of the second cell in the first row </td>
</tr>
<tr>
<td>This is the content of the first cell in the second row</td>
<td>This is the content of the second cell in the second</td>
<td>This is the content of the third cell in the second row </td>
</tr>
</table>

Note that the count of cells on each row is still the same: the first cell in the first row is now “worth” two cells, making a count of three cells on the first row, matching the second row.

rowspan is similar, except working down through rows, rather than across columns. A cell that has been rowspanned “eats” cells in the rows below, meaning that those rows have fewer defined cells:

<table>
<tr>
<td rowspan="2">This is the content of the first cell in the first row, rowspanned into the second row </td>
<td>This is the content of the second cell in the first row </td>
</tr>
<tr>
<td>This is the content of the first cell in the second row</td>
</tr>
</table>

Note that cells will automatically extend to their maximum width to accommodate whatever content is placed inside them. That limit is determined by the other cells, and the overall width of the table, determined by its associated style.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.