CSS Table Styling
Jakob Jenkov |
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:
startendleftrightcenterjustify
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:
topmiddlebottom
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:
separatecollapse
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.
| Tweet | |
Jakob Jenkov | |
