working with web tables maureen smith professor, saddleback college tutorial 5
DESCRIPTION
Lesson Plan w Review w Tutorial 4 – Working with Web Tables Session 4.1 Session 4.2 Session 4.3 w ReviewTRANSCRIPT
Working with Web TablesMaureen Smith
Professor, Saddleback CollegeTutorial 5
Lesson Plan
Review Tutorial 4 – Working with Web Tables
• Session 4.1• Session 4.2• Session 4.3
Review
Introducing Web Tables
You will design a Web site for a public radio station
Kyle thinks the info is best conveyed in a table
There are two ways to insert a table of information on a Web page• A text table contains only text, evenly spaced
out in rows and columns• Text tables use only standard typewriter
characters so that even a line in a text table is created by repeating a typographical character, such as a hyphen, underline or equal sign
A graphical table appears as a graphical element• Allows you to include design elements such as
color, shading, and borders• You have greater control over the appearance• Can control the size of individual table cells and
text alignment• Can even create cells that span several rows or
columns
Graphical tables are more flexible and attractive than text tables• But there are some situations when you need to
use a text table• Text-only browsers can display only text• Working with the tags for graphical tables can
be complicated and time-consuming
So you may want to create two versions of your page
Using fixed-width fonts To create a text table, you have to control
the type of font that is used• Relies on spaces and the characters that fill
those spaces to create its column boundaries• Have to use a font that allots the same amount
of space to each character and to the empty spaces between characters
• This type of font is called a fixed-width font, or a monospace font
Most typeset documents (your book) use proportional fonts• The width of each character varies according to
the character’s shape• Character “m” is wider than “l”
Proportional fonts are more visually attractive so you might be tempted to use them
Courier Times New Roman
• But if you do, the varying width of the characters and spaces between characters might cause errors when the page is rendered
• Proportional fonts lose alignment when the font size is increased or decreased
• With fixed-width fonts, the columns remain aligned regardless of font size
Different browsers and operating systems may use different font sizes to display text, so should always use a fixed-width font to ensure that the columns remain aligned
Using preformatted text Recall that HTML ignores extra blank
spaces, lines, or tabs• However, to control the appearance of a table,
will need to use spaces and other characters• Can insert the <pre> tag to display
preformatted text--text formatted in ways that you want retained
• Any text formatted with this tag retains those extra blank spaces and lines
• It also displays text using a fixed-width font, which is what you want for the text table
When you use this tag, you insert blank spaces by pressing the spacebar to align the columns of text in the table
By using the <pre> tag, you’ve created a text table that every browser can display
• You’ve also ensured that the columns will retain their alignment no matter what font the browser is using
Now create the graphical table
Defining a table structure
Complicated because you have to enter a lot of information to define the layout and appearance• First step is to specify the table structure
• Number of rows and columns• Location of column headings• Placement of a table caption
• Then can start entering text and data into the cells of the table
Introducing Web Tables
You meet with Kyle to discuss design• He has already created a basic page with the
logo and list of links• See tutorial5/schedule.htm• Then add the nightly schedule
Marking Tables and Table Rows
To create a graphical table, start with the two-sided <table> tag• Identifies where table structure begins• Indicates where the table ends• Then you identify the number of rows by
inserting a two-sided <tr> tag at the beginning of each table row, starting with the top row and moving down
• The end of each table row is indicated by a </tr> tag
• Finally, within the <tr> tags you must indicate the location of each table cell with a two-sided<td> tag (table data)
HTML does not provide a means of specifying the number and placement of table columns
• Columns are determined by how many cells are inserted in each row
• If you have four <TD> tags in each table row, you have four columns
<table><tr>
<td> First Cell </td><td> Second Cell </td>
</tr></table>
This example has ten rows (you will do first three now)• Will include a class attribute, placing table in
the schedule class of elements to distinguish it from other tables on the site
• See tutorial5/schedule1.htm Nothing in those rows! Let’s look at cells
Marking Table Headings and Table Data XHTML provides a special tag for cells that
will act as table headings (column headings)• The two-sided<th> tag is used for cells within the
table just like the <td> tag• Difference is that that text formatted with the
<th> tag is centered within the cell and displayed in bold
• Table can have several rows of table headings
• In fact, because the <th> tag is a replacement for the <td> tag, can use it for any cell containing text you want displayed in centered bold type
You have a single row of table headings and remaining rows displaying time• See tutorial5/schedule2.htm
Other type of cells is data cells, marked with <td> tag and used for any content not considered a heading• Unformatted, left-aligned• See tutorial5/schedule3.htm• We now have 3 rows and 8 columns
Adding a Table Border
By default, browsers display tables without borders• Can add one with the border attribute<table border=“value”>• where value is the width of the border in pixels• See Figure 5-7 for different sizes• Note that the size of the internal gridlines is not
affected by the border attribute
• See tutorial5/schedule4.htm• This will add a 1-pixel border and browser will
insert gridlines around each of the table cells By default, table borders are displayed in
two shades of gray for a three-dimensional look• Can change that with:<table bordercolor=“color”>
• where color is an HTML color name or hexadecimal value
• This attribute has been deprecated, but is still widely supported (not by Opera)
Spanning Rows and Columns
Repeating the group info for each row is redundant• Let’s merge several cells into one• See Figure 4-37
We create a spanning cell—a cell that occupies more than one row or column• <th colspan=“2” rowspan=“3”> … </th>
Important to remember that when a cell spans multiple rows/columns, must adjust the number of cells used elsewhere• Let’s do some spanning!• See tutorial5/schedule5.htm• Let’s span rows!• See tutorial5/schedule6.htm
Let’s add the remaining KPAF evening programs with lots more spanning!• See tutorial5/schedule7.htm• Kyle likes the clear structure• Since some listeners live in different time
zones, let’s add a caption indicating Central time zone
Creating a Table Caption
Captions are used to provide descriptive info about the table
Use the <caption> tag<caption>content</caption>• Where content indicates is the content of the
caption• MUST appear directly after opening <table>
tag and only one is allowed per table
• By default, is centered above the table Can change that using align attribute
<caption align=“position”>content</caption>• where position is bottom or top, centered• Left or right, aligned with margin• Older browsers recognize only top and bottom
• Let’s add “All times listed in central time” to the table in bold
• See tutorial5/schedule8.htm
Marking Row Groups
A table’s rows can be divided into row groups• Each group element contains different types of
content and can be formatted differently• Three row groups are supported: one to mark
header rows, another for body rows, and a third for footer rows
• Following marks 2 rows as belonging to header row group
<thead><tr>
<th colspan=“2”>KPAF Programs</th>
</tr><tr>
<th>Time</th><th>Program</th>
</tr></thead>
Order is important• thead element must appear first; tfoot element
second, tbody element third• A table can contain only one set of thead and
tfoot elements, but any number of tbody elements
One purpose of row groups is to allow you to create different styles for groups of rows
Let’s use the thead element to mark header row and tbody element to mark rows that include broadcast times• See tutorial5/schedule9.htm
Marking Column Groups
Can organize columns into column groups and format one or more entire columns with a single style declaration or attribute• <colgroup columns</colgroup>• where columns is number of columns in group• The columns themselves are referenced using
the empty element <col />
Let’s create a column group for the programming table• These groupings will allow you to format the
two sets of columns in different ways later on• See tutorial5/schedule10.htm
Adding a Table Summary
For non-visual browsers, useful to include a summary of a table’s contents<table summary=“description”> … </table>• where description is a description of the table’s
purpose and contents• Does not affect appearance in visual browsers
See tutorial5/schedule11.htm
Formatting Tables with HTML Attributes Ready to format the table! Two approaches:
• Use HTML attributes• Use CSS styles• Both are used on the Internet
Setting Cell Spacing with HTML Cell spacing controls amount of space
between table cells• Default is 2 pixels; to change:<table cellspacing=“value”> … </table>• where value is size in pixels (only pixels)• See Figure 5-22 for different cell spacing• Changing this value also impacts size of
interior gridlines
Setting Cell Padding with HTML Distance between cell text and cell border is
known as cell padding• Default is 1 pixel, which may be too little<table cellpadding=“value”>• where value is size in pixels• See Figure 5-23 for different cell padding• Let’s increase cell padding and spacing• See tutorial5/schedule12.htm
Setting Table Widths and Heights in HTML Can set overall width/height of the table
• Overall size is determined by its content<table width=“value”>• where value is width in pixels or percentage of
width of the containing element• 100% of page element has table fill entire page• With an absolute size, table remains constant,
regardless of user’s monitor size
• Percentage allows table to match each monitor’s dimensions
• If table requires a certain width to display contents, will ignore a width value smaller
Many browsers, but not XHTML, support<table height=“value”>• where value is height in pixels or percentage of
height of element
Can also set width of individual columns• <colgroup width=“100” span=“7” </colgroup>• Sets width of each of 7 columns to 100 pixels
Setting Row Heights with HTML
Can set row heights• <tr height=“value”> … </tr>• Where value is height of row in pixels• IE also allows specifying height as a
percentage of height of the table• Now deprecated!
Formatting Table Borders with HTML By default a table border surrounds entire table
and each of the cells• To change this, use frame and rules attributes• Frame attribute determines which sides will have
borders<table border=“value” frame=“type”>• where type is box (default), above, border, below,
hsides, vsides, lhs, rhs, void and value is width of the table border
• See Figure 5-26 for frames values• See Figure 5-27 for effects of these values on a
table grid Rules attribute controls how gridlines are
drawn• <table border=“value”>• where value is all (default), cols, groups, or
none
• See Figure 5-28 for rules values• See Figure 5-28 for effect of these values
Both attributes might not be supported in older browsers
We will not make any changes to frame or rules values
Aligning Cell Contents with HTML By default, text is placed in middle of cell,
aligned with left edge; to change:align=“position”• where position is either left (default for td),
center (default for th), right, justify, or char• Char tells browser to align based on position of a
particular character like a decimal point• Default character is decimal, but can be changed
<td align=“char” char=“,”>• Not well supported
For a different vertical alignment of cell content, usevalign=“position”• where position is top, middle (default), bottom,
or baseline• See tutorial5/schedule13.htm
Kyle likes appearance• But this is only evening schedule• Still have morning and afternoon• To have them match would have to insert
various attributes into each table• He would rather use CSS so he can easily apply
formatting to all schedules at once
Formatting Tables with CSS
CSS includes support for tables• Has gradually replaced HTML attributes• Let’s replace the HTML table attributes with
external style sheet• See tutorial5/table.css• See tutorial5/schedule14.htm
Ready to begin creating the style sheet
Table Border Styles
Unlike HTML border attribute, can apply one set of borders to the table itself and another set of borders to individual cells• See tutorial5/tables1.css
Preventing line wrap
If you change widths, might want to make sure contents of certain cells don’t wrap• Like name or date• To prevent line wrapping:<td nowrap=“nowrap”> or <th
nowrap=“nowrap”> We will not modify width or height
Formatting table contents
How ‘bout aligning group names to tops of their cells and race times right-aligned?• Sans-serif font• Colored background• Table aligned with right margin• Article text flowing around
Let’s right-align each time value and align group names with tops of their cells• See tutorial4/race15.htm
Formatting table text
Can apply same text and font styles for table text• Styles cascade down through table structure,
from table element, through row groups and table rows, down to individual cells
• To change font style of all text in a table, apply a style to the table element
• To change font style of table body, apply to tbody element
Let’s display all text in a sans-serif font• Font size for table to 1em, but with the body
text at 80% of that size• See tutorial4/race16.htm• Older browsers may need a <font> tag instead
of a style tag
Setting the background color
Table elements support same background-color style as page• Color styles cascade down through the table
structure• Let’s change the header row to yellow, group
names to light blue and light green, and rest of table in white
• See tutorial4/race17.htm
Setting the background image
You can add a background image to a tablebackground-image: “url”• Can be applied to entire table, row group, row,
or individual cell We do not need any images in our table
Aligning a table on a web page
Let’s align the table with the right margin• Rest of the article text will wrap around it• Use same style used to float an inline imagefloat: position• where position is either left or right• Can use margin style to set margin space
around floating table
Using Tables for Page Layout
Page would look even better with summaries of upcoming broadcasts• See Figure 5-53 for a sketch of proposed
addition in a new column to the right of the schedule table
• See tutorial5/schedule15.htm• Then add styles to kpaf.css to set width• See tutorial5/kpaf.css
Then will begin creating the bar that lists upcoming programs• To avoid looking “boxy,” Kyle wants list
placed in a rectangle with rounded corners• No HTML element or CSS style to do that, but
can simulate effect using background images and a table
Introducing the Jigsaw Layout
Tables can contain any page content• Inline images, headings, paragraphs, lists, other
tables• A 3-column layout could be simulated by
enclosing entire page within a table containing a single row with 3 columns
• Table borders hidden, leaving only content visible
Tables support wide variety of possible page layouts• Jigsaw layout involves breaking up the page
content into separate cells that are then joined together like pieces in a jigsaw puzzle
• See Figure 5-56• 14 table cells!!
Defining the Structure of a Jigsaw Table Figure 5-57 shows a jigsaw layout for list of
upcoming programs• Cell borders removed in final version• 3 rows and 3 columns with 8 background
images• Middle cell has content• Browser renders it without gridlines so it
appears a rectangle with rounded borders
• See tutorial5/schedule16.htm• Next we assign class names to the 9 cells
• Only the center cell will have content• Remaining will display outside borders• See tutorial5/schedule17.htm• Let’s work on the design
• Will insert styles for the roundedBox table in an external style sheet named rounded.css
• See tutorial5/rounded.css• See tutorial5/schedule18.htm
In a jigsaw layout, don’t want seams to appear between cells• Have to collapse table borders and set cell
padding to 0 pixels• And let’s add space between table and
surrounding page content
• See tutorial5/rounded1.css Next will define sizes of the 8 cells that
constitute the outer edges• Because box will vary in width and height
depending on content, different cells need to be free to move in different directions
• Left/right sides should expand in vertical direction to accommodate table content
Each cell must be large enough to display border image files• But the top border is free to expand
horizontally, but must be tall enough to display top border image
• Remember that a width or height value of auto allows browser to change element to match content
• See tutorial5/rounded1.css Won’t set width or height for boxContent
because that should expand to match content
Adding the Rounded Border
Now put background images in 8 outside cells• See Figure 5-63
Each image is tiled in a different way• Left and right images are tiled vertically, filling
up entire background of left/right cells• Top and bottom images tiled horizontally,
filling backgrounds of top/bottom cells
• Corner cells do no tiling, remaining fixed• See tutorial5/rounded2.css
Adding the Box Content
Now we can enter text into roundedBox table• Will test our styles first by inserting some
simple text to verify accuracy in design• See tutorial5/schedule19.htm
This design is flexible and will expand to match content placed in center cell
Now replace that text with the complete list• Kyle has created a style sheet for that list• Can copy and paste that code directly into
rounded box table and then link page to Kyle’s style sheet
• See tutorial5/newshows.txt to copy code• See tutorial5/schedule20.htm
Exploring the Controversy over Table Layouts Not all Web designers like tables for
anything but tabular info Some challenges on page 324:
• Table layouts are not in the spirit of HTML• Difficult to revise• Take longer to render• Can be code-heavy• Can be inaccessible to users with disabilities
Despite these challenges, most Web page layout using tables will not disappear• Layout techniques best suited to widest variety
of browsers and operating environments
Creating a Rounded Box Using div Containers Kyle wants to add another rounded box to
schedule page• Will contain name and description of program
currently running• Actually hundreds of techniques to create
rounded borders without using tables• This one was introduced by a Web designer
Basic idea is to nest several levels of div elements within one another• Since they have no padding and no margin
spaces, they will completely superimpose upon one another—creating a stack of div elements that all occupy the same space
• Any background image from an element lower in the stack will be visible unless obstructed by an image higher in the stack
Nesting div Containers
• See Figure 5-70• Notice the corner images obstruct the view of
the side images so it appears as one seamless curve
• See tutorial5/schedule21.htm You used the same class names earlier
• No accident!
• The 8 div elements fulfill same role of creating rounded borders as the 8 table cells did in the table layout
• But you need is add a style to place a 5-pixel margin around roundedBox and 16 pixels of padding to boxContent
• Because of how IE treats nested div elements, will place box using relative positioning to ensure all nested divs line up properly
• See tutorial5/rounded3.css Kyle will talk to KPAF programmers to
write code that will automatically insert name of currently-airing program into the rounded box
Tips for effective use of tables
Diagram the table layout before you start writing your HTML code
First create a table structure with minimal content• Once the layout appears correct, start
formatting the content within the table cells and add more content
Insert comment tags throughout the table layout to document each section
Indent the code for the various levels of nested tables to make your code easier to interpret
Enter opening and closing table tags at the same time in order to avoid the error of either omitting or misplacing the closing tag
Test and preview your layout as you proceed in order to catch errors early in the design process
Limit the number and extent of nested tables, since they can increase the amount of time required to render a page and cause accessibility problems for non-visual browsers
Use cell padding and cell spacing to keep the table content from appearing too crowded
Use row spanning to vary the size and starting point of articles within a columnar layout• Side-by-side articles that start and end at the
same location are often visually boring and can be difficult to read
Avoid using more than three columns of text• Too many columns can result in column widths
that are too narrow Use fluid elements to reduce the amount of
unused space in the browser window• Use fixed-width elements when you need to
precisely place elements on the page