MEDI 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>

A Simple Table Explained

• 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

• 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>

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>
  

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;
}

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

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