O'Reilly logo

Web Design All-in-One for Dummies® by Sue Jenkins

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 2: Organizing Content
with Tables and Lists
In This Chapter
Using tables to organize content
Adding content to tables
Formatting tables and table cells
Nesting tables
Organizing content with lists
Setting the list type
Nesting lists
W
hen it comes to keeping your content organized so that visitors can
quickly find what they are looking for, consider marking up your con-
tent with HTML tables and lists. Tables are useful for displaying tabular data
and information with multiple categories, such as financial figures, store
locations, and menu offerings. Lists can be a great resource for times when
you need to show things in sequence, such as how a set of items are
structured relative to one another (as with links to all the site’s
pages on a site map page or a set of navigation buttons), or
for times when you need your content to display in the
order in which a set of items should be accessed or uti-
lized (as with items in a numbered list).
In this chapter, you find out how easy it is to mark
up basic content into table and list format. In addi-
tion, you read about adding and formatting content
in tables, nesting tables for complex page elements,
organizing and structuring list content, and list
nesting to create multitiered lists.
Inserting Tables on a Page
While most modern page layouts rely on layers using <div> tags
to organize content within the browser instead of tables, which was once
the norm, tables themselves are still very useful within the body of the page
for organizing data and other content that requires gridlike arrangement. In
15_417966-bk03ch02.qxp 3/25/09 10:35 PM Page 249
Inserting Tables on a Page
250
the following sections, you find out more about the basics of organizing
your content in tables.
Discovering what you can do with tables
Tables are the perfect way to organize multirow and multicolumn data and
other content within regions of a Web page, particularly because anything
that can go on a page can be placed inside a table cell. Furthermore, in a
table, you can control the alignment, width, and height of the table cells, as
well as style the contents of those table cells with CSS, providing you with a
whole new level of control over the contents of the table.
Tables can have any number of rows and columns, be any width and height,
have any colored border, and have any background color or tiling back-
ground image. What’s more, the cells of the tables can also have unique
widths, heights, and background colors and/or background images that sit
on top of whatever styling attributes happen to be applied to the table.
One of the only real drawbacks to working with tables is that they require a
lot of code to do the job they do, which can increase the overall size of the
HTML file. For example, the table in Figure 2-1 looks fairly straightforward,
but on the code level, it looks like this:
Figure 2-1: Tables require a lot of HTML coding to display content in an orderly manner.
<table id=”schedule”>
<tr>
<td class=”toprow”>Winter 2009 Schedule</td>
<td class=”toprow”>MON</td>
<td class=”toprow”>TUES</td>
<td class=”toprow”>WED</td>
<td class=”toprow”>THURS</td>
</tr>
<tr>
<td class=”cellstyle”>First Class</td>
<td class=”cellstyle”>1/5/09</td>
<td class=”cellstyle”>1/6/09</td>
<td class=”cellstyle”>1/7/09</td>
<td class=”cellstyle”>1/8/09</td>
</tr>
15_417966-bk03ch02.qxp 3/25/09 10:35 PM Page 250
Inserting Tables on a Page
251
<tr>
<td class=”cellstyle”>No Class</td>
<td class=”cellstyle”>2/16/09</td>
<td class=”cellstyle”>2/17/09</td>
<td class=”cellstyle”>2/18/09</td>
<td class=”cellstyle”>2/19/09</td>
</tr>
<tr>
<td class=”cellstyle”>Last Class</td>
<td class=”cellstyle”>3/30/09</td>
<td class=”cellstyle”>3/31/09</td>
<td class=”cellstyle”>4/1/09</td>
<td class=”cellstyle”>4/2/09></td>
</tr>
</table>
Understanding the structure of a table
To display correctly in a browser, each table requires several components.
The first part is the opening and closing
<table> tags, which define the
table’s beginning and end within the HTML. The opening
<table> tag is
where you can add attributes to the code (for things like setting the width of
the table) and apply any special formatting to the table using CSS styles, as
in the following example:
<table width=”300” id=”menu”>
</table>
In between the table tags come the opening and closing table row tags, <tr>
and </tr>, which define a row within the table. To have more than one row,
insert another pair of table row tags, as in the following example:
<table width=”300”>
<tr></tr>
<tr></tr>
</table>
To define individual table cells, which make up the columns across each row
in the table, insert a pair of table data tags,
<td> and </td>, between the
table row tags. To have more than one column in a row, insert another pair
of table data tags between the table row tags, as in the following example:
<table width=”300”>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Book III
Chapter 2
Organizing Content
with Tables
and Lists
15_417966-bk03ch02.qxp 3/25/09 10:35 PM Page 251

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required