DIGI 220 - HTML Tables

VIU Media Studies Department - Robin Davies

Lecture Overview

  • Tables Overview
  • A Simple Table
  • Table Rows
  • Table Data & Header Cells
  • Colspan & Rowspan

Understanding Tables

  • HTML Tables...
    • Can contain any valid body elements (block or inline text, images, links, etc.)
    • Present information in a grid of rows & columns
  • Please, never use tables for layout - even though many sites out there are still built with tables, such as this one - DON'T DO IT!
  • When you read web design resources which discuss using tables for layout, consider only the examples which express tabular data

A Simple Table

<table>
 <tr>
  <th>Month</th>
  <th>Savings</th>
 </tr>
 <tr>
  <td>January</td>
  <td>$100</td>
 </tr>
</table>

In some examples you may see the border attribute on the opening table tag, but it is not available in HTML 5.

A Simple Table Explained

Month Savings
January $100
  • The enclosing element is the table element
  • Within the table, we create a tr element for each row we wish to have in our table
  • Within each tr, we create a th or td element for each header or data cell we want in our row
  • This example contains two rows: the top one has two th elements, and the bottom one has two td elements

th & td Elements

Month Savings
January $100
  • Go inside each tr element to create the cells & content of the rows
  • th indicates a header cell, and is usually centered and rendered bold by the browser
  • td indicates a data cell, and is usually left-justified

colspan Attribute

  • Used to allow th & td elements to span multiple columns, building more complex tables

    <th colspan="2">Month and Savings</th>
Month and Savings
January $100

rowspan Attribute

  • Used to allow th & td elements to span multiple rows, building more complex tables
    <tr> <td rowspan="2"> $100 </td> <td> January </td> </tr> 
    <tr> <td> February </td> </tr>
    
Savings Months
$100 January
February
$200 March

Setting Up Your Table in HTML

  • You may want to make a sketch first to help organize/visualize your data.
  • Make liberal use of spacing and tabs when formatting your code!
  • There are quite a few additional attributes for building HTML tables, though many of them are for presentation purposes and are thus unavailable in HTML 5
  • Our formatting will be done with CSS.

CSS for tables...

table, td, th {
 border: 1px solid #FF0; 
 padding: 0.5em;
}
Month Savings
January $100

scope Attribute

  • Apply this attribute to your th elements to indicate the grouping scheme for aural readers
  • If your orientation is columns (header cells on top):

    <th scope="col">
  • If your orientation is rows (header cells on left):

    <th scope="row">

caption Element

  • Used to include a caption in a table
  • Can contain valid body content
  • Usually comes immediately after opening table tag
Here's a table with a caption
Month Savings
January $100

col and colgroup elements

  • Allow you to label columns or groups of columns for structural purposes
  • Added immediately after the table or caption element
    <col class="dataCol" />
  • This would create a column area (the first column in your table) and assign it the class "dataCol"
  • Particularly useful when using CSS to format tables
  • See w3schools - col, colgroup - for examples