Tables

1
Tables

• WWW 131

2
Tables

• Tables are useful for organizing large bodies of
  information so that the reader can quickly see
  the overall picture.
• Tables on Web pages are similar to spreadsheets
  or tables in word processing programs.
• Tables are organized in columns (vertical) and
  rows (horizontal).
• A cell, where data is placed, is the
  intersection of a column and a row.

3
Table Elements

• Since it is difficult to picture how a table will
  appear on a Web page when looking at the HTML
  code, plan and sketch your table on paper first.
• Plan for a lot of experimenting, testing,
  re-adjusting code, and testing again until you
  get what you want.
• HTML editors, spreadsheet programs, and word
  processing table programs can help with table
  creation.

4
Basic table tags

• lttablegt lt/tablegt
• lttrgt lt/trgt
• lttdgt lt/tdgt
• Others
• ltthgt lt/thgt (in place of lttdgt lt/tdgt)
• ltcaptiongt lt/captiongt
• lttheadgt
• lttbodygt
• lttfootgt

5
Table Elements

• Row Horizontal line of cells
• Column Vertical line of cells
• Cell intersection of row column
• Table header cells Table header cells are
  displayed bold and centered
• Table data cells left aligned by default
• Caption
• Header or Footer text
• most often used as a caption for the table

6
Turn this

• 10 15
• 8 36

7
into this...
8
by writing this...

• lttable border 2" width "75"gt
• lttrgt
• lttdgt10lt/tdgtlttdgt15lt/tdgt
• lt/trgt
• lttrgt
• lttdgt8lt/tdgtlttdgt36lt/tdgt
• lt/trgt
• lt/tablegt

9
Turn this

• 10 15 0 3
• 8 36 11 10
• 75 99 54 47
• 18 23 20 5

10
into this...
11
by typing this...

• lttable border"2gt
• lttrgt
• lttdgt10lt/tdgtlttdgt15lt/tdgtlttdgt0lt/tdgtlttdgt3lt/tdgt
• lt/trgt
• lttrgt
• lttdgt8lt/tdgtlttdgt36lt/tdgtlttdgt11lt/tdgtlttdgt10lt/tdgt
• lt/trgt
• lttrgt
• lttdgt75lt/tdgtlttdgt99lt/tdgtlttdgt54lt/tdgtlttdgt47lt/tdgt
• lt/trgt
• lttrgt
• lttdgt18lt/tdgtlttdgt23lt/tdgtlttdgt20lt/tdgtlttdgt5lt/tdgt
• lt/trgt
• lt/tablegt

12
then into this...

• lttable border"2" width"75"gt
• lttrgt
• lttdgt10lt/tdgtlttdgt15lt/tdgtlttdgt0lt/tdgtlttdgt3lt/tdgt
• lt/trgt
• lttrgt
• lttdgt8lt/tdgtlttdgt36lt/tdgtlttdgt11lt/tdgtlttdgt10lt/tdgt
• lt/trgt
• lttrgt
• lttdgt75lt/tdgtlttdgt99lt/tdgtlttdgt54lt/tdgtlttdgt47lt/tdgt
• lt/trgt
• lttrgt
• lttdgt18lt/tdgtlttdgt23lt/tdgtlttdgt20lt/tdgtlttdgt5lt/tdgt
• lt/trgt
• lt/tablegt

13
then into this...

• lttable border"2" width"75"gt
• lttrgt
• ltthgtHelmentslt/thgtltthgtWrist Protectorslt/thgtltthgt
  Elbow Padslt/thgt
• ltthgtKnee Padslt/thgt
• lt/trgt
• lttdgt10lt/tdgtlttdgt15lt/tdgtlttdgt0lt/tdgtlttdgt3lt/tdgt
• lt/trgt
• lttrgt
• lttdgt8lt/tdgtlttdgt36lt/tdgtlttdgt11lt/tdgtlttdgt10lt/tdgt
• lt/trgt
• lttrgt
• lttdgt75lt/tdgtlttdgt99lt/tdgtlttdgt54lt/tdgtlttdgt47lt/tdgt
• lt/trgt
• lttrgt
• lttdgt18lt/tdgtlttdgt23lt/tdgtlttdgt20lt/tdgtlttdgt5lt/tdgt
• lt/trgt
• lt/tablegt

14
and finally into this.

• lttable border"2" width"75"gt
• lttrgt
• ltth colspan"4"gtSafety Equipment for Roller
  Bladinglt/thgt
• lt/trgt
• lttrgt
• ltthgtHelmentslt/thgtltthgtWrist
  Protectorslt/thgtltthgtElbow Padslt/thgtltthgtKnee
  Padslt/thgt
• lt/trgt
• lttrgt
• lttdgt10lt/tdgtlttdgt15lt/tdgtlttdgt0lt/tdgtlttdgt3lt/tdgt
• lt/trgt
• lttrgt
• lttdgt8lt/tdgtlttdgt36lt/tdgtlttdgt11lt/tdgtlttdgt10lt/tdgt
• lt/trgt
• lttrgt
• lttdgt75lt/tdgtlttdgt99lt/tdgtlttdgt54lt/tdgtlttdgt47lt/tdgt
• lt/trgt
• lttrgt
• lttdgt18lt/tdgtlttdgt23lt/tdgtlttdgt20lt/tdgtlttdgt5lt/tdgt
• lt/trgt

15
Table Attributes

• Attributes are only used in the opening tag
• Can set background color of individual cells.

16
Table attributes

• border
• outlines the cells and table
• value is number of pixels
• align align table to center, left, right
• cellpadding between the text cell border
• cellspacing - space between the cells
• width for the table and cells
• can use pixels or percentage of window
• 99 of time do not set height attribute
• let content set height of table, table rows, and
  cells
• bgcolor for inserting color
• cols
• DO NOT use in the table tag
• (Yes, its in the book. But its not how you
  should make the columns!)

17
Table Layout and Design Samples

• These are basic tables that are used to display
  products.
• What do you think?

?
18
Simple Table ?
19
Simple Table ?
20
Sample Table ?
21
Complex Tables Nesting Tables
22
Planning the Table

• Think small rectangles or cells

• The rules are that the cells are all rectangles.
  You can span a cell across more than one row or
  more than one column. But, it has to span across
  the whole column.

23
Goal

• Plan the table structure first, before coding the
  table

24
Results

• Just the heading row was added 1 cell across 2
  columns

25
Blank Cells

• Blank Cell with no borders
• Can hold the cell open
• nbsp