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

XHTML 1.0 Tutorials - Understanding Tables and Table Cells

By: FYICenter.com

Part:   1   2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17 

A collection of 17 FAQs/tutorials tips on XHTML tables and table cells. Clear answers are provided with tutorial exercises on table elements like: table, tr, td, th, caption; table attributes like: border, frame, cellspacing, cellpadding; row and cell attributes like: align, valign, colspan, rowspan. Topics included in this collection are:

  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?
  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?

Please note that all notes and tutorials are based on XHTML 1.0 specification.

What Is a TABLE Tag/Element?

A "table" element is a block level element that you can use to present information in table of rows and columns. Here are basic rules about "table" elements:

  • "table" elements are block elements.
  • "table" elements can not have empty contents.
  • "table" elements can not have text contents.
  • A "table" element can only have "tr" or other table sub-elements.
  • "tr" elements are used in a "table" element to define rows in a table.
  • "td" elements are used in a "tr" element to define columns in a row.

Below is a tutorial example of a simple "table" element:

<?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>Simple Table</title>
 </head>
 <body>
  <h4>Online Order</h4>
  <table>
<tr><td>Description</td><td>Qty</td><td>Price</td></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 simple_table.html, and view it with Internet Explorer, you will see a simple table with 4 rows and 3 columns as shown below:
            Simple Table

(Continued on next part...)

Part:   1   2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17 


Selected Developer Jobs:

More...