Designing a Web Page with Tables

1
Designing a Web Page with Tables

• Maureen Smith
• Professor, Saddleback College
• Tutorial 4

2
Lesson Plan

• Review
• Tutorial 4 - Designing a Web Page with Tables
• Session 4.1
• Session 4.2
• Session 4.3
• Review

3
Objectives
Objectives!

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

4

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

5

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

6
Session 4.1

• You will design a Web site for a weekly edition
  of a newspaper
• Should have same look and feel as the printed
  oneclassic, traditional
• In order to implement this design, you will learn
  how to create and format tables

7
Tables on the World Wide Web

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

• 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

• 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

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

12
Creating a text table

• The beginning of the file youll use has already
  been created
• The page consists of an article about the
  marathon
• Youll add the race results table between the
  first and second paragraphs
• See tutorial3/race1.htm

13
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

14
OR
Courier
Times New Roman

• Most typeset documents (your book) use
  proportional fonts
• The width of each character varies according to
  the characters shape
• Character m is wider than l
• Proportional fonts are more visually attractive
  so you might be tempted to use them

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

• 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

• 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 ltpregt 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
• 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
• By using the ltpregt tag, youve created a text
  table that every browser can display

19

• Youve also ensured that the columns will retain
  their alignment no matter what font the browser
  is using
• Now create the graphical table

20
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

21

• 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

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

25

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

26
Creating table headings

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

27

• In fact, because the ltthgt tag is a replacement
  for the lttdgt tag, can use it for any cell
  containing text you want displayed in centered
  bold type
• You have a single row of table headings
• See tutorial4/race6.htm

28
Creating row groups

• Can classify a tables 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

• lttheadgt
• table rows
• lt/theadgt
• Can contain only one set of header rows
• To mark header footer
• lttfootgt
• table rows
• lt/tfootgt

30

• Only one footer per table
• To mark rows of table body
• lttbodygt
• table rows
• lt/tbodygt
• Can have multiple body sections
• 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
• Creating groups does not affect appearance
• But can apply styles to groups to make them
  appear differently

32

• Lets mark the tables header and body
• No footer
• See tutorial4/race7.htm

33
Creating a table caption

• Captions are used to provide descriptive info
  about the table
• Use the ltcaptiongt tag
• ltcaptiongtcontentlt/captiongt
• Where content indicates is the content of the
  caption
• MUST appear directly after opening lttablegt tag

34

• By default, is centered above the table
• Can change that using align attribute
• ltcaption alignpositiongtcontentlt/captiongt
• where position is bottom or top, centered
• Left or right, aligned with margin
• Older browsers recognize only top and bottom

35

• Lets add Race Results to the table in bold
• See tutorial4/race8.htm

36
Adding a table summary

• For non-visual browsers, useful to include a
  summary of a tables contents
• lttable summarydescriptiongt lt/tablegt
• where description is a description of the tables
  purpose and contents
• Does not affect appearance in visual browsers
• Now we format the table!

37
Session 4.2

• Working with the table border
• Lack of gridlines and borders makes the table
  difficult to read
• Lets add borders, gridlines, and background
  color
• And control placement, size, and table border

38
Adding a table border

• By default, browsers display tables without
  borders
• Can add one with the BORDER property
• lttable bordervaluegt
• 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

• Lets add a 5-pixel border
• See tutorial4/race9.htm
• By default, table borders are displayed in two
  shades of gray for a three-dimensional look
• Can change that with
• lttable bordercolorcolorgt

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

• Lets 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

• 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
• lttable frametypegt
• 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
• Rules attribute controls how gridlines are drawn
• lttable rulestypegt
• 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
• Both attributes might not be supported in older
  browsers
• We will not make any changes to frame or rules
  values

45
Sizing a table

• 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

Thank goodness!
46
Setting cell spacing

• Cell spacing controls amount of space between
  table cells
• Default is 2 pixels to change
• lttable cellspacingvaluegt
• where value is size in pixels
• See Figure 4-29 for different cell spacing
• Changing this value also impacts size of interior
  borders

47

• Lets 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

• Distance between cell text and cell border is
  known as cell padding
• Default is 1 pixel, which may be too little
• lttable cellpaddingvaluegt
• where value is size in pixels
• See Figure 4-32 for different cell padding
• Lets increase cell padding to 4 pixels
• See tutorial4/race12.htm

49
Setting the table width

• Table would look better larger
• Overall size is determined by its content
• lttable widthvaluegt
• 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 users monitor size

50

• Percentage allows table to match each monitors
  dimensions
• If table requires a certain width to display
  contents, will ignore a width value smaller
• Many browsers, but not XHTML, support
• lttable heightvaluegt
• where value is height in pixels or percentage of
  height of element

51

• Lets set the width of the table to 70 of the
  page width
• See tutorial4/race13.htm

52
Setting cell and column width

• Width value can also be applied to individual
  cells
• lttd widthvaluegt or ltth widthvaluegt
• 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
• Can also set height of a cell
• lttd heightvaluegt or ltth heightvaluegt
• Deprecated attribute

54
Preventing line wrap

• If you change widths, might want to make sure
  contents of certain cells dont wrap
• Like name or date
• To prevent line wrapping
• lttd nowrapnowrapgt or ltth nowrapnowrapgt
• We will not modify width or height

55
Spanning rows and columns

• Repeating the group info for each row is
  redundant
• Lets merge several cells into one
• See Figure 4-37
• We create a spanning cella cell that occupies
  more than one row or column
• See Figure 4-38

56

• Spanning cells are created by inserting rowspan
  and/or colspan attributes
• lttd (or th) rowspanvalue colspanvaluegt
• where value is number of rows or columns the cell
  spans
• Direction of the spanning is downward and to the
  right

57

• MUST remember to adjust the number of cell tags
  used
• See Figure 4-39
• Lets 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

Woe is you if you don't!
58
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

59
Aligning the contents of a cell

• By default, text is placed in middle of cell,
  aligned with left edge to change
• alignposition
• 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

• lttd alignchar char,gt
• Not well supported
• For a different vertical alignment of cell
  content, use
• valignposition
• where position is top, middle (default), bottom,
  or baseline
• See Figure 4-42

61

• Lets right-align each time value and align group
  names with tops of their cells
• See tutorial4/race15.htm

62
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

63

• Lets 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 ltfontgt tag instead of a
  style tag

Are we done yet?
64
Setting the background color

• Table elements support same background-color
  style as page
• Color styles cascade down through the table
  structure
• Lets 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

• You can add a background image to a table
• background-image url
• Can be applied to entire table, row group, row,
  or individual cell
• We do not need any images in our table

66
Aligning a table on a web page

• Lets 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

• Lets set a 5 pixel space on top, left, and
  bottom of table and a 0 pixel margin on tables
  right margin
• See tutorial4/race18.htm
• There is a deprecated alignposition attribute
  that older browsers will support if they dont
  support styles

68
Working with column groups

• Can organize columns into column groups and
  format one or more entire columns with a single
  style declaration or attribute
• ltcolgroup spanvaluegt
• where value is number of columns in group
• Should be placed directly after opening lttablegt
  unless there is a caption then after caption

69

• Youve 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

• 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

• 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

• 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

• In a sectional layout, you break page content
  into sections, placing each section in its own
  cell
• See Figure 4-53
• 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

• 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

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

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

• 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

• Lets 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
• 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?
• Will use a combination of fluid and fixed-width
  elements
• Will reduce amount of unused space for large
  monitors

83
Creating the outer table

• 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

• Remember to set vertical alignment to top, rather
  than default middle
• The tables in this layout dont display any
  borders
• Now lets place the logo in the page
• See tutorial4/page2.htm

85

• Now lets 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

Is that allowed?
86

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

• 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
• Best organized in a second table
• See Figure 4-66 for storyboard

89

• Already createdsave as articles.htm
• See tutorial4/articles1.htm
• Now lets 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

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

91
Combining the outer and inner tables

• Now time to place the code from your articles.htm
  into your page.htm file
• Copy and paste!
• See tutorial4/page5/htm

Finished at last!
92
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

93

• 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

94

• 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

95

• 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

96

• 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

97
Creating frames and rules

• Two additional properties introduced in HTML 4.0
  (and above) and supported by IE but not Netscape
  are FRAME and RULE properties
• As youve 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

• ltTABLE FRAMEvaluegt
• where value is either BOX (default), ABOVE,
  BELOW, HSIDES, VSIDES, LHS, RHS, or VOID
• See Figure 4-60
• 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

• ltTABLE RULESvaluegt
• 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

• 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

The End!