Learning XHTML Tables for Web Development 1 Course suitable for degree following CIT/CIS/CS ACM model curriculum.

1. EASING
INTO WEB
DEVELOPMENT
3.
3 TABLES

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

6. 6

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>

10. colspan example<p>
<table border="1" width="75%">
<tr>
<td colspan=2>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td colspan=3>six</td>
</tr>
</table>
rowspan example<p>
<table border="1" width="75%">
<tr>
<td rowspan=2>one</td>
<td>two</td>
<td rowspan=3>three</td>
</tr>
<tr>
<td>four</td>
</tr>
/
<tr>
<td>five</td>
<td>six</td>
</tr>
</table>
10

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.

15. 15

16. 16

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"