html, css, jQuery, PHP, mySQL

« | »

HTML From Scratch. 7:2 Tables

meadow

Use tables to set out data: here a biology project.

Before CSS, HTML tables were often used for layout and positioning. This is still a common practice, although frowned upon as the code can be hard to alter later. Using HTML tables for layout is also not semantic code, and therefore does not represent best practice. The semantic use of an HTML table is for use displaying a chart of data: so in the example below we will consider the proper use of a table to display the results of an experiment. Tables can be styled extensively with CSS (and HTML), including borders, individual cell colours, and fonts. Many interesting effects can be produced with patience and practice – whatever best practice says, playing with tables creatively is probably the best way to learn how to use them.

The basic idea

Tables consist of a grid of boxes, known as Table Data Cells. These are represented by the tag <td>, followed by the content of the Table Data Cell, and then the closing tag </td>.

Each row of boxes is enclosed within the Table Row tags: <tr> and </tr>. The table itself then encloses the entire set of rows and boxes, <table> … </table>

Example:

<table>

<tr><td>23</td><td>10</td><td>1</td></tr>

<tr><td>9</td><td>17</td><td>3</td></tr>

<tr><td>18</td><td>12</td><td>14</td></tr>

</table>

table

This table is not very useful: it lacks a caption, and there are no labels for rows or columns. The borders have been added here for clarity: you would need to use border=”1″ in your HTML, or border: 1px solid black in your CSS to produce them, together with the CSS property border-collapse: collapse (HTML tables have double borders, see overleaf for example).

To add a caption to your table, use the <caption> tag after the opening <table> tag. To add labels (headings) to the columns and rows, you can use the special tag <th> (Table Header Cell). This gives a cell which has bold writing automatically, so that you don’t have to specially style a <td>, and is semantic code.

Example:

<table>

<caption>My Biology Project</caption>

<tr><th></th><th>Meadow</th><th>Verge</th><th>Woodland</th></tr>

<tr><th>Daisies</th><td>23</td><td>10</td><td>1</td></tr>

<tr><th>Buttercups</th><td>9</td><td>17</td><td>3</td></tr>

<tr><th>Nettles</th><td>18</td><td>12</td><td>14</td></tr>

</table>

table

The resulting table from the code above: note Caption and Table Header Cells.Also note that the empty <th> produces a blank cell: if this table was styled with borders, this empty cell would also lack a border unless it contained at least a <br>.

Tables can also have separate sections: Table Head, Body and Foot. The tags for these are <thead>, <tbody> and <tfoot>. Each section can contain numerous rows of boxes, and using these extra markup tags enables each section to be styled differently. To be valid HTML5, a table should always use <tbody>, but <thead> and <tfoot> are optional. The order of markup is head-foot-body, as the top and the bottom of the table are rendered first before it expands to its final size.

Example (code below):

head foot and body

HTML tables have double borders. Use border-collapse: collapse; to overcome this. The thead, tbody and tfoot have been given different background colours with CSS.

example

The head and foot could also be used to contain extra captions – or perhaps you would like one data or header cell to stretch over more than one row or column. This can be achieved in the html by using the colspan and rowspan attributes. Remember to remove the cells which would have been displayed, to allow the table to maintain its proportions.

<td colspan=”2” rowspan=”2”>16</td>

Tags: , , , , , , , , , , , , ,

This entry was posted on Sunday, August 7th, 2011 at 9:57 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply