HTML Tables

1

• HTML Tables

2
Tables

• Tables can be a great help in overcoming HTML's
  vertical orientation.
• Even the most complex tables use just the
  following three tags
• lttablegt Creates the table
• lttrgt Table row
• lttdgt Table column

3
Page Layout

• Tables open up many possibilities for page
  layout.
• You have more control over the placement of
  elements.

4
Page Layout

• The look and layout of pages on a Web site should
  reflect the purpose of the site and contribute to
  the site's usability.
• Good design can make a page not only appealing
  but usable.

5
Web page layout using tables

• Financial Times http//news.ft.com/home/us/
• Calendar of Events http//www.cs.depaul.edu/calen
  dar/calendar.asp
• http//events.tc.umn.edu/months.xml
• CTI homepage
• http//www.cs.depaul.edu/news/default.asp

6
Using Tables for Positioning

• Map out your design on paper first.
• Don't turn off the border until you are satisfied
  with the page.

7
Planning a Layout

• On paper, get a rough idea of where you want
  certain elements to be
• Then draw out a basic grid structure for your
  page

8
How would you use tables?
9
How would you use tables?
10
Nesting Tables
11
Basic HTML Tables

• A table organizes data in rows and columns (of
  columnsof cells)
• lttablegt lt/tablegt Enclose the table structure
• lttrgt lt/trgt Table row
• lttdgt lt/tdgt Each data cell within a row. The
  smallest area of the table we are able to format

12
Basic table structure

• lttablegt
• lttrgt
• lttdgtA1lt/tdgt
• lttdgtA2lt/tdgt
• lttdgtA3lt/tdgt
• lt/trgt
• lttrgt
• lttdgtB1lt/tdgt
• lttdgtB2lt/tdgt
• lttdgtB3lt/tdgt
• lt/trgt
• lt/tablegt

A1 A2 A3
B1 B2 B3
13
Table Caption and Headers

• ltcaption alignvaluegtlt/captiongt A caption is
  centered at the TOP/BOTTOM of the table.
• ltthgt lt/thgt special cells that act as table
  headers (centered and boldface)

This is a table
lttablegt ltcaptiongtThis is a tablelt/captiongt
lttrgt ltthgtFirst Rowlt/thgt lt/trgt
lttrgt lttdgtA1lt/tdgt lt/trgt lt/tablegt
First row
A1
Html_table.htm
14
lttablegt attributes

• border pixels? Size of the border around the
  table
• cellspacing pixels? space inserted between
  cells (outside cell contents)
• cellpadding pixels? size of the gap between
  the cell text and the cell border (inside cell
  contents)
• align

left/right? table is placed on the left/right and
text is wrapped around the table center ? table
is placed in the center of the page. Text is not
wrapped around the table
15
More lttablegt Attributes

• bordercolorcolor? changes the color of the
  border
• bordercolordarkcolor?bordercolorlightcolor?
  creates a 3D effect for the border

16
More ltTablegt attributes

• frameoption Controls which side of the table
  has borders
• Where option can be one of the following

17
More ltTablegt attributes

• rulesallrowscolsnone? controls around which
  cell the border is drawn.

18
lttablegt,lttdgt,ltthgt attributes

• widthpixels or ? Table/cell width in pixels
  or as of the page/table
• heightpixels or ? Same as above
• bgcolorcolor? Change the table/cell background
  color
• backgroundpic.jpg? Tiles a picture as a
  background

19
Cell attributes (lttdgt,ltthgt)

• colspan? this cell spans for columns
• rowspan? this cell spans for rows
• align
• valign

left/right? text in the cell is aligned
left/right center? text in the cell is centered
top/bottom? text in the cell is aligned
top/bottom middle? text in the cell is aligned
with the middle of the cell
20
Align and valign attributes
21
Exercise

• Design the following table in FrontPage. Check
  the HTML to see how the cells are merged.

Logo Logo Link
A B CD
E F CD
22
Using tables for page layout

• To display content in newspaper-like columns or
  separates the page in different topical areas.
• Start with the outer table and work your way in
  using nested tables
• Add background color to visually separate column
• Add cell padding to avoid crowding
• Do not use too many nested tables it slows down
  the web page may confuse browsers!

HTMLLayout.htm
23
See in practice
24
Tables and graphics
How many rows and columns?
25
Final remarks

• Work plan
• Diagram the layout before you start writing
• Create the text for various cols in separate
  files, to insert later.
• Start from the outer table first, and gradually
  work inward
• Use cell padding cell spacing to avoid
  overcrowded web pages
• Use the valigntop attribute for cells
  containing articles/text.
• Use no more than three/four cols of text. Keep
  the layout of your web page simple!