Tutorial 4 Designing with Tables

1
Tutorial 4 Designing with Tables

• By Marge HohlyCIS Professor

2
Overview

• Create a text table
• Create a graphic table
• Create table headers and captions
• Control appearance of a table and table text
• Use nested tables
• IE extensions for Tables

3
Two Types of Tables

• Text
• Test only
• Use standard typewriter symbols
• Create a line with hyphens, underlines, or equal
  signs
• Some browsers use only Text tables, like Lynx
• Graphical
• Appears as a graphic element
• Design elements color, shading, borders
• Greater control over table appearance
• Control size of individual cells, and text
  alignment
• Cells can span rows or columns
• More flexible and attractive
• More complex than text tables

4
Text Tables

• Use fixed-with font, or typewriter font
• Each character gets the same space (width)
• Dont use Proportional font
• Affects text alignment
• Different browsers and Operating System may use
  different font sizes
• View Example

5
Creating Text Table

• Use lt/Pregt tag (preformatted)
• Remember that HTML ignores extra spaces, blank
  lines, and tabs
• To maintain extra spaces, and other characters
  for a text table use ltPREgt tags
• Text table should be between ltPREgt .. lt/PREgt

6
Graphical Table

• First define the table structure
• Number of rows and columns
• Locate table headings
• Placement of a table caption
• Next enter the text and data in the table cells

7
Table tags

• ltTABLEgt lt/TABLEgt - The entire table needs to be
  between these tags
• ltTRgt lt/TRgt - Beginning and end of ROW
• ltTDgt lt/TDgt - Table data/cell begins ends
• Technically lt/TRgt not required, but good practice
• Columns are determined by the number of cells in
  a row
• 3 ltTDgt tags means 3 columns
• View Table Tags example

8
Table Format

• ltTABLEgt ltTRgt ltTDgt First Celllt/TDgt
  ltTDgt 2nd Cell lt/TDgt lt/TRgtltTRgt ltTDgt 3rd
  Celllt/TDgt ltTDgt 4th Cell lt/TDgt lt/TRgt
• lt/TABLEgt
• View Table Format examples

9
General Table Format

• View the General Table Format on Example page
• You can cut-and-paste that code into your own
  HTML documents, adding new rows or cells as
  necessary.
• The example looks like this when rendered in a
  browser. See example page.

10
Column Headings

• ltTHgt lt/THgt used to place column headings for
  the columns of the table
• Use in place of ltTDgt
• Number of Header rows is determined by user
• Text in headers are centered and boldface

11
Table Caption

• ltCAPTION ALIGNvaluegt caption text lt/CAPTIONgt
• Values indicate placement
• TOP above the table
• BOTTOM below the table
• Captions are centered in relationship to the
  table
• Captions tags are placed within ltTABLEgt tags
• Captions show in normal text without special
  formatting
• May format using ltIgt or ltbgt for example
• View the caption in General Format examples
  including below

12
Table Appearance

• Add Borders
• Add Color
• Control Placement of the table
• Control size of table

13
Table Borders

• Default tables have no borders (size0)
• Use BORDER property to specify border size in
  TABLE tag
• Syntax
• ltTABLE BORDERsizegt
• Size is the width of border in pixels
• Size is optional, if size not specified it is 1
  pixel
• Only the outside border is affected by the BORDER
  property
• View Examples

14
Cell Spacing

• CELLSPACING property of the ltTABLEgt tag controls
  amount of space inserted between table cells
• Syntax
• ltTABLE CELLSPACINGsizegt
• Size is the width of the interior borders in
  pixels
• Default size is 2 pixels
• View examples

15
Cell Spacing

• CELLSPACING property set to 0 will not remove the
  border between cells
• As long as there is a border around the table you
  will see a line between the cells
• Interior border has a drop shadow which will show
  even when the size is set to zero

16
Cell Padding

• CELLPADDING property of the ltTABLEgt tag controls
  the space between the table text and cell borders
• Syntax
• ltTABLE CELLPADDINGsizegt
• Size is the distance from the table text to the
  cell borders in pixels
• Default cell padding is 1 pixel
• View examples

17
Controlling Table Alignment

• Default Browsers places table at left edge of
  page and text above and below table
• Use ALIGN property to place text left, right, or
  center
• Syntax
• ltTABLE ALIGNalignmentgt
• ALIGN property works with HTML 3.2 or higher

18
Controlling Text Alignment in Tables

• ALIGN property in the ltTDgt tag to align text
  within the cell
• Default is left edge of cell
• ALIGN property values are left, right, or center
• VALIGN property in ltTDgt tag controls vertical
  spacing of text in cell
• Default VALIGN is text placed at TOP
• VALIGN property values are top, middle, bottom
• View examples

19
(No Transcript)
20
(No Transcript)
21
(No Transcript)
22
(No Transcript)
23
(No Transcript)
24
Thanks

• Same of the material in this presentation was
  developed by Susan Fuschetto