Minimal Table Structure

Minimal Table Structure

Let’s take a look at a simple table to see what it’s made of. Here is a small <table>...</table>
table with three rows and three columns that lists nutritional information. Tabular content (rows and columns)

Menu item Calories Fat (g) <tr>...</tr>

Table row
Chicken noodle soup 120 2
Caesar salad 400 26 <th>...</th>
Table header
Figure 8-2 reveals the structure of this table according to the HTML table
model. All of the table’s content goes into cells that are arranged into rows. <td>...</td>
Cells contain either header information (titles for the columns, such as Table cell data

“Calories”) or data, which may be any sort of content.

table
header cell header cell header cell
row Menu item Calories Fat (g)

data cell data cell data cell

row Chicken Noodle Soup 120 2

row data cell data cell data cell

Caesar Salad 400 26

Figure 8-2.  Tables are made up of rows that contain cells. Cells are the containers for
content.

Simple enough, right? Now let’s look at how those parts translate into ele-
ments (Figure 8-3).

<table>

<tr> <th>Menu item</th> <th>Calories</th> <th>Fat (g)</th> </tr>

<td>Chicken Noodle
<tr> Soup</td> <td>120</td> <td>2</td> </tr>

<tr> <td>Caesar Salad</td> <td>400</td> <td>26</td> </tr>

</table>

Figure 8-3.  The elements that make up the basic structure of a table.

Figure 8-3 shows the elements that identify the table (table), rows (tr, for
“table row”), and cells (th, for “table headers,” and td, for “table data”).
Cells are the heart of the table, because that’s where the actual content goes.
The other elements just hold things together.
09 285886-ch07.qxp 5/19/08 3:39 PM Page 110

Assign a
Table Border

Table borders make your cells easier to distinguish and

give the table a visible structure on a page. A border is
simply a line that appears around the table as well as
around each cell within the table. By default, a table
does not have a border unless you specify one. You can
use the BORDER attribute to turn table borders on or off.
When you set a border thickness, it applies only to the outer
edge of the table, not to the cells within the table. Border
thickness is measured in pixels. Borders appear gray unless
you specify a color. See the section “Adjust Cell Padding and
Spacing” to learn how to control interior borders.

Assign a Table Border

1 In the <TABLE> tag, type

BORDER=”?”, replacing ? with
the value for the border thickness
you want to set.
Note: See the section “Add a Table” to learn how
to create a basic table. 1

2 To set a border color, type

BORDERCOLOR=”?” in the
<TABLE> tag, replacing ? with
the color value you want to apply.

110
09 285886-ch07.qxp 5/19/08 3:39 PM Page 111

Working with Tables 7

chapter

l In this example, the browser

displays a table with a default
gray border.

l In this example, the browser

displays the same table with a
colored border.

111
09 285886-ch07.qxp 5/19/08 3:39 PM Page 114

Adjust Cell Width

and Height

You can control a cell’s width using the WIDTH

attribute and its height using the HEIGHT attribute.
This enables you to allocate more space to columns
or rows that have more content. If you do not set
L
a specific width or height, the content of the cell
determines the cell’s size. CEL
You can specify dimensions using a
pixel value or using a percentage
relative to the width or height of
the overall table.

Adjust Cell Width and Height

SET CELL WIDTH

1 In the <TD> tag, type

WIDTH=”?”, replacing ? with the
value or percentage you want to
set for the cell.
Note: See the section “Adjust the Table Size” to
set the width of the entire table. 1

l The Web browser displays a set

width for the cell, as well as all
the other cells in the same
column.

114
09 285886-ch07.qxp 5/19/08 3:39 PM Page 115

Working with Tables chapter 7

SET CELL HEIGHT

1 In the <TD> tag, type

HEIGHT=”?”, replacing ? with
the pixel value or percentage you
want to set for the cell.
Note: See the section “Adjust the Table Size” to
set the height of the entire table. 1

l The Web browser displays a set

height for the cell, as well as all
the other cells in the same row.

If I want to precisely control the dimensions in Can I set the width for a single cell and
my table, do I need to set a width and height not have it affect the other cells?
for all the cells? When you change the width of a cell, all the
If you have a table with more than one cell, no. When other cells in that column adjust to the same
you set a width for one cell, this also sets width. If you want one cell to span
the width for the cells above or below. one or more columns, you can
When you set a height for a cell, this use another set of codes to
also sets the height for all the cells to CELL control the individual cell
the left or right of it. Because of this, width. See the section “Extend
you need to set the width or height Cells across Columns and
only once for each row or column. Rows” to learn more.

115
09 285886-ch07.qxp 5/19/08 3:39 PM Page 117

Create Newspaper-Style
Columns Working with Tables chapter 7
ws
You can use the table format to present columns of
aily Ne
text on your Web page, much like a newspaper. For The D
example, you may want to organize your text into
two or three columns. Paragraphs of text are
contained within each column.
You can use the vertical alignment
attribute to make each column
align at the top of the table.

Create Newspaper-Style Columns

1 Within the <TR> and </TR>

tags, type <TD VALIGN=”top”>
to start the first column of text.
Note: See the section “Add a Table” to learn how
to create a basic table. 1
2
l You can optionally specify a 3
WIDTH attribute to constrain a
column’s width.
2 Type your column text. 4
3 Type </TD> at the end of the
text.
4 Repeat steps 2 and 3 to add
more columns and text.

The Web browser displays the

text as columns on the page.

117
09 285886-ch07.qxp 5/19/08 3:39 PM Page 118

Create Side
Navigation

You can use a table to create a two-column layout

for your page. You can use a narrow column on
the left to hold navigation links and a larger ation
Navig
column on the right to hold the main content.

Create Side Navigation

1 Start your table by typing

<TABLE> and <TR> tags.
2 Type <TD VALIGN=”top”
WIDTH=”?”>, replacing ? with
the pixel value or percentage
value you want to assign for the 1
2
navigation column. 3
4
3 Type your navigation links. You
can use the <BR> tag to put links
on different lines.
Note: For more information about links, see
Chapter 6.
4 Type </TD> at the end of the link
text.

5 Type <TD VALIGN=”top”

WIDTH=”?”>, replacing ? with
the pixel value or percentage
value you want to assign for the
main content column.
6 Type your main content.
7 Type </TD>, </TR>, and then
</TABLE> to close the table. 5
When the table displays in a
browser, the links appear to the 6
left of the main content.
7

118
09 285886-ch07.qxp 5/19/08 3:39 PM Page 119

Add a Table
Caption Working with Tables chapter 7
You can add a caption to your table to help users identify s
the information contained within the table. Table captions Sport
Daily
can appear at the top or bottom of the table. By default,
captions appear above the table unless you specify another
alignment attribute. Captions always appear on a separate
line of text from the table.
r
afte
You can format your caption text using the HTML o ry
Lane win
Vict 500
formatting tags. See Chapter 4 to learn more. t Zig
in
aitis tive HT M L
M at c o n s e c u
3rd

Add a Table Caption

1 Add a new line directly below the

<TABLE> tag.
Note: See the section “Add a Table” to learn how
to create a basic table. 2 4
2 Type <CAPTION>.
To place the caption below the 3
table, type ALIGN=”bottom”
within the <CAPTION> tag.
3 Type the caption text.
4 Type </CAPTION> at the end of
the caption text.

l The Web browser displays the

caption above or below the table.

119
09 285886-ch07.qxp 5/19/08 3:39 PM Page 120

Control which
Borders to Display

Ordinarily, when you assign a border to a table, it

surrounds both the table and the individual cells. You can
control which external and internal borders appear in
your table using the FRAME and RULES attributes. For
example, you can turn off the top and bottom borders of
a cell or display the entire right side of the table without
a border. By controlling which borders appear, you can
create a custom table. Borders
This section includes a list of all external and
internal border values for quick reference.

Control Which Borders to Display

CONTROL EXTERNAL BORDERS

1 In the BORDER attribute for the

table, type FRAME=”?”,
replacing ? with the value for the
border display you want to set.
You can use void, above,
below, rhs, lhs, hsides, 1
vsides, or border.

The Web browser displays the

table with the external borders
you specified.
l In this example, the sides of the
table are hidden.

120
09 285886-ch07.qxp 5/19/08 3:39 PM Page 121

Working with Tables chapter 7

CONTROL INTERNAL BORDERS

1 In the BORDER attribute for the

table, type RULES=”?”, replacing
? with the value for the border
display you want to set.
You can use none, cols,
rows, groups, or all.
1

The Web browser displays the

table with the internal borders
you specified.
l In this example, the inside row
borders are hidden.

What values do I use to define external or internal borders?

External Borders Internal Borders
Value Display Value Display
VOID No external borders NONE No internal borders
ABOVE A border above the table COLS Borders between columns
BELOW A border below the table ROWS Borders between rows
RHS A border on the right side of the table GROUPS Borders between column and row
LHS A border on the left side of the table groups

HSIDES Borders on the top and bottom of the table ALL Borders throughout the table cells
(default)
VSIDES Borders on the left and right sides of the
table
BORDER Borders on every side of the table (default)

121
09 285886-ch07.qxp 5/19/08 3:39 PM Page 122

Adjust the
Table Size

You can control the exact size of a table

using the WIDTH and HEIGHT attributes
in the <TABLE> tag. You can specify a
table size in pixels or set the size as a
percentage of the browser window.

When setting a width in pixels, limit the value to 750 pixels

to ensure the table fits on the screen. If you prefer a more
flexible table, set the size as a percentage. This allows the
table to be resized if the browser window is resized.

Adjust the Table Size

SET A TABLE SIZE IN PIXELS

1 In the <TABLE> tag, type

WIDTH=”?”, replacing ? with the
pixel value you want to assign.
3 2
2 Type a space.
3 Type HEIGHT=”?”, replacing ?
with the pixel value you want to 1
assign.
Note: The HEIGHT attribute is not as well
supported as the WIDTH attribute and may not
display properly in all browsers.

l The Web browser displays the

table at the specified size.

122
09 285886-ch07.qxp 5/19/08 3:39 PM Page 123

Working with Tables chapter 7

SET A TABLE SIZE AS A
PERCENTAGE
1 In the <TABLE> tag, type
WIDTH=”?”, replacing ? with the
percentage value you want to
assign.
You can add a height setting if
your table needs one by typing
1
HEIGHT=”?” in the <TABLE>
tag.
Note: The HEIGHT attribute is not as well
supported as the WIDTH attribute and may not
display properly in all browsers.

l The Web browser displays the

table at the specified size.

Is it possible to set a table too small for its To what size does a browser set my table if I
contents? do not specify an exact width?
No. If you accidentally make a table too small for If you do not set a width using the WIDTH attribute,
the contents, the browser ignores the the browser sizes the table based on the
measurements and tries to make cell contents. When text is in the
the table fit as best it can. On table, the browser expands the
the other hand, if you set a table enough to fit its largest
table too wide, users are forced contents but not past the right
to scroll to see parts of the table. edge of the browser window. If a
For best results, do not make your table contains large images, it may
table wider than 750 pixels. extend beyond the browser window.

123
09 285886-ch07.qxp 5/19/08 3:39 PM Page 124

Change Cell
Alignment

You can control the alignment of data within your

table cells using the ALIGN and VALIGN attributes.
The ALIGN attribute controls horizontal alignment:
left, center, and right. By default, all table data
you enter into cells is left-aligned. The VALIGN
attribute controls vertical alignment: top, middle,
and bottom. By default, the table data is vertically
aligned to appear in the middle of each cell.
You can add alignment attributes to a single cell, a row, or
all the data in the table. To learn how to position a table
on the page, see the section “Change Table Alignment.”

Change Cell Alignment

SET HORIZONTAL ALIGNMENT

1 Click inside the tag for the cell,

row, or table you want to align.
Note: You can also align column or row groups.
See the section “Create Column and Row Groups”
to learn more.
2 Type ALIGN=”?”, replacing ?
with a horizontal alignment 1 2
attribute: left, center, or
right.

The Web browser displays the

table with the specified
alignment.
l In this example, the contents of a
single cell are centered.

124
09 285886-ch07.qxp 5/19/08 3:39 PM Page 125

Working with Tables chapter7

SET VERTICAL ALIGNMENT

1 Click inside the tag for the cell,

row, or table you want to align.
Note: You can also align column or row groups.
See the section “Create Column and Row Groups” 1 2
to learn more.
2 Type VALIGN=”?”, replacing ?
with a horizontal alignment
attribute: top, middle, or
bottom.

The Web browser displays the

table with the specified
alignment.
l In this example, a single column
heading is bottom-aligned.

Can I override the alignment of a column or How do I justify data in a table cell?
row group for a single cell? Justification sets both left and
Yes. You can set the alignment right alignment and stretches
for a column or row and OVERRIDE the text to span the area
then override the alignment between the cell borders.
for an individual cell within
the group. Simply add the
Although there is an HTML
attribute for justification, J-U-S-T-I-F-Y
alignment attribute to the justify, not all Web
cell. See the section “Create browsers currently support
Column and Row Groups” to the setting.
learn more.

125
 Spanning Cells

In this way, they are a key tool for making table content accessible. Don’t try
to fake headers by formatting a row of td elements differently than the rest of
the table. Conversely, don’t avoid using th elements because of their default
rendering (bold and centered). Mark up the headers semantically and change
the presentation later with a style rule.
That covers the basics. Before we get fancier, try your hand at Exercise 8-1.

exercise 8-1  |  Making a simple table

Try writing the markup for the table shown in Figure 8-5. You can open a text editor
or just write it down on paper. The finished markup is provided in Appendix A.
(Note that I’ve added a 1-pixel border around cells with a style rule just to make the
structure clear. You won’t include this in your version.)
Be sure to close all table elements. Technically, you are not required to close tr, th,
and td elements, but I want you to get in the habit of writing tidy source code
for maximum predictability across all browsing devices. If you choose to write
documents using XHTML syntax, closing table elements is required in order for the
document to be valid.

Figure 8-5.  Write the markup for this table.

Spanning Cells
One fundamental feature of table structure is cell spanning, which is the
stretching of a cell to cover several rows or columns. Spanning cells allows
you to create complex table structures, but it has the side effect of making
the markup a little more difficult to keep track of. You make a header or data
cell span by adding the colspan or rowspan attributes, as we’ll discuss next.

Chapter 8, Table Markup 139

 Spanning Cells

Column spans
Column spans, created with the colspan attribute in the td or th element,
stretch a cell to the right to span over the subsequent columns (Figure 8-6).
Here a column span is used to make a header apply to two columns. (I’ve
WA R NIN G added a border around cells to reveal the table structure in the screenshot.)
Be careful with colspan values. If you <table>
specify a number that exceeds the num- <tr>
ber of columns in the table, most brows- <th colspan="2">Fat</th>
</tr>
ers will add columns to the existing
<tr>
table, which typically screws things up. <td>Saturated Fat (g)</td>
<td>Unsaturated Fat (g)</td>
</tr>
</table>

Figure 8-6.  The colspan attribute stretches a cell to the right to span the specified
number of columns.

Notice in the first row (tr) that there is only one th element, while the sec-
ond row has two td elements. The th for the column that was spanned over
is no longer in the source; the cell with the colspan stands in for it. Every
row should have the same number of cells or equivalent colspan values. For
example, there are two td elements and the colspan value is 2, so the implied
number of columns in each row is equal.

exercise 8-2  |  Column spans

Try writing the markup for the table shown in Figure 8-7. You can open a text editor or just
Some hints: write it down on paper. I added borders to reveal the cell structure in the figure, but your
yy For simplicity's sake, this table uses all table won’t have them. Check Appendix A for the final markup.
td elements.
yy The second row shows you that the
table has a total of three columns.
yy When a cell is spanned over, its td
element does not appear in the table.

Figure 8-7.  Practice column spans by writing the mvwarkup for this table.

140 Part III, CSS for Presentation

 Spanning Cells

Row spans
Row spans, created with the rowspan attribute, work just like column spans,
but they cause the cell to span downward over several rows. In this example,
the first cell in the table spans down three rows (Figure 8-8).
<table>
<tr>
<th rowspan="3">Serving Size</th>
<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
</table>

Again, notice that the td elements for the cells that were spanned over (the
first cells in the remaining rows) do not appear in the source. The rowspan="3"
implies cells for the subsequent two rows, so no td elements are needed.

Figure 8-8. The rowspan attribute stretches a cell downward to span the specified number
of rows.

exercise 8-3  |  Row spans

Try writing the markup for the table shown in Figure 8-9. Remember that cells that are
spanned over do not appear in the table code. Rows always span downward, so the
“oranges” cell is part of the first row even though its content is vertically centered.
Some hints:
If you’re working in text editor, don’t worry if your table doesn’t look exactly like the one
shown here. The resulting markup is provided in Appendix A. yy Rows always span downward, so the
"oranges" cell is part of the first row
yy Cells that are spanned over do not
appear in the code

Figure 8-9.  Practice row spans by writing the markup for this table.

Chapter 8, Table Markup 141

 Table Accessibility

Space In and Between Cells

By default, cells are sized just large enough to fit their contents, but often you’ll want
to add a little breathing room around tabular content (Figure 8-10). Because spacing
is a matter of presentation, it is a job for style sheets.
Cell padding is the space inside the cell, between the content and the edge of the
cell. To add cell padding, apply the CSS padding property to the td or th element.
Cell spacing, the area between cells, is a little more complicated. First, set the border-
collapse property for the table to separate, then use the border-spacing property
to specify the amount of space between borders. Unfortunately, this technique won’t
work in Internet Explorer 6, but hopefully IE6 usage will be inconsequential by the
time you’re reading this.
In the past, cell padding and spacing were handled by the cellpadding and
cellspacing attributes in the table element, respectively, but they have been made
obsolete in HTML5 due to their presentational nature.

By default, table cells expand just

enough to fit the contents.

Cell padding is the space between the

edge of the cell and its contents. Cell spacing is the space between cells.

Figure 8-10.  Cell padding and cell spacing.

Table Accessibility
As a web designer, it is important that you always keep in mind how your
site’s content is going to be used by non-sighted visitors. It is especially chal-
lenging to make sense of tabular material using a screen reader, but there are
measures you can take to improve the experience and make your content
more understandable.

142 Part III, CSS for Presentation

09 285886-ch07.qxp 5/19/08 3:39 PM Page 128

Create Column and

Row Groups

You can define a group of columns in

your table and set attributes across that
group using the <COLGROUP> tag. This
saves you from having to apply attributes
separately to all the cells in the columns.
You can use the <COL> tag to add special
formatting to columns that differ from
other columns in a group.

Create Column and Row Groups

CREATE A COLUMN GROUP

1 Add a line where you want to insert a 2

new column group and type
<COLGROUP SPAN=”?”, replacing ? 1
with the number of columns you want 3
to include in the group.
l You can type any formatting attributes
you want to assign the group within the
<COLGROUP> tag.
2 Type </COLGROUP> to end the group.
3 Repeat steps 1 and 2 for each column
group you want to create.

Any formatting you assign to the group

is applied to every cell in the group.
l In this example, one group has a gray
background color, while the other has a
purple background color.
Note: See the section “Add a Background Color to Cells”
to learn more.

128
09 285886-ch07.qxp 5/19/08 3:39 PM Page 129

Working with Tables chapter 7

CREATE A NONSTRUCTURAL COLUMN
GROUP
1 After a <COLGROUP> tag, add a line
where you want to create a new column
definition and type <COL SPAN=”? ”, 1 23
replacing ? with the number of columns
you want to format.
2 Type any formatting attributes you want to
assign the columns within the <COL> tag.
You do not need a closing tag for the
<COL> tag.
3 Repeat steps 1 and 2 for each column you
want to create in the column group.

Any formatting is applied to the columns in

the group.
l In this example, two purple columns have a
narrower width and a third purple column
has a wider width.
Note: See the section “Adjust Cell Width and Height” to learn
more about changing cell dimensions.

Can my table include If my column group includes a column header and I

both grouped and assign an alignment to the group, does the header
ungrouped columns? alignment change, too?
Yes. For example, your No. Header cells are not affected by alignment
table might include a you assign to the column group. Browsers 22g
11g
17g

group of columns set read the <TH> tag and automatically set
aside for certain data, center alignment and bold text. You can, Title Cell
12g 16g
while the remaining cells however, align the cell separately using the
40g
13g 10g
30g 23g

remain ungrouped. alignment attributes. See the section “Change

Cell Alignment” to learn how to add alignment
coding to a table cell.

129
09 285886-ch07.qxp 5/19/08 3:39 PM Page 130

Create Column and

Row Groups (continued)

HEAD
You can use row groups to divide a table HEAD
BODY
into horizontal sections. You create row BODY
HEAD
groups using the <THEAD> and <TBODY> BODY
BODY T
tags. The <THEAD> tag creates a header for FOO

the row group. You use the <TBODY> tag

to define the actual row groups. If the
row group requires a footer, you can add
one with the <TFOOT> tag.

Create Column and Row Groups (continued)

CREATE A ROW GROUP

1 Before the first header row you want to

group, type <THEAD>. 1
l You can add any formatting you want
to apply to the group within the
<THEAD> tag. 2
Note: See the section “Add a Background Color to Cells”
to learn more about adding color to tables.
2 Type </THEAD> after the last row you
want to include in the header group.

3 Type <TBODY> above the first row

you want to include in the group.
3
l You can type any formatting attributes
you want to assign the group within
the <TBODY> tag.
4 Type </TBODY> after the last row
you want to include in the group.
To create multiple row groups, repeat
steps 3 and 4 for the other rows you
want to group together in the table.
4

130
09 285886-ch07.qxp 5/19/08 3:39 PM Page 131

Working with Tables chapter 7

5 Type <TFOOT> above the first
row you want to include in the
footer group.
l You can type any formatting
attributes you want to assign the
group within the <TFOOT> tag.
6 Type </TFOOT> after the last row
you want to include in the footer
group.

5
6

The Web browser displays the

row groups in the table.
In this example, row groups are
assigned different background
colors to help distinguish each
group.

After I assign a column or row group, how How do I add borders between my groups?
do I align every cell in the group? You can specify exactly which cell and table borders
You can add the ALIGN attribute to appear in your table using the FRAME
the <THEAD>, <TFOOT>, or attribute. For example, you might
<TBODY> tag to assign set a thick, colored border at
alignment to the entire group. the top and bottom of a row
For example, if you type group to make the group stand
<TBODY ALIGN=”right”>, out from the rest of the table.
all the cell content in the See the section “Control Which
group aligns to the right of Borders to Display” earlier in this
the cells. chapter to learn more.

131
09 285886-ch07.qxp 5/19/08 3:39 PM Page 139

Nest a Table
within a Table Working with Tables 7
chapter

You can create a table within a

table, or a nested table. Nested
tables allow you to create a more
complex table layout.

Nest a Table within a Table

1 Within the main table, add a line

in the cell in which you want to
add another table.
2 Create the nested table just like a
regular table. 1
Note: See the section “Add a Table” to learn how
to create a basic HTML table. 2
To help distinguish the nested
table from the main table,
consider using indents or new
lines when entering the nested
table data.

l The Web browser displays the

table within the main table.

139