Working with Web Tables Maureen Smith Professor, Saddleback College Tutorial 5

Lesson Plan w Review w Tutorial 4 – Working with Web Tables Session 4.1 Session 4.2 Session 4.3 w Review

Introducing Web Tables w You will design a Web site for a public radio station w Kyle thinks the info is best conveyed in a table

w 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

w 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

w 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

w So you may want to create two versions of your page

Using fixed-width fonts w 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

w 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” w 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

w 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 w 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 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 w When you use this tag, you insert blank spaces by pressing the spacebar to align the columns of text in the table w By using the 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 w Now create the graphical table

Defining a table structure w 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 w 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 w To create a graphical table, start with the two-sided tag Identifies where table structure begins Indicates where the table ends Then you identify the number of rows by inserting a two-sided 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 tag Finally, within the tags you must indicate the location of each table cell with a two- sided tag (table data) w 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 tags in each table row, you have four columns First Cell Second Cell

w 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 w Nothing in those rows! Let’s look at cells

Marking Table Headings and Table Data w XHTML provides a special tag for cells that will act as table headings (column headings) The two-sided tag is used for cells within the table just like the tag Difference is that that text formatted with the tag is centered within the cell and displayed in bold Table can have several rows of table headings

In fact, because the tag is a replacement for the tag, can use it for any cell containing text you want displayed in centered bold type w You have a single row of table headings and remaining rows displaying time See tutorial5/schedule2.htm

w Other type of cells is data cells, marked with 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 w By default, browsers display tables without borders Can add one with the border attribute 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 w By default, table borders are displayed in two shades of gray for a three-dimensional look Can change that with:

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 w Repeating the group info for each row is redundant Let’s merge several cells into one See Figure 4-37 w We create a spanning cell—a cell that occupies more than one row or column …

w 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

w 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 w Captions are used to provide descriptive info about the table w Use the tag content Where content indicates is the content of the caption MUST appear directly after opening tag and only one is allowed per table

By default, is centered above the table w Can change that using align attribute content 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 w 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

KPAF Programs Time Program

w 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 w One purpose of row groups is to allow you to create different styles for groups of rows

w 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 w Can organize columns into column groups and format one or more entire columns with a single style declaration or attribute where columns is number of columns in group The columns themselves are referenced using the empty element

w 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 w For non-visual browsers, useful to include a summary of a table’s contents … where description is a description of the table’s purpose and contents Does not affect appearance in visual browsers w See tutorial5/schedule11.htm

Formatting Tables with HTML Attributes w Ready to format the table! w Two approaches: Use HTML attributes Use CSS styles Both are used on the Internet

Setting Cell Spacing with HTML w Cell spacing controls amount of space between table cells Default is 2 pixels; to change: … 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 w Distance between cell text and cell border is known as cell padding Default is 1 pixel, which may be too little 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 w Can set overall width/height of the table Overall size is determined by its content 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 w Many browsers, but not XHTML, support where value is height in pixels or percentage of height of element

w Can also set width of individual columns Sets width of each of 7 columns to 100 pixels

Setting Row Heights with HTML w Can set row heights … 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 w 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 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 w Rules attribute controls how gridlines are drawn 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 w Both attributes might not be supported in older browsers w We will not make any changes to frame or rules values

Aligning Cell Contents with HTML w 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

Not well supported w For a different vertical alignment of cell content, use valign=“position” where position is top, middle (default), bottom, or baseline See tutorial5/schedule13.htm

w 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 w 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 w Ready to begin creating the style sheet

Table Border Styles w 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 w If you change widths, might want to make sure contents of certain cells don’t wrap Like name or date To prevent line wrapping: or w We will not modify width or height

Formatting table contents w 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

w Let’s right-align each time value and align group names with tops of their cells See tutorial4/race15.htm

Formatting table text w 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

w 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 tag instead of a style tag

Setting the background color w 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 w You can add a background image to a table background-image: “url” Can be applied to entire table, row group, row, or individual cell w We do not need any images in our table

Aligning a table on a web page w 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 image float: position where position is either left or right Can use margin style to set margin space around floating table

Using Tables for Page Layout w 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

w 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 w 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

w 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 table cells!!

Defining the Structure of a Jigsaw Table w 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 w 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 w 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

w 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 w Won’t set width or height for boxContent because that should expand to match content

Adding the Rounded Border w Now put background images in 8 outside cells See Figure 5-63 w 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 w 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 w This design is flexible and will expand to match content placed in center cell

w 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 w Not all Web designers like tables for anything but tabular info w 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

w 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 w 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

w 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 w 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 w 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 w Diagram the table layout before you start writing your HTML code w 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

w Insert comment tags throughout the table layout to document each section w Indent the code for the various levels of nested tables to make your code easier to interpret w Enter opening and closing table tags at the same time in order to avoid the error of either omitting or misplacing the closing tag

w Test and preview your layout as you proceed in order to catch errors early in the design process w 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

w Use cell padding and cell spacing to keep the table content from appearing too crowded w 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

w Avoid using more than three columns of text Too many columns can result in column widths that are too narrow w 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