HTMLTables

Terry Koluch
Dan Solarek

HTML Tables: Basics

Tables are commonly used to provide a higher level
of control over how information is displayed on a
page
HTML tables are organized into rows and columns
The intersection of a row and column is a cell
In HTML, a cell is the basic element that holds data
(text, graphics, other tables)

HTML Tags
Tables are denoted by a set of <table> and
</table> tags
Tables can be nested to any level
When nested, you place a second table
within a table cell
Default is for tables to display borders. You
can use hidden tables (i.e., tables without
borders) to control element alignment without
the information appearing to be in a table

Rows, Data Cells & Headers

Within a table, we specify a row via a <tr>
and </tr> tag set
Within a row, we specify
Data cells via the <td> and </td> tags
Headers via the <th> and </th> tags
Can have multiple <td> (or <th> ) tag sets
within a row
Make sure you have the same number of
<td> and <th> tag sets in each row

Captions
Use the <caption>information</caption> tag
set to add a caption to a table
If used, must appear directly after the
opening <table> tag
Default placement is centered above the
table, but can also use align=position
attribute as follows

bottom centered below table

left above table, aligned with left table margin
right above table, aligned with right table margin
top same as default

Row Groups
Can classify a tables rows into row groups to
specify their purpose
Types of row groups

table header <thead> </thead>

table body <tbody> </tbody>
table footer <tfoot> </tfoot>

Sequence important table header (one set

only) first, table footer next (also one set
max), then multiple table body sections
Used for tables that are populated with data
from external sources like XML documents or
databases. Can reference programmatically

A Simple Example

Use whitespace for clarity in your HML code

Upper or lower case will work. Lower case strongly
recommended
Click here to view a very simple table and do a View /
Source to se the HTML
Comments about the table:

Default Header settings are bold, centered

Default Data Cell settings are regular weight, left-aligned
Default borders for tables are no borders. I added a border
tag to show the cell borders
Table is 50% of browser width to better show text alignment
within cells (again, I specified that)

Table Borders
As mentioned on previous slides, default browser
behavior is to not display table borders. Here is an
example of a hidden table. Use View/Source to see
the HTML. Either omit the border attribute or set it
equal to 0
Use border=value attribute to specify border size
where value is width in pixels
Use the Cascading Style Sheet (CSS) inline style
attribute to specify the background color of a table.
We will cover CSS technology later in the course.
For now, use style=background-color: color (note:
default is two shades of gray to create a 3dimensional effect) where color is either an HTML
color or a hexadecimal color code

Table Frames
By default, a table border surrounds the entire table
and each cell within the table
Use the frame=value attribute to specify which
sides of a table will have borders where value can be

above only above table

below only below table
border around all 4 sides of table
box same as border (default)
insides on top and bottom sides
lhs only on left-hand side
rhs only on right-hand side
void no border
vsides on left and right sides

Table Rules
Use the rules=value attribute to
control how gridlines are drawn within a
table where value can be
all around cells
cols around columns
groups around row groups
none no rules
rows around rows

Table Background Color

Use the inline CSS <style> attribute to
specify the background color of a table
as <style background-color: color>
where color is either an HTML color or
RGB code
For example, to specify a green
background color, use
<table style=background-color: green>

The rowspan Attribute

Use the rowspan attribute to spread
data in a single <td> (or <th>) cell
across multiple rows
Format is rowspan=value where value
specifies the number of rows
Here is a simple example. Do a View /
Source to see the actual HTML

The colspan Attribute

Use the colspan attribute to spread data in
a single <td> (or <th>) cell across multiple
columns
Format is colspan=value where value
specifies the number of column
Here is a simple example. Do a View /
Source to see the actual HTML
Note that multiple tables within a single page
is not a problem in fact, quite common

The cellpadding and cellspacing

Attributes
Use the cellpadding=value attribute to put
whitespace between data in a tables cells
and the cell borders. Value is expressed in
pixels. Browser default is 1 pixel
Use the cellspacing=value attribute to put
whitespace between cells. Again, value is
expressed in pixels. Default is 2 pixels
Can combine both. Here is an example. Use
View / Source to see the HTML
Used to make the table easier to read / more
pleasant to the eye

Table Width & Height

Use the width=value attribute within the table tag to specify

the overall width of the table. Value is specified either as a
percentage of the containing element or in pixels
If specified in pixels, the table maintains same size regardless
of monitor size and resolution. If specified as a percentage, the
table will fluctuate as the monitor size and resolution changes
Use 100% to fill entire monitor width
The browser will ignore directives to use less space than it
requires. For example, if it needs 200 pixels to display the
table, and you specify 100 pixels, it will ignore your specification
Many browsers support the height=value attribute where value
is specified as above. However, it is not part of the HTML
specs and is not supported by XHTML. As such, I do not
recommend its use

Cell Width & Height

Use the width=value attribute to specify the
width of an individual cell of the table. Value is
specified either as a percentage of the table or
in pixels
Set the width of the first cell in a column and
all other cells in that column will inherit that
width. Note if one of the other cells in the
column requires more space, the browser will
set the column to the larger width
Many browsers support the height=value
attribute where value is specified as above.
However, it has been deprecated and, as
such, I do not recommend its use

The nowrap Attribute

Use the nowrap=nowrap attribute to
prevent text from wrapping as table size
is changed

Aligning Cell Content

By default, <td> cell text is placed in the
middle of the cell, aligned with the left
edge of the cell. <th> elements are
centered
You can change both the vertical and
horizontal alignment
Can use CSS text-align style as well

Horizontal Alignment
Use the align=position attribute to specify horizontal
alignment
Position can be

left - <td> default

center - <th> default
right
justify
char - align values based on position of a particular
character for example, a period, to line up currency
values. Default value is based on language specified for the
browser. Can change by using the char attribute i.e., <td
align=char char=?> .. </td> would align on ?. This is not
well supported by most browsers

Vertical Alignment
Use the valign=position attribute to specify
vertical alignment
position can be

top
middle - default
bottom
baseline - The baseline is an imaginary line upon
which rests all letters in a line of text. baseline
sets the row so that all cells share the same
baseline. Most of the time this has the same effect
as bottom, but if the fonts are different sizes, then
baseline will result in a better appearance

Formatting Table Text

Can use the <font> tag set, but it is
deprecated and so I prefer that you not
use it
Instead, use CSS (more on this later in
the course). For now, the following
slide contains some more commonly
used style specifications

Common CSS Formatting Settings

<style=
font-family: font name specifies font
font-size: font size multiple options
background-color: color works same as
at table level
background-image: url(url) to specify
an image as a background image

Table Alignment
Use the float:position style to align a table
with either the left or right margin of a page
and then allow the text to flow around the
table. As you probably surmised, position can
be either left or right
If you do this, typically a good idea to specify
the margins style to prevent text from
crowding too closely. Margins specified as
margin: top bottom left right where each of
the 4 are specified in pixels

Web Page Design

One popular use of tables is to set up a
webpage / website template so that the
entire page is a set of nested tables
This provides ability to mimic frames /
gain very precise control over
appearance without the hassles of
frames

Web Page Design

Heres a link to a simple example
A very simple layout