Table Borders

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
      Lists
      Basic Tables
         Table basics
         Rows and data
         Borders
         Width
         Cellpadding & spacing
         Alignment
         Rowspan & colspan
         You Try It
      Advanced Text
      Marquee
      Meta
      Sounds
      Comments
Section 4 - Advanced
Section 5 - Publishing
Section 6 - Extras
Appendices

Table Borders
TAGS USED: <table border="">
Tables are a great way of formatting your document, but sometimes you don't want the border around the table, or you want to make an extra large border around it. This is where you learn to modify the border of your table to suit your needs.

To modify the border of a table, you need to place an extra command inside the <table> tag. It looks like this:

This would create a table with a border five pixels wide. The old default has been a border of 1 pixel wide. Strangely though, some computers are defaulting to a no-border table. Anyway, if you'd like to be in control of what your table looks like, you'd better specify the border on your table.

Here are a few examples of table borders and how they look. We'll use the 4x4 table we made last lesson.

Code
<table border=5> <tr> <td> This is square 1. </td> <td> This is square 2. </td> </tr> <tr> <td> This is square 3. </td> <td> This is square 4. </td> </tr> </table>

What you see

This is square 1.	This is square 2.
This is square 3.	This is square 4.

That was a border 5 pixels wide. But imagine what you can do with a border zero pixels wide - NO BORDER! Here's what that would look like:

Code
<table border=0> <tr> <td> This is square 1. </td> <td> This is square 2. </td> </tr> <tr> <td> This is square 3. </td> <td> This is square 4. </td> </tr> </table>

What you see

This is square 1.	This is square 2.
This is square 3.	This is square 4.

And that's how you change the size of borders around your tables. We'll use these a lot later, especially the borderless table. There is one more thing you can do with the border of a table, and that's altering the color of the border.

Code
<table border=5 bordercolor="ffff99"> <tr> <td> This is square 1. </td> <td> This is square 2. </td> </tr> <tr> <td> This is square 3. </td> <td> This is square 4. </td> </tr> </table>

What you see

This is square 1.	This is square 2.
This is square 3.	This is square 4.

You can also use color names instead of the hex color codes.

Code
<table border=5 bordercolor="violet"> <tr> <td> This is square 1. </td> <td> This is square 2. </td> </tr> <tr> <td> This is square 3. </td> <td> This is square 4. </td> </tr> </table>

What you see

This is square 1.	This is square 2.
This is square 3.	This is square 4.