Web Development

Style table borders with CSS

Web developer Tony Patton examines how to use CSS to style the borders of HTML tables. He also offers examples that show how the CSS border property can specify the size of the border along with its color and type.

In my previous Web Development column, I examined the many facets of working with HTML tables. While it is no longer vogue to layout a Web page with tables, you may still use tables to display tabular data. There are numerous ways to style and present a table. In this column, I examine using CSS to style the borders of HTML tables.

The link

The CSS2 table model is based on the HTML 4.01 table model. That is, a table consists of an optional caption along with any number of rows of cells. The table model has the following elements: tables, captions, rows, row groups, columns, column groups, and cells. This article will focus on the borders of individual elements within a table and the table itself.

Borders

Depending on the table and requirements, you may use borders on a table and its cells. You can define borders for the entire table as well as individual cells. The CSS border property can specify the size of the border along with its color and type. The following snippet defines a five pixel solid black border around the table:

TABLE { 5px solid black; }

In addition, you may use the same syntax to assign borders to individual table cells. Also, you can define a border type with the following list of possible values:

  • none: This specifies no border, so it has a border-width of 0.
  • dotted: The border is a series of dots.
  • dashed: The border is a series of short line segments.
  • solid: The border is a single line segment.
  • Double: The border is two solid lines.
  • Groove: The border looks as though it were carved into the canvas.
  • ridge: This is the opposite of Groove. The border looks like it is coming out of the canvas.
  • inset: The border makes it look like it is embedded in the canvas.
  • outset: The opposite of inset. The border looks like it is coming out of the canvas.

Each border type can be assigned a color. Also, the borders are drawn on top of the element's background. Listing A uses the border property to style the entire table as well as its caption and individual cells.

Weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.
Automatically sign up today!

This example provides a sample of the many border options available. You can use your preferred measurement (pixels, point, em as well as thin, medium, and thick) when setting the size of the border, and you can use hexadecimal values or color names to assign border colors. The following syntax is used in the example when defining a border:

border: 5px solid red;

This syntax combines the width, style, and color properties into one declaration, but you can easily separate them into individual property declarations as the following snippet demonstrates:

border-width: 5px;
border-style: solid;
border-color: red;

In addition to defining the entire border for a table or a portion of it, you may split the border into its four sides and establish these separately. This includes top, bottom, left, and right. Listing B alters the previous example to specify the four border options for the entire table as well as the top portion of the caption's border.

You may notice that the entire border of the CAPTION element is defined as a blue five point ridge style, but the top portion of the CAPTION border is set to 10 point. Individual portions of the border (left, right, top, bottom) will override entire border settings when the specific settings come last.

One thing you may notice in the previous examples is the border-collapse and border-spacing properties assigned to the TABLE element. This lets you specify how multiple borders within a table (caption, body, header, individual cells, and so forth) work together.

Spacing

The border-spacing property allows you to specify the distance that separates adjacent cell borders. You may specify one or two values. If one is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. These values may not be negative. I use a 10 point spacing in my examples.

Behavior

Basically, the border-collapse property sets the border model of a table. The default value for this property is the collapsing borders model with the separated borders model as the other option. The separated borders model uses the border-spacing property as the distance between the different borders (separate) defined within the table. This space is filled with the background of the table element.

The collapsing borders model is not as straightforward. In this model, borders collapse on top of each other so in the end the table is smaller than its separated borders counterpart. The World Wide Web Consortium defines the following rules to determine which border style wins in case of a conflict:

  • Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
  • Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (note that 'none' is the default value for the border style).
  • If none of the styles are 'hidden' and at least one of them is not 'none,' then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' than styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.
  • If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group, and table.

On the border

Tables, like all HTML elements, have a wealth of styling options via CSS. The border of the table and its cells are a good example, as CSS allows you to present a table to fit almost any need. A caveat with using CSS is that it may behave differently in different browsers, so extensive testing is necessary.

Are you a CSS fan or do you stick with styling tables via its HTML options? Share your thoughts and experience with the community by posting to the article discussion.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

12 comments
Stevo
Stevo

I used css and table borders to create a depiction of how DNA is carried through a family line or genetic tree. http://www.sturgood.com/dna/trace_demo.html perhaps crude but very effective, and it does validate and of course this is tabular data so tables should be used With links in the appropriate cells can be a very effective way to depict complex arrangements

thumbknuckle
thumbknuckle

Don't know if anyone else does this, but for what it's worth, I create two CSS classes called 'tl' (top left) and 'br' (bottom right). I use these classes to keep border thickness even, often by assigning 'tl' to each row, and 'br' to each cell. (I also, from time to time, assign both classes to the table element).

per
per

I felt I was back in the old days reading this. I don't see any point in writing such an article in 2007.

TechExec2
TechExec2

. table { border-collapse: collapse; } td { border: 1px #000000 solid; }

onbliss
onbliss

..and others's too. It would be nice if TR adds a category to the articles. Something like Beginner, Intermediate and Advanced.

TechExec2
TechExec2

So, you think there are no new programmers anymore? Or, if there are any, they should search for an old article from the 1990s in order to learn about things that were invented back then but are still in widespread use today? Is that your point?

rpitera
rpitera

Not to mention OLD programmers who are loathe to change their techniques because they find it to difficult to relearn, or those of us who are making the conversion and can use a bit of help...etc.

TechExec2
TechExec2

. I'm not sure what you're getting at with this post. If all someone knows how to do is write some simple static HTML and nothing else, then maybe that person is not a programmer. But, s/he is not not much of a web developer either. Building websites requires programmers and programming skills. HTML and CSS coding skills are part of the skills required of a website [u]programmer[/u]. You don't have to be able to write recursive functions and privileged operating system level code and device drivers to be a programmer. Right? Just a rhetorical comment by you?

onbliss
onbliss

...people who write HTML and CSS are not programmers?

Editor's Picks