Categories


HTML: External Table Borders

Using tables on a web page is a great way to separate information, presenting it in a more orderly format.

The standard table has a default space setting of one (1) for  cellpadding and two (2) for cellspacing.   This means your table’s cellpadding will have 1 pixel between the contents of a cell and its border  and for cellspacing there will be  2 pixels between one cell border and the next cell.    However, when you use a border around your table and leave the default settings, your table may not look the way you want. To control the way your table displays, you will to need change these default settings – as well as designate where you want the borders to appear.

All functioning HTML Code is shown in blue.

Basic Table with Border

The basic code for a simple table having a border of 1 pixel is written as:

Text here

Notice the space between the two (2) lines bordering the table. Now if we were to assign zero “0” to both cellpadding and cellspacing, then our code would look like:

Text here

 

You now notice there is only one line for the border; however, at the same time there is no space between the text and the border making the table look cramped.

This can be fixed by assigning a number to the cellpadding attribute. In that case the HTML code might look like:

Text here

assigning a cellpadding value  of 5 will place 5 pixels between the content and the border. This value can be adjusted to any number.

How to Choose External Borders to Display

By default when you set the border size, a border will appear between each cell and around the table itself. Taking this one step further, you may want to specify which external borders to display – as well as internal borders.

In this post, we’ll cover how to display the different external borders.  To display external sides of the table, you use the code “frame=location” inside the HTML table code.     The external frame choices available  are listed below with the term to use for ‘location’  being in italics:

  • No external borders – void
  • Single border on top – above
  • Single border on bottom – below
  • Border on both the top and bottom – hsides
  • Border on both the right and left sides – vsides
  • Single border on the right side – rhs
  • Single border on the left side – lhs
  • Border on all sides – box or border

Example:  If you want to have a simple table with a border on both the top and bottom, the code would look like:

Text here

Couple of things  to remember when using the ‘frame’ attribute –

1. The border size designation must be before  the frame attribute – in the case of our sample, border=”1″

2. If you plan to assign a color to the border, you would use bordercolor=”#hexadecimal color here”.   This too must be before the frame attribute. The default color for borders is a grey.

The same border code above but  for red borders this time would look like:

Text here

Conclusion

Using the information above will allow you to control not only where the external borders for a table display but also control the color and width size of the border.

It is also possible to set values for the internal borders for a table with multiple rows and cells. We’ll cover how to do that  in our next post.  See you then!


Comments are closed.