XHTML Tutorial - "caption" Tag/Element

Home >> FAQs/Tutorials >> XHTML Tutorials and Tips >> Index

By: FYIcenter.com

What Is a "caption" Tag/Element?

A "caption" element is an inline element that you can use to define the caption text of a table. Browsers will display caption above the table and aligned to the center. Here are basic rules about "caption" elements:

"caption" elements are inline elements.
A "caption" element can only be used as a sub-element of a "table" element.
One "table" element can only zero or one "caption" sub-element.
The "table" element must be specified before any "tr" elements.
The content of the "caption" element will always be displayed above the table and aligned to the center by most browsers.
Caption's background is not part of the table's background.

Below is a tutorial example of adding a caption to a table:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Table Caption</title>
 </head>
 <body>
  <table border="1" width="300" 
   style="background-color: #eeeeee">
   <caption>Online Order</caption>
<tr><th>Description</th><th>Qty</th><th>Price</th></tr>
<tr><td>Email Account</td><td>10</td><td>$9.90</td></tr>
<tr><td>FYIcenter.com Ad</td><td>1</td><td>$99.00</td></tr>
<tr><td>1-year Access</td><td>1</td><td>$199.00</td></tr>
  </table>
 </body>
</html>

If you save the above document as table_caption.html, and view it with Internet Explorer, you will see a caption displayed above the table. Notice that the table background did not cover the caption area as shown below:
Table Caption

(Continued on next topic...)

Selected Developer Jobs:

More...