HTML%20Tables - PowerPoint PPT Presentation

About This Presentation
Title:

HTML%20Tables

Description:

Calendar of Events: http://www.cs.depaul.edu/calendar/calendar.asp ... background='pic.jpg' Tiles a picture as a background. Instructor: A. Burns. 18 ... – PowerPoint PPT presentation

Number of Views:24
Avg rating:3.0/5.0
Slides: 25
Provided by: facwebC
Category:
Tags: 20tables | html

less

Transcript and Presenter's Notes

Title: HTML%20Tables


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

11
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
12
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)

lttablegt ltcaptiongtThis is a tablelt/captiongt
lttrgt ltthgtFirst Rowlt/thgt lt/trgt
lttrgt lttdgtA1lt/tdgt lt/trgt lt/tablegt
This is a table
First row
A1
Html_table.htm
13
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
14
More lttablegt Attributes
  • bordercolorcolor? changes the color of the
    border
  • bordercolordarkcolor?bordercolorlightcolor?
    creates a 3D effect for the border

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

16
More ltTablegt attributes
  • rulesallrowscolsnone? controls around which
    cell the border is drawn.

17
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

18
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
19
Align and valign attributes
20
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
21
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
22
See in practice
23
Tables and graphics
How many rows and columns?
Topframe.htm
24
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!
Write a Comment
User Comments (0)
About PowerShow.com