Categories


HTML: Internal Table Borders

In our last post, we covered designating external table borders, as well as how to set the cellpadding and cellspacing. In this post, we will cover how to control the displaying of the internal borders or rules as they are called.

You’ll remember that if you designate a border for your table, it will display between each cell and around the table itself. I might add that using a table border is also a good way to ‘troubleshoot’  table code if you are having a problem with the table not displaying correctly or being out of alignment.

For the first three (3)  samples, we will assume we want the table  to have an external border.   To make it easier to see the table border and rules, we’ll be using a cellpadding of “10 pixels”.  And, all actual HTML code is shown in blue.

Basic Table – Internal Borders

Before we begin, let’s start with some basic HTML code for our sample table that will have a border of 1 pixel, two (2) rows and three (3) columns. That code would look like:

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3
Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

Choosing Internal Borders

To select which internal rules to display, you would type after the required “border” attribute (in this case: border=”1″) rules=area where area is one of the following with the value to use being shown in italics:

No internal rules – none

For horizontal rules between each row in the table – rows

For vertical rules between each column in the table – cols

For rules between each row and column in the table – all

Note:   There is another tag that will display horizontal rules between table groups. We will not be covering how to use this internal border here but we will cover it in a later post.

HTML code for a table with horizontal rules between each row would look like:

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3
Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

HTML code for a table with vertical rules between each column in the table would look like:

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3
Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

In both examples, you’ll note that the table still has the complete external border (box). However, should we want to remove the external border completely, the HTML code for the above two sample tables would look like:

HTML code for a table with horizontal rules between each row – no external border – would look like:

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3
Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

HTML code for a table with vertical rules between each column – no external border – would look like:

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3
Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

Conclusion:

The use of borders and rules offers a lot of flexibility; however, for those that may be wondering why should I bother to use – or why do I even need – the ‘all‘ value if I’m going to use a border anyway . . . “after all, won’t all the internal rules display?” Yes, this is true, if you are going to have and want an external border. But, if you don’t want an external border, but you do want  internal rules – you’ll need to use the ‘all‘ value to accomplish that.

Just remember, in order for the “rules” tag to work – just like the “frame” tag for external borders – you must use a “border” tag in the table code, and both  attributes  –   frame= and rules=  –   must follow the “border” attribute tag.


Comments are closed.