CSS Table Styling

Jakob Jenkov
Last update: 2014-08-11

CSS contains a set of CSS properties which can help you style HTML tables. CSS enables you to manipulate the margin, borders, padding on table cells, alignment of text, background images and more. This text will explain all these CSS properties.

Width and Height

You can set the width and height of a table using the width and height CSS properties as described in my tutorial about the CSS box model.

You can also set the width and height of individual table cells (td and th elements).

Margins

You can set margins on an HTML table just like with a div, p, or other element. Margins are covered in my tutorial about CSS margins.

Borders

You can set borders on an HTML table just like on other HTML elements. Borders are covered in my tutorial about borders in CSS.

You can set borders both for the whole table element, or you can set borders for the table cells (th and td elements). You can also set the top, right, bottom and left borders both for the whole table and for individual table cells.

Padding on Table Cells

You cannot set a padding directly on an HTML table, but you can set padding on the table cells. That means that you can set the padding on th and td elements.

You can set the padding separately for individual table cells, and you can also set top, right, bottom and left padding for cells individually.

Setting padding via CSS is covered in my text about padding in CSS.

text-align

The text-align CSS property enables you to set how the text inside table cells should be aligned. The text-align property can be applied to the table as a whole (the table element), or to individual table cells (td and th elements).

The text-align property can take the following values:

  • start
  • end
  • left
  • right
  • center
  • justify

The start value is the same as left if the browser's rendering mode is in left-to-right mode. If the rendering mode is right-to-left, then start is the same as right.

The end value is the same as right if the browser's rendering mode is in left-to-right. If the rendering mode is right-to-left, then end is the same as left.

The left value aligns the text towards the left edge of the table cell.

The right value aligns the text towards the right edge of the table cell.

The center value centers the text in the table cell.

The justify value increases spacing between the characters and words until both the left and right edges of the text are aligned with the left and right edge of the table cell.

Here is a table that shows you how all these values affect text alignment inside the table cells:

start
end
left
right
center
justify this text. justify this text. justify this text. justify this text. justify this text. justify this text. justify this text. justify this text.

vertical-align

The vertical-align CSS property enables you to specify how text is aligned vertically inside the table cells. You can either set the vertical-align CSS property for the whole table, or for the table cells individually.

The vertical-align CSS property can accept the following values:

  • top
  • middle
  • bottom

Actually, the vertical-align CSS property can take more values than these, but these are the most commonly used with tables. The vertical-align CSS property can also be used with other HTML elements than tables.

Here is an HTML table that illustrates the effect of the vertical-align values:

top
middle
bottom

background-image

The background-image CSS property can be used to set a background image for the table. Setting background images for HTML elements is covered in more detail in my text about CSS background images.

border-spacing

When you set borders on table cells, normally the table cells have a little space in between them. This is what you can control using the table element's cellspacing attribute. You can also control this space using the CSS property border-spacing.

Here are two border-spacing examples:

table.noSpace {
    border-spacing : 0px;
    border : 1px solid #cccccc;
}
table.noSpace td {
    border : 1px solid #cccccc;
}


table.withSpace {
    border-spacing : 10px;
    border : 1px solid #cccccc;
}
table.withSpace td {
    border : 1px solid #cccccc;
}

Here is how the two tables would look if rendered with the above border-spacing plus a a border on the table and the table cells:

cell 1.1 cell 1.2
cell 2.1 cell 2.2
cell 3.1 cell 3.2
cell 1.1 cell 1.2
cell 2.1 cell 2.2
cell 3.1 cell 3.2

Notice the different spacing between the table cells.

border-collapse

If you look at the two tables shown in the previous section (about border-spacing) you will notice that there are 2 borders between table cells. One border around each table cell means that there will be 2 borders between table cells. The border-collapse property can control whether to draw one or two borders between table cells.

The border-collapse CSS property can take the following values:

  • separate
  • collapse

The separate value is the default value. This value means that the borders on table cells should be drawn as if the table cells were separate HTML elements.

The collapse value means that the borders between table cells should be collapsed. Thus, only one border will be drawn even if all table cells have borders. Here are two border-collapse examples:

table.withSpace {
    border-spacing  : 10px;
    border          : 1px solid #cccccc;
    border-collapse : separate
}
table.withSpace td {
    border          : 1px solid #cccccc;
}

     
table.withSpace {
    border-spacing  : 10px;
    border          : 1px solid #cccccc;
    border-collapse : separate
}
table.withSpace td {
    border          : 1px solid #cccccc;
}

Here is what the two tables look like when rendered with the above CSS styles applied:

cell 1.1 cell 1.2
cell 2.1 cell 2.2
cell 3.1 cell 3.2
cell 1.1 cell 1.2
cell 2.1 cell 2.2
cell 3.1 cell 3.2

Notice how the second table with border-collapse: collapse never has more than one border between table cells, or between any table cell and the edge of the table.

Jakob Jenkov

Featured Videos

Java Generics

Java ForkJoinPool

P2P Networks Introduction



















Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next