Text tables, graphical tables,
table rows, columns and
headings
(Revised 02/05/2005)
1
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 structured data
Can also used to format a page so it looks
nice
– There are also ways with Cascading Style Sheets
to format a page
2
Sample Table
Last Name First Name MI Heading
Hamill Mark D. Row
Bush George W.
3
Column
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
4
Text Tables
Done with fixed width fonts
– Typically with the tag
– Fonts like the COURIER NEW font can also be used
If you don’t use a fixed width font, columns won’t
line up correctly
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
5
Text Table Appearance
Notice Use of Fixed Width Font
does not allow bold, italics or resizing
Last Name First Name MI
--------- ---------- --
Armstrong Neil D.
Hamill Mark D.
Bush George W.
Gingrich Newt T.
Notice that carriage
returns and line feed
characters don’t
6
require a special tag.
Graphical Tables
Created with the tag
Will create optional horizontal and vertical
lines dividing rows and cells
can be used for Table Headers
is used for ordinary table rows
is used for table cells (D=Data)
There are lots of TABLE attributes we will
cover in the next lesson
7
Simple Table Example
Header Row, Col 1
Last Name Header Row, Col 2 Table Header
First Name
Row 1, Col 1
Hamill
Row 1, Col 2 Table Row 1
Mark
Row 2, Col 1
Table Row 2
Bush Row 2, Col 2
George
8
Table Conventions
and tags are nested inside
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)
– Will cover cell spacing and padding in another
lesson
9
Table Headers
is like except typically
– Text is centered within cell
– Text is in bold
– has the logical meaning “This is a header, so
it explains the meaning of the data in this column”
Some attributes
– align=“Left|Center|Right”
– bgcolor – Deprecated, use styles instead to specify
border colors
10
Table Rows
Follows the tag
One pair for each row wanted
Common attributes:
– align=“Left|Center|Right”
– valign=“Top|Middle|Bottom”
– bgcolor – Deprecated, use styles instead to specify
border colors
– colspan=“Value”
– rowspan=“Value”
11
Table Cells
One pair for each cell
Convention: each has at least one
pair inside it
– i.e. there is at least one cell in each row.
Typical attributes:
– align=“Left|Center|Right”
– valign=“Top|Middle|Bottom”
– bgcolor – Deprecated, use styles instead to specify border
colors
– colspan=“Value”
– rowspan=“Value”
12
attributes
We will get into more detail but some
that are useful right away:
– align=“left|center|right”
“left” and “right” can be used in conjunction
with wrapping text. Text under the table is
wrapped around the table except for “center”.
– border=“size”
by default there is usually NO border
usually a good idea to specify a table border
unless doing layout
13
Table Captions
You can place a tag after the
tag
This typically places a caption above the table
and its heading
Captions logically associate the text in the tag
with the table
– They should explain the purpose of the table
– They are not required
Should be embedded inside the tag
– This way it implicitly associates the caption with
the table 14
Table Caption Example
Table 1
…
15