Tables - PowerPoint PPT Presentation

1 / 22
About This Presentation
Title:

Tables

Description:

tr th header column 1 /th th header column2 /th /tr ... table summary='Table shows that ringtone downloads exceeded mp3 downloads for the year 2005. ... – PowerPoint PPT presentation

Number of Views:201
Avg rating:3.0/5.0
Slides: 23
Provided by: guth
Category:
Tags: downloads | mp3 | tables

less

Transcript and Presenter's Notes

Title: Tables


1
Tables
2
Used to Control Layout
  • Really, really, really important because you
    cannot control layout without help from tables or
    CSS.
  • W3C recommends using CSSs because of
    accessibility issues. But tables are widely used.
  • Frames can control layout but,
  • XHTML requires they use a separate DTD.
  • How many professional pages use frames?Tables?

3
Controlling Layout pics of example
4
Creating A Simple Table
  • header column 1header
    column2
  • col. 1 datacol. 2 data

Table Headers
Table Data by columns.
What does a 3x3 look like?
5
Table Row Groups
  • Used to select a row from a table and apply
    formatting to it.
  • Januaryetc.
  • 1002.etc.
  • 1002.etc.

6
Table Caption
  • Ringtone Sales
  • .
  • Ringtone
  • or top, left, right
  • deprecated

7
Table Summary
  • Within the table tag. It doesnt actually show on
    the page (like Alt text).
  • Describes the table if someone cannot see it.
  • downloads exceeded mp3 downloads for the year
    2005.

8
Table Borders
  • hides the table so that it can
    control layout and still be invisible.
  • Border unit is in pixels.
  • Changes the border colorduh.
  • bordercolorlight"FFFF00 used to create a 3D
    effect (IE only)

9
Table Frames and Rules
  • Used to create borders on table cells a specific
    way
  • .
  • Above border shows only above
  • Below
  • Border all sides
  • Box
  • Hsides
  • Lhs left hand side
  • rhs right hand side
  • Woid none
  • Vsides

10
Table Frames and Rules
  • ,
  • All around cells
  • Cols around columns
  • Groups around row groups
  • None no rules
  • Rows around rows

11
Cell Padding and Cell Spacing
  • Cell padding within cells
  • Cell spacing between cells
  • Sometimes you slice a pictureup to load into a
    table, settingpadding and spacing to 0. Then,
    optimize the cells so it loads faster.

12
Table Width
  • creates a table that is
    100 the size of the browser window. If the user
    resizes the browser, they can still see all the
    contents of the table.
  • sets an absolute table width
    of 650 pixels.

13
Cell and Column Width
  • Controlling the table exactly
  • n in pixels
  • m in pixels

14
Column Span
  • nbsp

15
Row Span
rowspan"3"



16
Aligning Cell Contents
  • (left, center, right) for
    horizontal alignment
  • (top, middle, bottom)

17
Table Backgrounds

18
Empty Cells
  • If a cell contains no information, the browser
    sometimes doesnt render the borders.
  • Use nbsp (non-breaking space character entity)
    to ensure the table fills out the cell borders.

19
Liquid Tables
  • Ice fixed width
  • Jello somewhat fixed width
  • Liquid flexible width
  • give pixel widths to fixed columns
  • give percentage widths to liquid columns

20
Nesting Tables
21
Samples of Layout Controlled with Tables
  • MonsterBoard
  • Nintendo
  • How to Impress Your Date
  • Sony
  • JPL
  • LA County Fair
  • Try resizing the browser window.
  • Look at the source code - what was done?

22
Tables as A Way to Control Layout
  • Graphics
  • Nesting
  • Any of Your Other HTML Commands
  • Gets Complex Quickly Using an authoring tool
    makes it easier.
Write a Comment
User Comments (0)
About PowerShow.com