O'Reilly logo

HTML, XHTML, and CSS Bible, Fourth Edition by Steven M. Schafer

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 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, ...

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