How to Style a Table with CSS

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

1. 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.
2. 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;
   }
3. 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

4. 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.
5. 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.
6. 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

7. 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.
8. 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;
   }
9. 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.