How to Style a Table with CSS

By Virginia DeBolt

Borders, captions, alignment and other elements of a table are styled with CSS. Borders, captions, alignment and other elements of a table are styled with CSS.

Rate: (5 Ratings)

Use CSS to make your data table attractive and easy to understand.

Instructions

Difficulty: Moderate

Things You’ll Need:

  • A basic knowledge of HTML and CSS
  • A web page with a table in need of some styling
  • Nothing new is needed in this section
  • Nothing new is needed in this section

CSS for Borders

Step1
Create the table in your usual way. If your table uses columns to organize the data, use the HTML element th to create column headers. If your table uses rows to organize the data, use the HTML th element to create row headers.
Step2
Creating borders in CSS requires two rules in your CSS. With the first rule, you set a border for the outside of the table. You also set the border-collapse rule, so that you'll only have one border line between the table cells. (If you want double borders between the table cells, do not set the border-collapse property to collapse.) Here's an example rule:

table {
border-width: 1px;
border-style: solid;
border-color: #000000;
border-collapse: collapse;
}
Step3
Two CSS rules combine to create these borders. Next, you add a border to the table header (th) and table data (td) cells in the table. If you used border-collapse: collapse on your table rule, there will be a single border line between cells. Here's an example rule:

th, td {
border-width: 1px;
border-style: solid;
border-color: #000000;
}

Note that the grouped selector th, td creates the same CSS rule for both the th and td elements.

CSS for Captions and Headers

Step1
The caption is now larger, in bold, and has a bit of padding beneath it. If your table has a caption, you can use CSS to style it. The table shown in the image in Section 1, Step 3 does have a caption. Here is a simple example of a style rule for it.

caption {
font-size: 1.4em;
font-weight: bold;
padding-bottom: 4px;
}

Compare the effect of this rule with the appearance show in Section 1, Step 3.
Step2
You can position the caption at either the top or bottom of the table using a caption-side: top or a caption-side: bottom declaration in the caption rule.
Step3
The styled th element is shown. The th element is bold and centered (if it's in a column) by default. If you want to change its appearance in any way, you can write a rule for the th selector. This rule, for example, changes the color, the font-variant and the letter-spacing.

th {
font-variant: small-caps;
color: #666666;
letter-spacing: 0.2em;
}

CSS for Cell Alignment

Step1
The default vertical-align value is middle. The default value for the vertical alignment of text in table cells is middle. To show this, a bit more text was added to the example table.
Step2
The vertical-align property using the value top. You may choose vertical-align: top or vertical-align: bottom. Here's an example:

td {
vertical-align: top;
}
Step3
The data cell contents are centered horizontally. To align text horizontally in the table cells, either left, right, or center, use the text-align property. Since the default value is left, the example rule will change the value to center.

td {
vertical-align: top;
text-align: center;
}

Tips & Warnings

  • The rule for table can include other properties such as width, background, padding, font-size and other CSS properties.
  • Other properties can be used when styling the th element, for example width, background color and text-align.

Resources

Post a Comment

POST A COMMENT

Request a New How-To Article

Looking for more How To information? Chances are there’s an eHow member who knows how to do what you’re looking to do. Submit an article request now!

eHow Article: How to Style a Table with CSS

eHow Expert: Virginia DeBolt

Virginia DeBolt

Expert: Internet

Profession: http://www.vdebolt.com

Location: USA

Related Ads

Internet

Veesites
Meet Virginia DeBolt eHow’s Internet Expert.