This page illustrates different ways to manage column widths in tables. You can see the HTML by viewing the source for this page and the CSS by clicking on the CSS link.
By default, tables will be formatted to let the width of each column match the text that needs to fit in it. This first table only uses formatting to make the borders visible.
| column 1 | column 2 | column 3 | column 4 |
| dog | the little white dog | the little white dog with the curly tail | the little white dog with the curly tail that always begs when I see him |
Making all of the columns the same width is easy. You simply give a width property on td.
| column 1 | column 2 | column 3 | column 4 |
| dog | the little white dog | the little white dog with the curly tail | the little white dog with the curly tail that always begs when I see him |
This is a bit harder to do. There are three ways to do it:
The following sections show the 3 different approaches. All are acceptable, but the third is preferred. In each case, the column widths are set to 10, 20, 30, and 40 percent.
This is the simplest way to do it, but it violates the separation of using HTML for semantics and CSS for presentation. The COL tags must be the first tags after the TABLE tag. Note that the table uses the same CSS class as the default table.
| column 1 | column 2 | column 3 | column 4 |
| dog | the little white dog | the little white dog with the curly tail | the little white dog with the curly tail that always begs when I see him |
This method uses no CSS capabilities that you do not already know. Its main drawback is that you need to add a class tag on every td tag. This is a reasonable way to manage the widths if you are doing additional formatting on each column that requires you to explicitly name the data elements. In this example, I change the text color as well as setting the width.
| column 1 | column 2 | column 3 | column 4 |
| dog | the little white dog | the little white dog with the curly tail | the little white dog with the curly tail that always begs when I see him |
This is the most elegant solution but it adds a new CSS feature. The + operator in CSS identifies the context in which formatting should be used. Specifically, it identifies adjacent sibling tags (that is, those that are at the same level and next to one another). As you might guess, there are also other operators that allow you to define other relationships such as the parent tag explicitly. As shown here, you can do any formatting that you want with this technique.
| column 1 | column 2 | column 3 | column 4 |
| dog | the little white dog | the little white dog with the curly tail | the little white dog with the curly tail that always begs when I see him |