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

XHTML Tutorial - Creating Table Borders

By: FYIcenter.com

(Continued from previous topic...)

How To Create Table Borders?

There are two sets of borders within a table:

  • Outer Borders - Borders that around the outer edges of the table.
  • Inner Borders - Borders between table cells.

If you want to create table outer borders and inner borders, you can use the "border" attribute, which offers two functions:

  • Turning on or off both outer borders and inner borders.
  • Setting the thickness in pixels of outer borders.

Here are some examples of how the "border" attribute can be used:

  • <table border="8"> - Turns on both outer and inner borders. It also set outer borders to be 8-pixel thick. The inner border will be always 1-pixel thick.
  • <table border="0"> - Turns off both outer and inner borders.
  • <table> - Turns off the borders too, because the default is border="0"

Below is a tutorial example of tables with borders:

<?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 with Borders</title>
 </head>
 <body>
  <h4>Online Order</h4>
  <table border="8">
<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 table_with_borders.html, and view it with Internet Explorer, you will see that the table is displayed with outer borders and inner borders between the cells as shown below:
            Table with Borders

(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:

More...