++

TablesUsing HTML

++Today

Introduction to Tables

Instructor lead introduction to tables

Practice table exercises

Minimal Table Structure

<table><table>

</table></table>

Start a Start a TableTable

End a End a TableTable

Minimal Table Structure

<table>

</table>

<tr> </tr>

Table RowTable RowBeginBegin

Table RowTable RowEndEnd

Minimal Table Structure

<table>

</table>

<tr>

<tr><tr>

<tr>

</tr>

</tr></tr>

</tr>

<th><th></th></th>Table HeadTable Head

Minimal Table Structure

<table>

</table>

<tr> </tr>

<th> </th>

Cell Cell BegiBeginsns<td><td>

Cell Cell EndEnd

ss</td></td>

Minimal Table Structure

<table><tr><th>Name</th><th><Item #</th><th>Type</th><th><Finish</th><th>Price</th></tr>

<tr><td>Bacchus</td><td>48059</td><td>Wall Mount</td><td>Interior Plaster</td><td>$95</td></tr>…</table>

++Table - Cell Padding

<table cellpadding=”2"cellpadding=”2"> <table cellpadding="#"cellpadding="#"> Adds space between the contents of a cell and it's border.

<table cellpadding=”10"cellpadding=”10">

++Table - Cell Spacing

<table cellspacing=”2"cellspacing=”2"> <table cellspacing="#"cellspacing="#"> Adds space between the cells of a table.

<table cellspacing=”10"cellspacing=”10">

++Table -Caption and Summary

Caption Element used for a title or brief description

<table><table><caption>Nutritional Information</caption><caption>Nutritional Information</caption>

Summary Attribute used to provide a more lengthy description

<table <table summary ="A listing of the calories summary ="A listing of the calories and fat content" >and fat content" >

++Table -abbr attribute

The abbr attribute specifies a shorter version of the content in a cell

Abbreviated names should be short since user agents may render them repeatedly. For instance, speech synthesizers may render the abbreviated headers relating to a particular cell before rendering that cell's content.

<tr>

<th abbr="Name">Course Name</th>

<th abbr="Tutor">Course Tutor</th>

<th>Summary</th> <th>Code</th> <th>Fee</th>

</tr>

++Table -scope attribute

The scope attribute defines a way to associate header cells and data cells in a table.

<tr> <th scope="col">Name</th> <th>Item #</th> <th>Type</th> <th>Finish</th> <th>Price</th> </tr>

scope="col" scope="col" and scope="row" are the most common values.

++Table -

These elements will not affect the layout of the table by default. However, you can use CSS to let these elements affect the table's layout.

<thead> & <tbody>

<table>

</table>

<tr><tr>

<tr>

<tr>

</tr></tr></tr>

</tr>

<th> </th>

<thead><thead> </thead></thead><tbody<tbody>>

</</tbody>tbody>

++Table –colspan and rowspan attributes

<tr> <tr> <th <th COLSPAN="2"COLSPAN="2">Production>Production</th> </th> </tr></tr>

Use to span table cells across more than one row or column.

<tr> <th ROWSPAN="3">Production</th> <td>Raha Mutisya</td> <td>1493</td></tr>