A table is an HTML element used to display data in a structured format with rows and columns. It is created using the <table> tag in HTML and can be styled using CSS properties.
This chapter discusses how to set different properties of an HTML table using CSS.
Let us see an example below which demonstrates a simple HTML table :
<html><head><style>
</style><table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table></body></html>The table in the above example is a simple display of data and can be styled using CSS. You can set following CSS properties of a table −
- The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.
- The border-spacing specifies the width that should appear between table cells.
- The caption-side specifies where the table caption should be displayed (top or bottom).
- The empty-cells specifies whether the border should be shown if a cell is empty.
- The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.
- The width and height properties set the height and width of a table.
- The text-align property sets the horizontal alignment of the text content within table cells.
- The border property can be used to set border to table and its cells.
- The background-color property can be applied to the table itself, the table cells, or table rows.
- The font-size, font-family, font-weight, font-coloretc style the table font.
Let us see how to use these properties with examples in the following sections.
CSS Tables – Border Collapse
The property border-collapse ensures that borders between table cells collapse into a single border, creating a cleaner look. Property border-collapse can have values collapse or separate (default).
The following example only adds border to cells and body of table −
<html><head><style>
table {
border: 3px solid purple;
}
th, td {
border: 1px solid black;
}
</style><body><table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table></body></html>Now let us add border-collapse:collapse and see how this removes the spacing between the table cells and causes the borders to overlap.
<html><head><style>
table {
border-collapse: collapse;
border: 3px solid purple;
}
th, td {
border: 1px solid black;
}
</style><body><table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table></body></html>CSS Tables – Border Spacing
The border-spacing property specifies the distance that separates adjacent cells’ borders in a table. This property may be specified as either one or two values.:
- border-spacing: 2px;: If one value is passed, the spacing is applied to both vertical and horizontal borders.
- border-spacing: 1cm 2em;: If two values are passed, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).
Now let’s modify the previous example and see the effect −
<html><head><style>
table {
border-collapse: separate;
border-spacing: 1em 0.5em;
padding: 0 2em 1em 0;
border: 3px solid purple;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
</style><body><table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table></body></html>Note: The border-spacing property only works when border-collapse is set to separate. If you set border-collapse to collapse, the border-spacing property will have no effect, and the borders will collapse into a single line.
Here is an example to demonstrate the above point:
<html><head><style>
table {
border-collapse: collapse;
border-spacing: 1em 0.5em;
padding: 0 2em 1em 0;
border: 3px solid purple;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
</style><body><table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table></body></html>CSS Tables – Caption Side
The caption-side property in CSS is used to control the placement or alignment of the table caption in relation to the table.
The caption-side property can have one of following values:
- top: The caption placed above the table.
- bottom: The caption placed below the table.
- block-start: The caption box is positioned at the block start edge of the table.
- block-end: The caption box sis positioned at the block end edge of the table.
- inline-start: The caption box is positioned at the inline start edge of the table.
- inline-end: The caption box is positioned at the inline end edge of the table.
- inherit: The value is inherited from the caption-side property of the parent element.
Let us see an example:
<html><head><style>
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
</style><body><table class="top"><caption>
Caption ABOVE the table
</caption><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table><br /><table class="bottom"><caption>
Caption BELOW the table
</caption><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table></body></html>Note: The caption-side property only applies to tables that have a <caption> element within them. The <caption> element is used to provide a title or description for the table. If the table does not have a caption, the caption-side property won’t have any effect.
CSS Tables – Empty Cells
The empty-cells property in CSS is used to control the rendering of cells in a table that have no content or are otherwise considered “empty.” It only applies to tables and table cells.
This property can have one of the two values:
- show: It indicates that empty cells should be shown with borders and spacing as if they contained content. It is the default value.
- hide: It indicates that empty cells should be hidden and not take up any space. Borders and spacing for empty cells will not be displayed, contributing to a more compact layout.
Here is the empty-cells property used to hide borders of empty cells in the <table> element.
<html><head><style>
table {
width: 350px;
border-collapse: separate;
empty-cells: hide;
}
td,th {
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #999999;
}
</style></head><body><table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td></td></tr></tbody></table></body></html>In the following example the empty-cells:show property is used to show borders of empty cells in the <table> element.
<html><head><style>
table {
width: 350px;
border-collapse: separate;
empty-cells: show;
}
td,th {
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #999999;
}
</style></head><body><table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td></td></tr></tbody></table></body></html>CSS Tables – Table Layout
The table-layout property is supposed to help you control how a browser should render or lay out a table.
This property can have one of the following values:
- auto: When table-layout is set to auto, the browser will calculate the width of columns and cells based on their content.
- fixed: When table-layout is set to fixed, the browser will allocate a fixed width to each column based on the first row of the table. This means that all subsequent rows will adhere to the same column widths, regardless of their content.
Note: Using table-layout: fixed can be beneficial when you want to create tables with consistent column widths, especially when dealing with large amounts of data or when you want to maintain a specific design.
CSS Table – with fixed Layout
The following example shows the use of table-layout: fixed:
<html><head><style>
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* Using fixed layout */
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style></head><body><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td><td>Row 1, Column 3</td></tr><tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td><td>Row 2, Column 3</td></tr></table></body></html>CSS Table – with auto Layout
The following example shows the use of table-layout: auto:
<html><head><style>
table {
width: 100%;
border-collapse: collapse;
table-layout: auto; /* Using auto layout */
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style></head><body><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td>This is some longer content in Column 1</td><td>Short content</td><td>Even longer content that might wrap in Column 3</td></tr><tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td><td>Row 2, Column 3</td></tr></table></body></html>CSS Tables – Height and Width
In order to set the height and width of a table, use these properties:
<html><head><style>
#myTable {
width: 500px; /* Set the width of the table */
height: 300px; /* Set the height of the table */
border-collapse: collapse;
}
#myTable th, #myTable td {
border: 5px solid black;
}
</style></head><body><table id="myTable"><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table></body></html>CSS Tables – Table Alignment
In CSS the various properties that are applied to align them are as follow:
text-align
This property sets the horizontal alignment of the text content within table cells (<th> or <td>). It can take following values:
- left
- right
- center
- justify
Note: The content of <th> element is center-aligned and that of <td> element is left-aligned, by default.
Let us see an example of text-align: center:
<html><head><style>
table, td, th {
border: 2px solid black;
}
table {
border-collapse: collapse;
width: 50%;
}
td {
text-align: center;
}
</style></head><body><h2>Text-align Property</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr></table></body></html>Similarly, to align the text to left or right use the property text-align: left or text-align: right, respectively.
The value text-align: justify ensures that text is aligned both on the left and right sides of each cell, creating a clean and organized appearance.
CSS Tables – vertical-align
The property vertical-align sets the vertical alignment of content in <th> or <td>.
It can take following values:
- top
- middle
- bottom
Note: The vertical alignment of content of <th> and <td> elements is middle, by default.
Let us see an example for setting the vertical-alignment to top:
<html><head><style>
table, td, th {
border: 2px solid black;
}
table {
border-collapse: collapse;
width: 50%;
}
td {
height: 50px;
vertical-align: top;
}
</style></head><body><h2>Vertical-align Property</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr></table></body></html>CSS Tables – Border
In CSS, there are several border properties that can be applied to a table:
- border: This property sets the width, style, and color of all four sides of the table border (e.g., border: 1px solid black;).
- border-collapse: This property sets whether the border should be collapsed into a single border or separated between cells.
- border-width: This property sets the width of the border (e.g., border-width: thin|medium|thick|2px;)
- border-style: This property sets the style of table border (e.g., border-style: dotted|dashed|solid|double;), etc.
- border-color: This property sets the color of table border (e.g., (border-color: red;) or (border-top-color: red;)).
- border-radius: This property rounds the corners of the table border (e.g., border-radius: 5px|50%).
Let us see an example for setting up the border of a table:
<html><head><style>
table {
border-collapse: collapse;
border-radius: 50%;
border-style: inset;
border-color: blue;
width: 100%;
}
td {
border: 2px dashed red;
height: 50px;
vertical-align: middle;
text-align: center;
}
</style></head><body><h2>Border property</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr></table></body></html>CSS Tables – Background color
The background-color property can be applied to the table itself, the table cells, or table rows.
In order to set the background color use the following code:
/* To set the background color of table */
table {
background-color: #f2f2f2;
}
/* To set the background color of a cell or a row */
td {
background-color: #f2f2f2;
}
tr {
background-color: #ffffff;
}
Let us see an example:
<html><head><style>
table {
border: 2px solid black;
background-color: rgb(237, 181, 237);
width: 100%;
border-collapse: collapse;
}
td {
height: 50px;
vertical-align: middle;
text-align: center;
}
</style></head><body><h2>Background color property</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr></table></body></html>CSS Tables – Font styles
The font of the content of a table can be styled using the font-related properties, such as font-size, font-family, font-weight, etc. on the <th> and <td> elements.
<html><head><style>
table.one {
border-collapse: collapse;
width: 400px;
}
th {
font-size: large;
font-family: 'Lucida Sans', sans-serif;
}
td {
font-size: small;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
</style></head><body><h2>font styles</h2><div><table class = "one" border = "1"><th>Heading</th><tr><td>Cell value</td></tr><tr><td>Cell value</td></tr></table></div></body></html>CSS Tables – Other Styles
Various CSS properties are available to style the table design further. For example, you can add padding, margin, dividers, etc. to a table.
Let us see few examples:
CSS Tables – Padding
In order to add padding to the table or its cells, use the property padding. Refer the example below:
<html><head><style>
table {
border: 2px solid black;
background-color: rgb(175, 239, 194);
border-collapse: collapse;
}
td,th {
border: 2px solid black;
padding: 30px;
vertical-align: middle;
height: 50px;
}
</style></head><body><h2>Padding property</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr></table></body></html>CSS Tables – Margin
In order to add the margin of table or its cells, use the property margin. Refer the following example:
<html><head><style>
table {
border: 2px solid black;
background-color: rgba(237, 181, 237);
border-collapse: collapse;
margin-top: 50px;
}
td,th {
border: 2px solid black;
vertical-align: middle;
height: 50px;
}
</style></head><body><h2>Margin property</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr></table></body></html>CSS Tables – Table Dividers (vertical / horizontal)
In order to add vertical or horizontal dividers, you can add the property border-right or border-bottom to the <th> and <th> elements.
Let us see an example:
<html><head><style>
table {
border: 2px solid black;
background-color: rgb(175, 239, 194);
border-collapse: collapse;
margin-top: 50px;
}
th {
border-bottom: 2px solid black;
}
td{
border-right: 2px solid black;
vertical-align: middle;
height: 50px;
}
</style></head><body><h2>horizontal & vertical divider</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr></table></body></html>CSS Tables – Striped Table
In order to make the table look striped, where alternative rows are colored, you can use the nth-child() selector and add a background-color, to all the odds / even rows of the table.
Let us see an example:
<html><head><style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(odd) {background-color: rgb(230,125,111);}
</style></head><body><h2>Striped table</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr></table></body></html>CSS Tables – Responsive Table
Responsive table refers to a table that adjusts and adapts its layout and formatting based on different screen sizes and resolutions. It ensures that the table is easily readable and accessible on various devices.
CSS provides features through which we can make a table responsive. You can use the property overflow-x: auto to add a horizontal scroll bar to the table, when screen in small and entire content is not seen.
Note: You need to add a container element, such as <div>, with the property overflow-x: auto around the <table> element, in order to make the table responsive.
Let us see an example:
Note: Kindly resize your screen to see the responsiveness of the table.
<html><head><style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(odd) {background-color: rgb(230,125,111);}
</style></head><body><h2>Responsive table</h2><div style="overflow-x: auto;"><table><tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td><td>Data 7</td><td>Data 8</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td><td>Data 7</td><td>Data 8</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td><td>Data 7</td><td>Data 8</td></tr><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td><td>Data 7</td><td>Data 8</td></tr></table></div></body></html>CSS Table – Related Properties
Following is the list of CSS properties for styling tables:
| Property | Description |
|---|---|
| border-collapse | Sets the table border rendering algorithm. |
| border-spacing | With separate borders set the spacing between borders. One value sets vertical and horizontal spacing and two values sets horizontal and vertical spacing respectively. |
| caption-side | Sets the position for a table caption. |
| empty-cells | With separate borders, hides empty cells in a table. |
| table-layout | Determines the table-rendering algorithm. |
Leave a Reply