web i - 03 - tables
DESCRIPTION
Learning XHTML Tables for Web Development 1 Course suitable for degree following CIT/CIS/CS ACM model curriculum.TRANSCRIPT
EASING INTO WEB DEVELOPMENTDEVELOPMENT3 TABLES3. TABLES
INTRODUCTION1HTML2
3 TABLES3FORMS4 FORMS4HTTP5 HTTP5CSS6 CSS6CSS FRAMEWORKS7DIGITAL MEDIA8
2 USABILITY9
What are tables?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.i h l i piece together a complex image.
Basic Table StructureBasic Table Structure4
<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> ends a table.
<TR> <TD></TD> <TD></TD> </TR>
<TABLE>
<TD></TD>
<TD></TD>
<TD></TD> <TD></TD>
<TD></TD>
<TD></TD> </TR>
</TR>
</TR>
<TR>
<TR>
<TR>
</TABLE>
<table> Attributes<table> Attributes5
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
f frame Specifies how outer border should be displayed
rules Specifies horizontal/vertical divider lines 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 idth 70% cellspacing 0 cellpadding 0 ><table border=0 width=70% cellspacing=0 cellpadding=0 >
6
<tr> Attributes<tr> Attributes7
They are: align align content of rows horizontally left, right, or center
valigng align content of rows vertically top, bottom, or middle
Row attributes override table settings. Row attributes override table settings.<tr align=left valign=top>
<td> Attributes<td> Attributes8
M f ' Most of a table's structure and appearance is controlled at the cell level.
li align align content of rows horizontally left, right, or centerli valign
align content of rows vertically top, bottom, or middle colspan colspan makes cell extend across the specified number of cells
rowspan rowspan makes cell extend across the specified number of rows<td align=left valign=top width=50>
Spanning Rows and ColumnsSpanning Rows and Columns9
Cells in a table can occupy the space of more than one row or column via the rowspan or colspanattributes 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></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></tr></table>
colspan example<p><table border="1" width="75%">
<tr> <td colspan=2>one</td><td>two</td>
</tr><tr>
<td>three</td><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>two</td><td rowspan=3>three</td>
</tr><tr>
<td>four</td>/</tr>
<tr> <td>five</td><td>six</td>
</tr>
10
</table>
AlignmentAlignment11
This text needs to be at the top of the cell. How do you do it?
<table border=2 width=300 cellspacing=5><t ><tr><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>
AlignmentAlignment12
<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><table border=2 width=300 cellspacing=5><tr><td><img src="bread.jpg"></td><td align=center>title</td>
</tr></table>
AlignmentAlignment13
While we can align elements via align and valign, we should use CSS instead.
Tables for LayoutTables for Layout14
While the table element was intended for displaying tabular data, until the last few years, tables were generally used for layout.
15
16
Tables for LayoutTables for Layout17
C tl i t bl f l t i t Currently, using tables for layout is notrecommended, but is still quite common. Table-based layouts cause plenty of problems for y p y p
accessibility, unusual display devices (PDAs, phones, etc), and search engines.
As well, they can be very difficult to modify and As well, they can be very difficult to modify and maintain when complicated.
Recommended to use CSS instead for most layouts.U CSS h f l h d ff l Using CSS this way is unfortunately somewhat difficult.
Ideally, tables should be used only for displaying tabular data.tabular data.
Using a table to layout a form is also perhaps okay.
Accessibility FeaturesAccessibility Features18
A d t t bl b h d t h d f A data table can be hard to comprehend for 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 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 contains table data.
Grouping Table RowsGrouping Table Rows19
If you use the thead, tfoot and tbodyelements, 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.
Grouping Table RowsGrouping Table Rows20
<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><tr><td>Fred Smith</td><td>Greatest Songs</td>
</tr><tr>
td R d C ll /td<td>Randy Connolly</td><td>Hot HTML Hits</td>
</tr></tbody>
</table>
<th> element<th> element21
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><th>Header 2</th>
</tr><tr>
<td>Cell A</td><td>Cell B</td>
</t ></tr></table>
Header & Data relationshipHeader & Data relationship22
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.
Header & Data relationshipHeader & Data relationship23
<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><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"