Chapter 38. Formatting with HTML Tables

IN THIS CHAPTER

  • Rudimentary formatting with tables

  • Real-world examples

  • Floating page

  • Odd graphic and text combinations

  • Navigational menus and blocks

  • Multiple columns

Formatting your documents with HTML tags allows you to create many useful designs for a variety of purposes. There is one single HTML tag (and related tags) with humble beginnings that revolutionized document formatting with HTML: the <table> tag.

The <table> tag was originally designed to represent tabular data, numbers, and other data in columns. However, using a few tricks, such as embedding tables within one another, it is possible to achieve some pretty fantastic layouts. This chapter follows up on the basic table skills presented in Chapter 9 and covers how to best utilize tables for page layout purposes.

Rudimentary Formatting with Tables

It's not hard to see how tables can help with formatting elements. For example, consider the following code and the output shown in Figure 38-1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>A Simple Form</title>
</head>
<body>
<form>
<p>Name:&nbsp;<input type="text" size="40"></p>
<p>Age:&nbsp;
<input type="radio" name="20to30" value="20to30">
&nbsp;20-30&nbsp;
<input type="radio" name="31to40" value="31to40">
&nbsp;31-40&nbsp;
<input type="radio" name="41to50" value="41to50">
&nbsp;41-50&nbsp;
</p>
</form>
</body>
</html>

A simple table can help better align the elements in this form, ...

Get HTML, XHTML, and CSS Bible, Fourth Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial