2. 1 INTRODUCTION
2 HTML
3 TABLES
4 FORMS
5 HTTP
6 CSS
7 CSS FRAMEWORKS
8 DIGITAL MEDIA
2 9 USABILITY
3. What are tables?
3
Tables can be used to:
display rows and columns of textual data.
create effects common to print, such as columns, paragraph
spacing, hanging indents, extra white space.
create a complex page layout.
piece together a complex i
i h l image.
4. Basic Table Structure
4
<table> starts a table.
<tr> table row, starts a new row.
<td> table data, starts a column with a row.
</td> ends table data.
</tr> ends a table row.
</table> ends a table
table.
<TABLE>
<TR> <TD></TD> <TD></TD> </TR>
<TR> <TD></TD> <TD></TD> </TR>
<TR> <TD></TD> <TD></TD> </TR>
<TR> <TD></TD> <TD></TD> </TR>
</TABLE>
5. <table> Attributes
5
border
lets you set a border around each cell
cellspacing
sets extra space between the cells. Default is 1
cellpadding
puts extra space inside the cells
frame
f
Specifies how outer border should be displayed
rules
Specifies horizontal/vertical divider lines
summary
Specifies table summary for accessibility
width
sets the width of table in pixels or percent of window
<table border 0 width=70% cellspacing 0 cellpadding 0 >
border=0 idth 70% cellspacing=0 cellpadding=0
7. <tr> Attributes
7
They are:
align
align content of rows horizontally left, right, or center
valign
g
align content of rows vertically top, bottom, or middle
Row attributes override table settings.
<tr align=left valign=top>
8. <td> Attributes
8
Most f
M of a table's structure and appearance is
'
controlled at the cell level.
align
li
align content of rows horizontally left, right, or center
valign
li
align content of rows vertically top, bottom, or middle
colspan
makes cell extend across the specified number of cells
rowspan
makes cell extend across the specified number of rows
<td align=left valign=top width=50>
9. Spanning Rows and Columns
9
Cells in a table can occupy the space of more than
one row or column via the rowspan or colspan
attributes of the td element.
<table border=2 width=300 cellspacing=5>
<tr>
<td colspan=2>Philosophers</td>
</tr>
<tr>
<td width=50%>Author</td><td width=50%>Title</td>
</tr>
</table>
<table border=2 width=300 cellspacing=5>
<tr>
<td rowspan=2>Names</td><td width=50%>Hobbes</td>
</tr>
<tr>
<td width=50%>Locke</td>
</tr>
</table>
11. Alignment
11
This text needs to be at the top of the cell.
How do you do it?
<table border=2 width=300 cellspacing=5>
<tr>
<t >
<td><img src="bread.jpg"></td>
<td>title</td>
</tr>
</table>
<table border=2 width=300 cellspacing=5>
<tr>
<td><img src="bread.jpg"></td>
<td valign=top>title</td>
g p /
</tr>
</table>
12. Alignment
12
<table border=2 width=300 cellspacing=5>
<tr>
<td><img src="bread.jpg"></td><td>title</td>
</tr>
</table>
This text needs to be in the middle of the cell.
How do you do it?
<table border=2 width=300 cellspacing=5>
<tr>
<td><img src="bread.jpg"></td><td align=center>title</td>
</tr>
</table>
13. Alignment
13
While we can align elements via align and valign,
we should use CSS instead.
14. Tables for Layout
14
While the table element was intended for
displaying tabular data, until the last few years,
tables were generally used for layout.
17. Tables for Layout
17
Currently, using t bl for layout i not
C tl i tables f l t is t
recommended, but is still quite common.
Table-based layouts cause p y of problems for
y plenty p
accessibility, unusual display devices (PDAs, phones,
etc), and search engines.
As well, they can be very difficult to modify and
maintain when complicated.
Recommended to use CSS instead for most layouts.
U
Using CSS this way is unfortunately somewhat d ff l
h f l h difficult.
Ideally, tables should be used only for displaying
tabular data.
Using a table to layout a form is also perhaps okay.
18. Accessibility Features
18
A d t table can b h d to comprehend for
data t bl be hard t h df
Those with sight disabilities
Search engines
To help with accessibility, you can
Add a <caption> element to a table
Provides descriptive info about table as a whole
Placed within table
Table rows can be grouped into <thead>,
<tbody>, and <tfoot> sections.
This division enables browsers to support scrolling of table
bodies independently of the table header and footer.
When long tables are printed, the table header and
footer information may be repeated on each page that
contains table data
data.
19. Grouping Table Rows
19
If you use the thead, tfoot and tbody
elements, you must use every element.
They should appear in this order: thead, tfoot and
tbody, so that browsers can render the foot before
receiving all the data.
Each of these groups contains <tr> elements.
20. Grouping Table Rows
20
<table border="1">
<caption>This is a caption</caption>
<thead>
<tr><th>Artist</th><th>Title</th></tr>
</thead>
<tfoot>
<tr><th colspan="2">This is my CD collection</th></tr>
</tfoot>
<tbody>
<tr>
<td>Fred Smith</td>
<td>Greatest Songs</td>
</tr>
<tr>
<td>Randy C
td R d Connolly</td>
ll /td
<td>Hot HTML Hits</td>
</tr>
</tbody>
</table>
21. <th> element
21
If you do not want the bother of row groups, you
can instead use the <th> element (instead of
<td> elements) to indicate that cells in the first row
of a data table are heading cells.
<table border = "1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</t >
</table>
22. Header & Data relationship
22
You can increase the accessibility of your tables by
establishing the relationship between the individual
table cells and their headers.
You do this by adding a unique id to each <th>
element.
23. Header & Data relationship
23
<table summary="This table charts all of the Flames Stanley Cup Appearances">
<caption>Calgary Flames in the Stanley Cup Final</caption>
<tr>
<th id="year">Year</th>
y
<th id="opponent">Opponent</th>
</tr>
<tr>
<td>1986</td>
<td>Montreal</td>
</tr>
<tr>
<td>1989</td>
<td>Montreal</td>
</tr>
/
<tr>
<td>2004</td>
<td>Tampa Bay</td>
</tr>
</table>
Voice reader would speak the following for the last row "Year 2004 Opponent Tampa Bay"