1. Designing a Web Page with Tables Maureen Smith Professor, Saddleback College Tutorial 4

2. Lesson Plan w Review w Tutorial 4 - Designing a Web Page with Tables Session 4.1 Session 4.2 Session 4.3 w Review

3. Objectives w Work with preformatted text to create a basic text table w Create the basic structure of a graphical table w Organize table rows into row groups w Add a caption to a table w Describe how to add summary info

4. w Create table borders and gridlines w Specify the width and height for different table elements w Format contents of table cells w Apply background image and color w Align a table and cell contents

5. w Describe the different types of page layouts that you can achieve with tables w Work with both fixed-width and fluid layouts w Create a newspaper-style layout using tables

6. Session 4.1 w You will design a Web site for a weekly edition of a newspaper Should have same look and feel as the printed one—classic, traditional In order to implement this design, you will learn how to create and format tables

7. Tables on the World Wide Web w Your first assignment is to place a marathon story With it, a table that lists the top three male and female finishers See Figure 4-1 w There are two ways to insert a table of information on a Web page

8. You can create a text table or a graphical table 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 See Figure 4-2

9. 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

10. 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

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

12. Creating a text table w The beginning of the file you’ll use has already been created The page consists of an article about the marathon You’ll add the race results table between the first and second paragraphs See tutorial3/race1.htm

13. 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

14. 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

15. But if you do, the varying width of the characters and spaces between characters might cause errors when the page is rendered See Figure 4-5 to see how a proportional font loses alignment when the font size is increased or decreased See Figure 4-6, with fixed-width fonts, to see that the columns remain aligned regardless of font size

16. 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

17. 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

18. 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 See tutorial4/race2.htm w By using the tag, you’ve created a text table that every browser can display

19. 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

20. 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

21. w The beginning of the page for the graphical table has already been created See tutorial4/race3.htm

22. Marking a table, table row, and table cell 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

23. 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

24. 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

25. w This example has two columns w You are going to create seven rows and four columns First row will contain column headings Remaining six will display the table’s data See tutorial4/race4.htm Add the text for each cell See tutorial4/race5.htm

26. Creating table headings 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

27. 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 See tutorial4/race6.htm

28. Creating row groups w Can classify a table’s rows into row groups that indicate their purpose in the table Three types: table header, table body, table footer Because order is important, table header must be listed before footer, and both must appear before the body To mark header rows:

29. table rows Can contain only one set of header rows w To mark header footer: table rows

30. Only one footer per table w To mark rows of table body: table rows Can have multiple body sections w Row groups are used for tables that draw data from external sources

31. Databases, XML docs Programs can be written in which contents of a table body span across several pages, with contents of header/footer repeated on each page Not all browsers support this w Creating groups does not affect appearance But can apply styles to groups to make them appear differently

32. w Let’s mark the table’s header and body No footer See tutorial4/race7.htm

33. 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

34. 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

35. Let’s add “Race Results” to the table in bold See tutorial4/race8.htm

36. 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 Now we format the table!

37. Session 4.2 w Working with the table border Lack of gridlines and borders makes the table difficult to read Let’s add borders, gridlines, and background color And control placement, size, and table border

38. Adding a table border w By default, browsers display tables without borders Can add one with the BORDER property where value is the width of the border in pixels See Figure 4-18 for different sizes Note that the size of the internal gridlines is not affected by the border attribute

39. w Let’s add a 5-pixel border See tutorial4/race9.htm w By default, table borders are displayed in two shades of gray for a three-dimensional look Can change that with:

40. where color is an HTML color name or hexadecimal value This attribute has been deprecated, but is still widely supported (not by Opera) See Figure 4-21 To work around discrepancy between IE and Netscape, can use bordercolorlight and bordercolordark See Figure 4-22

41. w Let’s change the color of the table border See tutorial4/race10.htm Depending on browser, your colors may not match what is shown

42. Creating frames and rules 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

43. See Figure 4-25 for frames values See Figure 4-26 for effects of these values on a table grid w Rules attribute controls how gridlines are drawn where type is all (default), cols, groups, or none See Figure 4-27 for rules values

44. See Figure 4-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

45. Sizing a table w Table still looks crowded Maybe smaller internal borders, more space between text and borders, slightly wider Tables are sized automatically by browser, but there are several attributes that can override size choices made by the browser

46. Setting cell spacing w Cell spacing controls amount of space between table cells Default is 2 pixels; to change: where value is size in pixels See Figure 4-29 for different cell spacing Changing this value also impacts size of interior borders

47. w Let’s change the gridlines to be as small as possible by decreasing the cell spacing to 0 pixels Because interior border includes a drop shadow, even setting cell spacing to 0 will not remove the gridlines See tutorial4/race11.htm

48. Setting cell padding 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 4-32 for different cell padding Let’s increase cell padding to 4 pixels See tutorial4/race12.htm

49. Setting the table width w Table would look better larger 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

50. 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

51. w Let’s set the width of the table to 70% of the page width See tutorial4/race13.htm

52. Setting cell and column width w Width value can also be applied to individual cells or where value is width in pixels or percentage of width of entire table Can set width of first cell in column and remaining cells will adopt that width

53. However, if browser expands to fit content of one cell, all cells in column will match If you set different widths for two cells in same column, browser applies larger value w Can also set height of a cell or Deprecated attribute

54. 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

55. 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 See Figure 4-38

56. w Spanning cells are created by inserting rowspan and/or colspan attributes where value is number of rows or columns the cell spans Direction of the spanning is downward and to the right

57. w MUST remember to adjust the number of cell tags used See Figure 4-39 Let’s delete the table heading for Group column and span Runner heading across 2 columns and delete second/third occurrences of Men and Women and span those cells See tutorial4/race14.htm

58. 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

59. Aligning the contents of a cell 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

60. 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 Figure 4-42

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

62. 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

63. 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

64. 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

65. 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

66. 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

67. w Let’s set a 5 pixel space on top, left, and bottom of table and a 0 pixel margin on table’s right margin See tutorial4/race18.htm w There is a deprecated align=“position” attribute that older browsers will support if they don’t support styles

68. Working with column groups w Can organize columns into column groups and format one or more entire columns with a single style declaration or attribute where value is number of columns in group Should be placed directly after opening unless there is a caption; then after caption

69. w You’ve completed the race results table and story Next will use tables to create a layout for this story and other features of the Park City Gazette

70. Session 4.3 w Using tables for layout Table cells can contain any page element including inline images, headings, paragraphs, lists, and other tables Here are some of the classic layouts that can be achieved through the use of tables

71. Layout designs w Figure 5.1 shows one of the most basic Placing entire contents of a page within a table that is centered on the page With different backgrounds, gives effect of a printed page displayed against a colored background See Figure 5.1

72. w The columnar layout shows the page content placed in columns Popular for list of links in left column and destinations in right column Text does NOT flow from one column to another as in desktop publishing programs See Figure 4-52 Remember to vertically align with top of cells

73. w In a sectional layout, you break page content into sections, placing each section in its own cell See Figure 4-53 w By breaking up page content into separate pieces, can create almost any layout Sometimes referred to as a jigsaw table/layout

74. See Figure 4-54 and paragraph that follows Page is broken up into number of pieces that are meticulously assembled to create layout Be sure to remove borders

75. Fixed-width and fluid layouts w Table layouts fall into two classes: fixed- width and fluid In a fixed-width layout, designer defines exact size of every table element in absolute units Precise control But does not take into account the size of the browser window Can result in unused blank space See Figure 4-55

76. w Determining correct width is another problem with fixed-width Screen resolutions vary with 800 x 600 being most common If you choose 770, users with smaller monitors will have to scroll w With a fluid layout, one or more elements is sized as a percentage of page width

77. Page content will flow into blank areas as size of window increases See Figure 4-56 But can result in long lines of text and are difficult to design Good layout at smaller resolution may not look good in larger window w Can combine layouts

78. Column of links at left may be fixed, while content of page can be fluid Examine your page under a variety of conditions

79. Challenges of table layouts w Not all Web designers like tables for anything but tabular info w Some challenges on page 215: Tables can slow down page rendering Tables can be inflexible Tables can be code-heavy Tables can be inaccessible

80. w Despite these challenges, most Web page layout is still done using tables Layout techniques best suited to widest variety of browsers and operating environments involve tables

81. Creating a newspaper-style layout w Let’s use our article as part of a newspaper- style page for the entire Gazette Will contain logo, list of links to other pages, and a few articles See storyboard in Figure 4-58 w One way to do this is to create two tables, one nested inside the other

82. See Figure 4-59 Four cells that are contained in two columns and three rows Which are spanning? w Will use a combination of fluid and fixed- width elements Will reduce amount of unused space for large monitors

83. Creating the outer table w Initial part of file for front page has already been created, setting background and text color Now we must create the table structure Will use comments to make it easier to navigate the code See tutorial4/page1.htm

84. w Remember to set vertical alignment to top, rather than default middle The tables in this layout don’t display any borders w Now let’s place the logo in the page See tutorial4/page2.htm

85. w Now let’s add the list of links to the second cell Have already been created for you We will use copy and paste! See tutorial4/page3.htm

86. w Next part of outer table is newspaper address and phone number Located at bottom of page Again use copy and paste from an already- created file See tutorial4/page4.htm w Last is the articles cell Changes on a weekly basis

87. When it needs to be updated, you only need to edit the contents of a single cell

88. Creating a nested table w Main story is results of the marathon Another concerns reopening of Highway 6 Will also include a sidebar with links to some of the other current important stories See Figure 4-65 for storyboard w Best organized in a second table See Figure 4-66 for storyboard

89. w Already created—save as articles.htm See tutorial4/articles1.htm w Now let’s copy the code for the marathon article that you created in race.htm and paste it in the first cell Will edit some contents to fit See tutorial4/articles2.htm

90. w Now we need to insert article about reopening of Highway 6 in second cell See tutorial4/articles3.htm w Final piece is code for the links to stories and features See tutorial4/articles4.htm

91. Combining the outer and inner tables w Now time to place the code from your articles.htm into your page.htm file Copy and paste! See tutorial4/page5/htm

92. 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

93. 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

94. 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

95. 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

96. 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

97. Creating frames and rules w Two additional properties introduced in HTML 4.0 (and above) and supported by IE but not Netscape are FRAME and RULE properties As you’ve seen, when borders are displayed, they surround entire table on all four sides FRAME property allows you to control which sides of the table will have borders

98. where value is either BOX (default), ABOVE, BELOW, HSIDES, VSIDES, LHS, RHS, or VOID See Figure 4-60 w By default, borders are drawn around each cell in the table RULES property lets you control this by specifying how you want the table grid to be drawn

99. where value is either ALL, ROWS, COLS, or NONE ALL causes all cell borders to be drawn ROWS and COLS values cause borders to be drawn around only the table rows and columns NONE suppresses display of any cell borders See Figure 4-62

100. w Once again, remember that when you use these IE extensions, effects you see will not be duplicated in other browsers Will display usual grid layout Always test under different browsers