Chapter 9. Tables

IN THIS CHAPTER

  • Parts of an HTML Table

  • Table Width and Alignment

  • Cell Spacing and Padding

  • Borders and Rules

  • Rows

  • Cells

  • Table Captions

  • Row Groups—Header, Body, and Footer

  • Background Colors

  • Spanning Columns and Rows

  • Grouping Columns

  • Formatting with Tables

Tables are a powerful HTML tool with many uses. Developed originally to help communicate tabular data (usually scientific or academic-based data), tables are now used for many purposes—from simply holding tabular data to the layout of entire pages. This chapter covers the basics of tables and then progresses into more complex uses of this versatile HTML structure.

Parts of an HTML Table

An HTML table is made up of the following parts:

  • Rows

  • Columns

  • Header cells

  • Body cells

  • Caption

  • Header row(s)

  • Body row(s)

  • Footer row(s)

Figure 9.1 shows an example of an HTML table, with the various parts labeled. The table is defined by the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
<title>An HTML Table</title>
 </head>
 <body>
 <p>
   <table border="1">
     <caption>Table Caption</caption>
     <thead>
       <tr><td colspan="2">Table Header</td></tr>
     </thead>
     <tfoot>
       <tr><td colspan="2">Table Footer</td></tr>
     </tfoot>
     <tbody>
       <tr><th>Header Cell 1</th><th>Header Cell 2</th></tr>
       <tr><td>Body Cell 1</td><td>Body Cell 2</td></tr>
     </tbody>
   </table>
 </p>
 </body>
 </html>
HTML table elements

Figure 9.1. HTML table elements

Many ...

Get HTML, XHTML, and CSS Bible, Fifth 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