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 - Defines a table - Defines a table row - Defined a table heading - Defines a table data cell

Table in Code Ending tags are required for tables, rows and cells to meet XHTML standards Cell1 Row1 Cell2 Row1 Cell1 Row2 Cell2 Row2

Empty Cells Some browsers will display cells that have nothing in them 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

Table Caption A caption visually informs the viewer with the purpose of your table Use the tag directly following the opening tag Provide a caption for sighted users and a summary for viewers using screen readers Vital Statistics

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 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: Vital Statistics Name Height Weight Alison 5’4” 140 Tom 6’0” 165

Table Caption in a Browser: Caption Heading Table Cells Table 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= “20”

Cellspacing Example: <table <table cellspacing= “10” border = “10” > border = “10” >

Cell Attribute - colspan Specifies the number of columns for a cell to span - Tells the browser to fill the horizontal space of two cells

Table colspan Example: Cell 1 Cell 2 Cell 3

Cell Attribute - rowspan Specifies the number of rows for a cell to span - Tells the browser to fill the vertical space of two cells

Table rowspan Example: Cell 1 Cell 2 Cell 3

Hint: Add comments for clarity Cell 1 Cell 2 Cell 3

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: Cell 1 Cell 2 Cell 3 Cell 4

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 or cells, you must use the CSS width or 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

table { border:solid 1px #000000; width: 80%; } td.half { width: 50%; border:solid 1px #000000; background-color:#CCCCCC; } …. First Row-Cell 1 First Row-Cell 2 First Row-Cell 1 Second Row-Cell 2 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 and bgcolor for,,, and bordercolor for,,, and width for and height for,, and

CSS Alternatives Deprecated Attributes CSS Alternatives alignfloat: left float: right margin: auto and text-align: center bgcolorbackground-color bordercolorborder-color width heightline-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 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

div.centered { text-align: center; } table.autocentered { margin: 0 auto; text-align: left; } … 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, or, 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, and background is not valid for Use CSS alternatives to set these properties background-color: #CCCCCC; background-image : url(watermark.jpg); border: solid 2px #FF0000;

table { background-color: #CCFF22; border: solid 3px #FFCC22; width: 80%; } td.background { border: solid 3px #000000; background-color:#CCCCCC; } tr.background { background-color: #00FF33; } First Row 1 First Row2 Second Row1 Second Row2 Third Row1 Third Row2 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 Controls 1. Cell Level attributes or CSS styles have highest priority 2. Row Level attributes or CSS styles have next highest priority 3. Table Level attributes or CSS styles have next to the lowest priority 4. Outside Table Level attributes or CSS styles have lowest priority

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; } 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 element to enclose one or more columns Allows the column group to share attributes or formatting

Colgroup Attributes Use these to modify the 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: Science and Mathematic Class Schedules Class Room Time Biology Biology Wing, Room 102 8:00 AM to 9:45 AM Science Science Wing, Room 110 9:50 AM to 11:30 AM Physics Science Wing, Room 107 1:00 PM to 2:45 PM

Varying Colgroup Attributes Use element if you don’t want all the columns in the group to have the same width or appearance Enclose tags in an is a self-terminated tag

Grouping and Aligning Rows You can group rows in a table into three sections: -Table Heading -Table Footer -Table Body

Table Heading Requires an opening and a closing tag Appears right after the tag or tags Must include at least one row in the group

Example: Science and Mathematic Class Schedule Class Room Time

Table Footer Defines the footer of the table Requires an opening and a closing 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

Example: Class Room Time

Table Body After the table head and footer are defined, you define the rows in the table body Use the opening and closing tags Is required if the table has a head and/or foot section or the table had more than one body

Example: Biology Biology Wing, Room 102 8:00 AM to 9:45 AM Science Science Wing, Room 110 9:50 AM to 11:30 AM Physics Science Wing, Room 107 1:00 PM to 2:45 PM

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: Science and Mathematic Class Schedules <colgroup width="20%" align="center” span=“1” valign="top"> <colgroup span="2" width="40%" valign="top">

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 open tag and a 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 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

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

Prices for black plums and bosca pears in Sydney nbsp; Black Plums Bosca Pears Wholesale $1.00 $1.50 Retail $2.00 $2.50 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 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 cell Tables should be used to hold tabular data Because of accessibility and performance problems, avoid using tables for page layout