Tables Learning Web Design: Chapter 8
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Tables
Learning Web Design: Chapter 8
Overview of Tables Uses for tables How to create a table Using CSS to style a table Nested tables Advanced table topics Accessibility issues with tables
Uses of Tables Tables should be used primarily to
hold tabular data Many existing Web pages use tables
to create the page layout Because of accessibility issues and
performance issues, page layout should be done with CSS
CSS also allows you to manage content separately from the presentation
Basic Table Structure Tables are made up of cells
arranged into rows
Cell1 Row1 Cell2 Row1 Cell3 Row1
Cell2 Row2 Cell 2 Row2 Cell3 Row2
Row 1
Row 2
Table
Table HTML Tags < table> </table> -
Defines a table <tr> </tr> -
Defines a table row <th> </th> -
Defined a table heading <td> </td> -
Defines a table data cell
Table in Code Ending tags are required for tables,
rows and cells to meet XHTML standards
<td> Cell1 Row1 </td> <td> Cell2 Row1 </td>
<td> Cell1 Row2 </td> <td> Cell2 Row2 </td>
<table>
<tr>
<tr>
</table>
</tr>
</tr>
Empty Cells Some browsers will display cells that
have nothing in them <td></td>
Some browsers treat empty cells as if they don’t exist at all
You can use a character in the cell if you want it to be displayed <td> </td>
Table Caption A caption visually informs the viewer
with the purpose of your table Use the <caption> tag directly following
the opening <table> tag Provide a caption for sighted users and a
summary for viewers using screen readers
<table border=“1”> <caption> Vital Statistics</caption>
Table Attribute - Summary
The summary of a table is never displayed in visual browsers
It is exclusively designed for screen readers and speech browsers
A summary is usually a longer description than the caption
<table border=“1” summary=“Provides student vital statistics”>
Table Attribute- border
border=“number” Specifies the thickness of the border Without a value, defaults to 0 pixels Only specifies the outer frame of the table
While the border attribute is not deprecated, the CSS border property provides more flexibility border: solid 2px #FF0000; border-width: 5px;
Table Caption and Summary Example:
<table border= “1” summary=“Vital Statistics of Students”><caption> Vital Statistics </caption> <tr>
<th> Name </th><th> Height </th><th> Weight </th>
</tr> <tr> <td> Alison </td>
<td> 5’4” </td><td> 140 </td>
</tr> <tr>
<td>Tom </td><td> 6’0” </td><td> 165 </td>
</tr></table>
Table Caption in a Browser:
CaptionCaption
HeadingHeading
Table CellsTable CellsTable DataTable Data
Table Attributes- cellpadding and
cellspacing
cellpadding= “number” Controls the amount of space
between cell contents and its border
cellspacing= “number” Controls the amount of space
between cells
Cellpadding Example:
cellpadding= cellpadding= “20”“20”
Cellspacing Example:
<table<table
cellspacing= cellspacing= “10”“10”
border = “10” border = “10” >>
Cell Attribute - colspan Specifies the number of columns
for a cell to span <td colspan=“2”> -
Tells the browser to fill the horizontal space of two cells
Table colspanExample:<html>
<body><table border="1"> <tr>
<td colspan="2">Cell 1</td></tr> <tr>
<td>Cell 2</td> <td>Cell 3</td> </tr></table></body></html>
Cell Attribute - rowspan Specifies the number of rows for
a cell to span <td rowspan=“2”> -
Tells the browser to fill the vertical space of two cells
Table rowspanExample:<html>
<body><table border="1"> <tr>
<td rowspan="2">Cell 1</td>
<td>Cell 2</td> </tr> <tr> <td>Cell 3</td> </tr></table></body></html>
Hint: Add comments for clarity
<table border="1"> <tr>
<td rowspan="3">Cell 1</td>
<td>Cell 2</td> </tr> <tr> <! Cell 1 from above --> <td>Cell 3</td> </tr></table>
Having Trouble Planning? Sketch your table before trying to
create it Indicate where the rows and
columns will fall Mark the cells that span multiple
rows or columns
What would this table look like?
How many rows? 3 rows
How many columns? 2 columns
Row1 colspan? Yes, colspan 2
Row2 rowspan? Yes, rowspan 2
Planning
Solution:<html><body><table border="1"> <tr>
<td colspan=“2">Cell 1</td><! Cell 1 takes up two cells --
> </tr> <tr>
<td rowspan="2">Cell 2</td> <td>Cell 3</td> </tr> <tr> <! Cell 2 takes up two cells -->
<td>Cell 4</td> </tr></table></body></html>
Table Attribute - width width = “number or percentage”
width=“500” width=“80%”
The width attribute specifies the width of the entire table
By default the table will be sized to fit the needs of its contents
While not deprecated in XHTML 1.0, table width should be set using CSS
Fixed or Dynamic Width Fixed table width in CSS
Value is a number: width: 500px; The table width will not change
according width of the containing element
Dynamic table width in CSS Value is a percentage: width: 50%; The table will grow or shrink depending
on the width of the window or containing element
Note: The table height attribute has been deprecated.
Cell Widths The first row cells in a table usually
determine the widths for the entire column
Because the width attribute is deprecated for <th> or <td> cells, you must use the CSS width or <colgroup> to set your column widths Fixed width example- width: 100px; Dynamic width example - width: 25%;
Dynamic Cell Widths If using percentages for dynamic cell
widths, the total of cell widths will be 100% of the table width
For example if 2 cells in the first row each have a width: 50%, then their total would be 100% of the table width If the table width is 80% of the window
width, then each cell will only be 40% of the window width
<style type="text/css">table { border:solid 1px #000000; width: 80%;}
td.half { width: 50%; border:solid 1px #000000; background-color:#CCCCCC;}</style>….<table>
<tr><td class=“half">First Row-Cell 1</td><td class=“half">First Row-Cell 2</td>
</tr><tr>
<td>First Row-Cell 1</td><td>Second Row-Cell 2</td>
</tr></table>
CSS Cell Width Example:
Dynamic Cell Width Example
Each cell in the first row has a dynamic width which is 50% of the table width (which is 80% of the window width)
Deprecated Table Attributes
These table attributes are being deprecated in XHTML 1.0 in favor of CSS methods align for <table> and <caption> bgcolor for <table>, <tr>, <th>, and <td> bordercolor for <table>, <tr>, <th>, and
<td> width for <th> and <td> height for <table>,<tr>,<th> and <td>
CSS Alternatives
Deprecated Attributes
CSS Alternatives
align float: leftfloat: rightmargin: auto and text-align: center
bgcolor background-color
bordercolor border-color
width width
height line-height for cell content
Table align in CSS The table align attribute has
been deprecated in favor of CSS methods for alignment
Like image alignment you could use the float property to left or right align a table float: left; float: right;
Centering a Table with CSS
Create a CSS class or table selector to provide alignment for the table Internet Explorer needs the text-align:
center in a containing <div> tag Use the width property to set the table width To center the table, use the margin: auto
style property to auto adjust the margins To align text within the table set text-align
<head><style type=“css/text”>div.centered <!– Needed for IE to center block-level table --> { text-align: center; }
table.autocentered <!– Table class to center for non-IE browers -- >{ margin: 0 auto; text-align: left; <!– Undo the div text-align: center inside table -->}</style></head>
<body><div class="centered"> <table class=“autocentered”> … </table></div>
Using CSS to
Center a Table
Cell and Row Attributes Horizontal alignment of text in one
cell or in a row is done with the align attribute align=“left(default)|center|right”
Vertical alignment of text in one cell or row is done with the valign attribute valign= “top|middle(default)|bottom|
baseline”
Cell and Row Align in CSS While align and valign have not
been deprecated for <th>, <td> or <tr>, in order to separate presentation from content use CSS for these inline alignments text-align: right; vertical-align: top;
Table, Row and Cell Attributes
bgcolor and bordercolor have been deprecated for <table>, <tr><td> and <th>
background is not valid for <table> Use CSS alternatives to set these
properties background-color: #CCCCCC; background-image : url(watermark.jpg); border: solid 2px #FF0000;
<style type="text/css">table { background-color: #CCFF22; border: solid 3px #FFCC22; width: 80%;}
td.background { border: solid 3px #000000; background-color:#CCCCCC;}tr.background{ background-color: #00FF33;}
</style></head>
<body><table><tr> <td class="background"> First Row 1</td>
<td >First Row2</td></tr><tr>
<td>Second Row1</td>
<td>Second Row2</td></tr><tr class="background">
<td>Third Row1</td><td>Third Row2</td>
</tr></table>
background-color and border in CSS
background-color and border in CSS Example
The cell background-color overrides the row or table background color
The row background-color overrides the table background-color
Priority Levels of Controls1. Cell Level attributes or CSS styles
have highest priority2. Row Level attributes or CSS styles
have next highest priority3. Table Level attributes or CSS
styles have next to the lowest priority
4. Outside Table Level attributes or CSS styles have lowest priority
<style type="text/css">td.background { border:solid 3px #000000; background-color: lightgreen;}tr.background{ background-color: lightblue;}table.background { background-color: yellow; border: solid 3px #FFCC22; width: 80%;}body{ background-color: #CCCCCC;}</style>
Very Lowest Priority
Highest Priority
Lower Priority
High Priority
Advanced Table Techniques
Grouping and Aligning Columns Grouping and Aligning Rows Using Frame and Rule Attributes Other Table Elements and
Attributes
Grouping and Aligning Columns Allows the creation of structural
divisions of table columns Use the <colgroup></colgroup>
element to enclose one or more columns
Allows the column group to share attributes or formatting
Colgroup Attributes Use these to modify the <colgroup>
span=“number of columns”-Must be an integer larger than 0
width=“number|percentage | 0*” Number is pixel value Percentage of the group 0* makes width the minimum that
will hold the data of the column
Table with Colgroups:
Colgroup
Code:<table border="1" width="100%”> <caption>Science and Mathematic Class Schedules</caption><colgroup width="20%" align="center" span=“1” valign="top"></colgroup><colgroup span="2" width="40%" valign="top"></colgroup> <tr> <th>Class</th>
<th>Room</th><th>Time</th> </tr>
<tr> <td>Biology</td><td>Biology Wing, Room 102</td><td>8:00 AM to 9:45 AM</td> </tr>
<tr> <td>Science</td><td>Science Wing, Room 110</td><td>9:50 AM to 11:30 AM</td> </tr>
<tr> <td>Physics</td><td>Science Wing, Room 107</td><td>1:00 PM to 2:45 PM</td> </tr>
</table>
Varying Colgroup Attributes Use <col> element if you don’t
want all the columns in the group to have the same width or appearance Enclose <col> tags in an <colgroup></colgroup>
<col> is a self-terminated tag
Grouping and Aligning Rows You can group rows in a table into
three sections: <thead>-Table Heading <tfoot>-Table Footer <tbody>-Table Body
Table Heading Requires an opening <thead> and
a closing </thead> tag Appears right after the <table>
tagor <colgroup> tags
Must include at least one row in the group
<thead> Example:
<table border=“1” width=“100%”>
<caption>Science and Mathematic Class Schedule</caption>
<colgroup width=“20%” align=“center” span=“1” valign=“top”>
<colgroup span= “2” width=“40%” valign=“top”>
<thead>
<tr>
<th>Class</th>
<th>Room</th>
<th>Time</th>
</tr>
</thead>
Table Footer Defines the footer of the table Requires an opening <tfoot> and
a closing </tfoot> tag Appears right after the table
heading if one exists Browser must know about the
footer section before the body of the table is defined
<tfoot> Example:
<tfoot>
<tr>
<th>Class</th>
<th>Room</th>
<th>Time</th>
</tr>
</tfoot>
Table Body After the table head and footer are
defined, you define the rows in the table body
Use the opening <tbody> and closing </tbody> tags
Is required if the table has a head and/or foot section or the table had more than one body
<tbody> Example:
<tbody><tr> <td>Biology</td>
<td>Biology Wing, Room 102</td><td>8:00 AM to 9:45 AM</td>
</tr> <tr> <td>Science</td>
<td>Science Wing, Room 110</td><td>9:50 AM to 11:30 AM</td>
</tr> <tr> <td>Physics</td>
<td>Science Wing, Room 107</td><td>1:00 PM to 2:45 PM</td>
</tr></tbody>
Frame and Rules Attributes Frame attributes affect how the
border of the table is rendered Rules attributes act similarly to
frame attributes, except it defines rules that appear between cells within a table
Frame Attributes void-No sides of border are visible (default) above- Renders only the border top below- Renders only the border bottom hsides-Renders top and bottom sides lhs-Renders left side of border rhs- Renders right side of border vsides- Renders right and left sides box- Renders all four sides border- Renders all four sides
Rules Attributes none- No rules are drawn around cells
(default) groups- Rules will appear between row
groups and column groups rows- Rules will appear between rows cols- Rules will appear between columns all- Rules will appear between all rows
and columns
Frame and Rules Code:
<table border="1“ frame="hsides" rules="groups”><caption>Science and Mathematic Class Schedules</caption><colgroup width="20%" align="center”
span=“1” valign="top"></colgroup><colgroup span="2" width="40%"
valign="top"></colgroup>
Frame and Rules for Table Example:
Tables within Tables You can nest tables within other tables For XHTML validation, the inner table
must be placed within a <td> open tag and a </td> close tag
You will be able to achieve more complicated tables with this method
Nested tables may cause problems with accessibility for users of screen readers
Nested Table Example:
Creating Accessible Tables The table summary and caption should
always be set for a data table For data tables, define column and
row headers with <th> tags A screen reader like Jaws will read the
cell headers before the cell data This "serializes" the table for a
visually impaired user The more complicate the data table, the
more difficult it is to make it accessible
<th> and the scope attribute The scope attribute can change the
default order in which table cells are read aloud in a screen reader The default order is:
left-to-right, top to bottom. Scope can be used to define whether
the header is a row or a column <th scope="col” > <th scope="row” >
<table border="1" summary="Black plums and bosca pears table with one level of row and column headers"> <caption>Prices for black plums and bosca pears in Sydney</caption> <tr> <td>nbsp;</td> <th scope=“col”>Black Plums</th> <th scope=“col”>Bosca Pears</th> </tr> <tr> <th scope=“row”>Wholesale</th> <td>$1.00</td> <td>$1.50</td> </tr> <tr> <th scope=“row”>Retail</th> <td>$2.00</td> <td>$2.50</td> </tr></table>
Accessible
Data TableExample:
Accessible Data Table
Example:
A screen reader like JAWS will read the 'wholesale' row like this: "wholesale, black plums: dollar one point OO,
bosca pears: dollar one point five O " Without <th> and scope it would be read:
" wholesale dollar one point 00 dollar one point five 0 "
Table Summary Tables are made up of rows and cells You can format at the table level, row level
and at the cell level colgroups and row groups allow for
grouping cells or rows in order to format them
Nested tables are possible by placing the inner table within a <td>cell
Tables should be used to hold tabular data Because of accessibility and
performance problems, avoid using tables for page layout
Related Documents
