Tables

1
Tables
2
What is a table?

• Simply a convenient way of displaying similar
  formatted information
• Columns and rows are used
• Column headings can be used also
• Used to present data
• Also used to format a page so it looks nice

3
Sample Table
Heading
Row
Column
4
Kinds of tables

• Text tables
• Ugly looking
• Not generally regarded as good web page design
• Graphical tables
• Typically how tabular data is presented
• Lots of design options

5
Text Tables

• Done with fixed width fonts
• Typically with the ltpregt tag
• Fonts like the COURIER NEW font can also be used
• If you dont use a fixed width font, columns
  wont line up
• ltpregt tag renders data as is, in a fixed width
  font
• Leading spaces and carriage return/line feeds are
  rendered
• Generally considered bad design
• But sometimes useful for displaying lots of plain
  text

6
Text Table Appearance

• Notice Use of Fixed Width Font
• ltpregt does not allow bold, italics or resizing
• ltpregt
• Last Name First Name MI
• --------- ---------- --
• Armstrong Neil D.
• Hamill Mark D.
• Bush George W.
• Gingrich Newt T.
• lt/pregt

Notice that carriage returns and line
feed characters dont require a special tag.
7
Text Table Appearance

• Another way of doing the same thing with a fixed
  length font.
• Note you have to add HTML tags
• But you can also do bold and italics
• ltfont faceCourier Newgtltbgt
• Last Name First Name MIlt/bgtltbrgt
• --------- ---------- --ltbrgt
• Armstrong Neil D.ltbrgt
• Hamill Mark D.ltbrgt
• Bush George W.ltbrgt
• Gingrich Newt T.ltbrgt
• lt/fontgt

8
Graphical Tables

• Created with the lttablegt tag
• Will create optional horizontal and vertical
  lines dividing rows and cells
• ltthgt can be used for Table Headers
• lttrgt is used for ordinary table rows
• lttdgt is used for table cells (DData)

9
Table Conventions

• lttdgt and ltthgt tags are nested inside lttrgt tags
• Unless specified otherwise, tables will have the
  same border (default depends on browser)
• By default cells will have the same padding and
  spacing (usually 0 pixels)
• We will cover cell spacing and padding later

10
Table Headers

• ltthgt is like lttdgt except
• Text is centered within cell
• Text is in bold
• Some Common Attributes
• alignLeftCenterRight
• bgcolorColor
• rowspanValue

11
Table Rows

• Follows the lttablegt tag
• One lttrgtlt/trgt pair for each row wanted
• Common attributes
• alignLeftCenterRight
• valignTopMiddleBottom
• bgcolorColor

12
Table Cells

• One lttdgtlt/tdgt pair for each cell
• Convention each lttrgtlt/trgt has at least one
  lttdgtlt/tdgt pair inside it
• I.E. there is at least one cell in each row.
• Typical attributes
• alignLeftCenterRight
• valignTopMiddleBottom
• bgcolorColor
• colspanValue
• rowspanValue

13
Table Attributes

• Tables can have borders
• lttable bordersizegt
• Size of pixels for border
• lttable borderbordergt gives a 1 pixel border
• Tables without borders are useful for formatting
  a page
• Browser will usually give a three dimensional
  look automatically if Size gt 1

14
Table Attributes

• Cell Spacing
• the number of pixels inserted between cells
• lttable cellspacingSizegt
• Cell Padding
• the number of pixels between text and cell
  borders
• lttable cellpaddingSizegt

15
Table Attributes

• Text can be aligned around tables
• Only alignleft or alignright will wrap text
• Similar to the way text can be aligned around
  images
• lttable alignleftgt
• Table is flush against left margin, text wraps on
  right side of table
• lttable alignrightgt
• Table is flush against right margin, text wraps
  on left side of table

16
Table Attributes

• Centering table can be done in two ways
• ltcentergtlttablegtlt/tablegtlt/centergt
• More portable (for now) because it supports
  browsers 3.0 or before
• But ltcentergt is a deprecated tag
• lttable aligncentergtlt/tablegt
• There is no text wrap when aligncenter is
  used. Text appears on line after table.

17
Table Size

• By default the browser will size the table as it
  thinks fit
• Tables can be sized in pixels or 100 of screen
  width
• Use Pixels for absolute size
• Use for relative size

18
Table Size by Pixels

• Lowest common denominator is a VGA (640 x 480
  pixels) so to avoid scrolling make it less than
  this
• Its probably safe to assume SVGA (800 x 600) is
  now the lowest common denominator
• Example
• lttable width300 height400gt
• Make a table sized 300 x 400 pixels
• height is not supported by older Netscape browsers

19
Table Size by Percent

• The danger here is that text may wrap too much on
  lower screen resolutions.
• Example
• lttable width90 height80gt
• Table is sized to 90 of horizontal width and 80
  of vertical height
• Height is not supported by older Netscape
  browsers
• Height and width calculated in size of browser
  window (document display area)

20
Cell Column Sizing

• Cells can be sized the same way as tables
• of table width
• of pixels
• Works with lttdgt and ltthgt tags
• Example
• lttd width20 height30gt

21
Background Colors

• Tables, headers, rows and cells can have
  background colors set
• If only table color is set, applies to all rows
  and cells unless explicitly overridden
• If a table row color is set, applies to all cells
  in the row unless explicitly overridden

22
Background Colors

• lttable bgcolorColorgt
• lttr bgcolorColorgt
• lttd bgcolorColorgt
• ltth bgcolorColorgt
• Examples
• lttr bgcolorGreengt
• ltth bgcolorccff00gt

23
Cell Column Sizing

• Note In the same column the largest size is the
  default size
• What happens here?
• lttable border 1 height300 width200gt
• lttrgt
• lttd width100 height20gtabclt/tdgtlttdgtfglt/tdgt
• lt/trgt
• lttrgt
• lttd width40 height30gtdelt/tdgtlttdgthijlt/tdgt
• lt/trgt
• lt/tablegt

24
Spanning Cells

• Definition cells that occupy more than one row
  or column
• Accomplished with the ROWSPAN and COLSPAN
  attributes
• Can only be used with the lttdgt and ltthgt tags

25
Column Spanning

• What would this HTML do?
• lttable border1gt
• lttrgt
• lttd colspan2gtABClt/tdgtlttdgtDEFlt/tdgt
• lt/trgt
• lttrgt
• lttdgtGHIlt/tdgtlttdgtJKLlt/tdgtlttdgtMNOlt/tdgt
• lt/trgt
• lt/tablegt

26
Row Spanning

• What does this HTML do?
• lttable border1gt
• lttrgt
• lttd rowspan2gtABClt/tdgtlttdgtDEFlt/tdgtlttdgtGHIlt/tdgt
• lt/trgt
• lttrgt
• lttdgtJKLlt/tdgtlttdgtMNOlt/tdgt
• lt/trgt
• lt/tablegt

27
Row and Column Spanning

• What does this HTML do?
• lttable border1gt
• lttrgt
• lttd rowspan2 colspan2gtABClt/tdgtlttdgtDEFlt/tdgt
• lt/trgt
• lttrgt
• lttdgtGHIlt/tdgt
• lt/trgt
• lttrgt
• lttdgtJKLlt/tdgtlttdgtMNOlt/tdgtlttdgtPQRlt/tdgt
• lt/trgt
• lt/tablegt

28
Cell Spanning Rules

• Browser will interpret from top down
• Helps to draw it out
• It can be useful to have a tool do the thinking
  for you
• You need to be consistent or the results will not
  be what you expect

29
Putting it together

• In most cases you want to specify table width in
  pixels unless you are just presenting data
• Use VALIGN and ALIGN to align data within the
  cell
• Feel free to use BGCOLOR to enhance look

30
Nested Tables

• It is sometimes useful to place a table inside a
  table
• Need to be careful about getting the column and
  row widths to match, if sizing in pixels
• If you mess up it is up to the browser to figure
  out what to do. You may not like its solution

31
Nested Table Example

• ltbodygt
• lttable width 600 border1gt
• ltcaptiongtlth2gtTable inside a table
  examplelt/h2gtlt/captiongt
• lttrgt
• lttd width 300gtABClt/tdgt
• lttd width 300gt
• lttable width300 border2gt
• lttrgt
• lttd width150gtDEFlt/tdgt
• lttd width150gtGHIlt/tdgt
• lt/trgt
• lttrgt
• lttdgtJKLlt/tdgt
• lttdgtMNOlt/tdgt
• lt/trgt
• lt/tablegt
• lt/tdgt

Table within a table cell
32
Nested Table Example

• lt/trgt
• lttrgt
• lttd width 300gtPQRlt/tdgt
• lttd width 300gtSTUlt/tdgt
• lt/trgt
• lt/tablegt
• lt/bodygt
• lt/htmlgt

33
Cells

• Of course table cells can contain just about any
  other HTML tag. Feel free to place
• Images ltimggt
• Lists ltulgt, ltolgt, ltdlgt
• Nested Tables lttablegt
• Links ltagt
• Etc...