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

XHTML Tutorial - "caption" Tag/Element

By: FYIcenter.com

(Continued from previous topic...)

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"
  <title>Table Caption</title>
  <table border="1" width="300" 
   style="background-color: #eeeeee">
   <caption>Online Order</caption>
<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>

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

  1. What Is a "table" Tag/Element?
  2. What Is a "tr" Tag/Element?
  3. What Is a "td" Tag/Element?
  4. What Are the Attributes of a "table" Element?
  5. How To Create Table Borders?
  6. How To Turn On Some Parts of Table Outer Borders?
  7. How To Control White Spaces between Table Cells?
  8. How To Control Padding Spaces within a Table Cell?
  9. How To Control Table Widths?
  10. What Happens If One Row Has Missing Columns?
  11. How To Control Horizontal Alignment in Table Cells?
  12. How To Control Vertical Alignment?
  13. How To Add Column Headers to a Table?
  14. What Is a "caption" Tag/Element?
  15. How To Merge Cells in a Row?
  16. How To Merge Cells in a Column?
  17. How To Create Nested Tables?

Selected Developer Jobs: