Tables and Formatting with Tables

1
Tables andFormatting with Tables

• - formatting tables
• - using tables to control layout

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

• Caption
  Text
• header column 1header
  column2
• col. 1 datacol. 2 data

Table Headers
Table Data by columns.
What does a 3x3 look like?
5
Table Tags

Table Caption or header of a table Column Group
of columns Table body Table data Table
footer Table heading Table header Table row
6

• Defines the beginning of an HTML table.
• shows a 1 pixel outline of the
  table.
• hides the table when it is
  displayed in the browser (the default).
• 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.

7
contd.

• sets an absolute table width
  of 650 pixels.
• cellpadding"0" eliminates the spacing so you
  can get rid of unnecessary space between elements.

8
Samples of Layout Controlled with Tables

• MonsterBoard
• Nintendo
• How to Impress Your Date
• Cal Poly
• JPL
• LA County Fair

• Try resizing the browser window.
• Look at the source code - what was done?

9

• ArnoldDavis
• RepublicanDemocrat
• maybemaybe

Arnold Davis Republican
Democrat maybe maybe
add two other candidates to the table
10
Alignment

• or center or right. Left is
  the default.
• or center or right. Left is
  the default.
• or top, bottom or baseline.
  Middle is default.
• or top, bottom or baseline.
  Middle is default.
• Baseline means ?

11

• Captions are used to describe the data in the
  table.
• More useful than just a header because of
  accessibility issues.
• Front Runners for Governor
• .etc.

12
Summary

• A summary can also be added to a table to give a
  lengthier description.
• my house anymore border0
• You will not see this in your browser but, a Web
  reader may interpret this tag element.

13

• Like tag but bold formats the contents.
• Used with to align table headers.
• ArnoldDavis

14
,

• used to apply alignment to a group of columns
  using CSS
• after the caption tag, creates table layout
• remainder of table

15
Other Table Attributes

• frames to create a cell
  border.
• Above, below, box, hsides (horizontal), lhs
  (left), rhs (right), void (none), vsides
  (vertical sides)
• rules to create a rule for
  rows
• none, groups, rows, cols, all

16
Nesting Tables
17
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.

18
cellspacing and cellpadding

• cellpadding"0"
• eliminates the spacing so you can get rid of
  unnecessary space between elements.

19
Joining Rows - rowspan

• Requires rowspan in Attribute cell.
• Attributes

20
Joining Columns - colspan

• Requires Candidate

21
Coloring the Table

• Bordercolor
• bgcolor
• bgimage
• cellspacing"0" bordercolor"006600"
  bgcolor"FF00FF"

22
Liquid Tables

• Ice fixed width
• Jello somewhat fixed width
• Liquid flexible width
• give pixel widths to fixed columns
• give percentage widths to liquid columns
• Ex http//www.kallback.co.za/simply/float.htm

23
Tables as A Way to Control Layout

• Graphics
• Nesting
• Any of Your Other HTML Commands
• Gets Complex Quickly Thats why we use a Web
  authoring tool.

24
Lab Assignment

• Download your Index.html page and format it using
  a liquid table. (if it doesnt suit your page,
  use your resume or create a new page).