CSS - Styling Tables

Previous
Quiz
Next

Styling tables in a webpage involves using CSS properties to customize the appearance of tables. CSS properties such as border-collapse, border-spacing, and caption-side can be applied to tables to control the borders, spacing, and alignment of the table and its cells.

This chapter discusses how to set different properties of an HTML table using CSS.

CSS Table Border Styling

To style table borders, we use CSS properties like border and border-radius. You can set the border's width, color, and style with border property on the table, rows, or individual cells.

  • border: CSS border property sets the width, style, and color of all four sides of the table border (e.g., border: 1px solid black;).
  • border-radius: CSS border-radius property rounds the corners of the table border (e.g., border-radius: 5px|50%).

Example

In this example, we have set the rounded table border using CSS border and border-radius property.

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-radius: 10px;
            border: 2px solid #031926;
            width: 100%;
        }
        td {
            border: 1px solid black;
            height: 50px;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>

<body>
    <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 Table Border Collapse

To merge the cell borders of the table or keep the cell borders separated, the border-collapse property is used. To merge the cell borders, collapse value is used while separate value keeps the border distinct.

Example

In the following example, we have used border-collapse property with collapse and separate values.

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border: 3px solid purple;
        }
        th, td {
            border: 1px solid black;
            padding: 6px;
        }
    </style>
</head>

<body>
    <h2> border-collapse: separate </h2>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <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>
    </table>

    <h2> border-collapse: collapse </h2>
    <table style="border-collapse: collapse;">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>

    <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>
</table>
</body>
</html>

CSS Table Border Spacing

To set the distance separating adjacent cell borders in a table, the border-spacing property is used. This property may be specified as either one or two values.

  • border-spacing: 2px: It applies 2px spacing to both vertical and horizontal borders.
  • border-spacing: 1cm 2em: In this case, 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).

Example

In this example, we have set the border-spacing property to 1em horizontally and 0.5em vertically.

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-collapse: separate;
            border-spacing: 1em 0.5em;
            border: 3px solid;
        }
        td {
            width: 1.5em;
            height: 1.5em;
            border: 1px solid black;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <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>
    </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.

CSS Tables Caption Side

To control the placement of the table caption, the caption-side property is used.

Example

In this example, we have used the caption-side property to place the table caption at the top and bottom of the table in the first and second table respectively.

<!DOCTYPE html>
<html>

<head>
    <style>
        .top caption {
            caption-side: top;
        }
        .bottom caption {
            caption-side: bottom;
        }
        table {
            border: 1px solid red;
        }
        td {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <table class="top">
        <caption>
            Caption ABOVE the table
        </caption>
        
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
    <br />

    <table class="bottom">
        <caption>
            Caption BELOW the table
        </caption>

        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
</body>
</html>

CSS Tables Empty Cells

To render the empty cells of the table, the empty-cells property is used. The empty-cell property is applied only to tables and table cells. It has the following two values:

  • show: It is the default value that indicates that empty cells should be shown with borders and spacing as if they contained content.
  • 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.

Example

In this example, we have used the empty-cells property with show and hide value to show and hide the empty cells respectively.

<!DOCTYPE html>
<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>
    <h2> Empty Cells: Show </h2>    
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> </td>
        </tr>
    </table>

    <h2> Empty Cells: Hide </h2>    
    <table style="empty-cells: hide;">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td> Data 1</td>
        <td> Data 2</td>
        <td> </td>
    </tr>
</table>
</body>
</html>

CSS Table Layout

CSS table-layout property is used to control how a browser should render a table. It defines the algorithm used to lay out table cells, rows, and columns. It has the following property values:

  • auto: It is the default value where the browser calculates the width of columns and cells based on the content.
  • fixed: It sets a fixed column width based on the specified table or column width. If width isn't specified, then the first row is used to determine column width and the rest of the rows follow the same column widths irrespective of the content.

Example

In this example, the table-layout property is used with auto and fixed values.

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>Table with fixed layout</h2>
    <table style="table-layout: fixed; ">
        <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>

    <h2>Table with auto layout</h2>
    <table style="table-layout: auto; ">
        <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>

Note: The fixed table layout is faster than auto, as the fixed value does not depend on the table's content but rather on the table's width.

CSS Table Contents Alignment

To align the content of table cells, CSS properties such as text-align and vertical-align properties are used.

  • text-align: It sets the horizontal alignment of the text content within table cells. It can have values like left, right, center, and justify.
  • CSS vertical-align: It sets the vertical alignment of the content within table cells. It can have values like top, bottom, and middle.

Example

In this example, we have used the text-align and vertical-align properties to align the text content horizontally and vertically.

<!DOCTYPE html>
<html>
<head>
    <style>
        table, td, th {
            border: 2px solid black;
        }
        table {
            border-collapse: collapse;
        }
        td {
            width: 100px;
            height: 70px;
        }
    </style>
</head>

<body>
    <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 style="text-align: center;">Data Center</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td style="vertical-align: bottom">Data Bottom</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td style="vertical-align: top">Data Top</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>
    </table>

    </body>
</html>

Note: The default horizontal alignment of <th> and <td> is center and left respectively. The default vertical alignment of both <th> and <td> is middle.

CSS Tables Background color

To set the background color of the cell, row, or entire table, the CSS background-color property is used.

Syntax

The syntax for setting the background color of the cell, row, and table is as follows:

/* To set the background color of table */
table {
    background-color: #f2f2f2;
}

/* To set the background color of a cell a row */
td {
    background-color: #f2f2f2;
}

/* To set the background color of a row */
tr {
     background-color: #ffffff;
}

Example

In this example, we have set the background color of the table using the element selector. To set the background color of the row and a cell, we have used inline CSS.

<!DOCTYPE html>
<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 style="background-color: #f0f0ff;"> 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 style="background-color: #04af2f;">
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>
   </table>
</body>
</html>

CSS Table Text Font Styles

To style the text content of the table, we can use CSS font properties such as font-size, font-family, font-weight, etc. on the table elements.

Example

In this example, we have set the font-size and font-family of the th and td tags.

<!DOCTYPE html>
<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 Table Dividers

Dividers in a table are used to separate the content of the table and make it more readable. To set a vertical divider, the border-right property is used whereas border-bottom property is used to set a horizontal divider.

Example

In this example, we have set the vertical divider using the border-right property and the horizontal divider using the border-bottom property.

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border: 2px solid black;
            background-color: rgb(200, 240, 210);
            border-collapse: collapse;
            width: 100%;
        }

        th {
            border-bottom: 2px solid black;
            padding: 5px;
        }

        td {
            border-bottom: 1px solid grey;
            padding: 5px;
            text-align: center;
        }

        .vDiv {
            border-right: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>Horizontal Divider</h2>
    <table>
        <tr>
            <th class="vDiv">Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td class="vDiv"> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>

        <tr>
            <td class="vDiv"> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>

        <tr>
            <td class="vDiv"> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
</body>

</html>

CSS Striped Table

A striped table is a table that has alternating background colors for rows, making it easier to read and understand the data. To create a striped table, the nth-child selector is used to apply different background colors to odd and even rows.

Example

In this example, we have used the nth-child selector to set the green and light green background color of the cells creating a striped table. 

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
            color: white;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(odd) {
            background-color: rgba(4, 175, 47, 1);
        }
        tr:nth-child(even) {
            background-color: rgba(4, 175, 47, 0.4);
        }
    </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 Responsive Table

A responsive table refers to a table that adjusts and adapts its layout and formatting based on different screen sizes and resolutions. You can use the overflow-x property to add a horizontal scroll bar to the table in small screen sizes when the entire screen is not seen.

Example

In this example, we have used overflow-x property to add a horizontal scroll to adjust to smaller screens.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, 
          initial-scale=1.0">
    <style>
        .responsive-table {
            width: 100%;
            border-collapse: collapse;
            overflow-x: auto;
            display: block;
        }

        .responsive-table th, .responsive-table td {
            text-align: left;
            padding: 8px;
            border: 1px solid #ddd;
        }

        .responsive-table th {
            background-color: #f2f2f2;
        }

        .responsive-table tr:nth-child(odd) {
            background-color: #f9f9f9;
        }
    </style>
</head>

<body>
    <h2>Responsive Table</h2>
    <table class="responsive-table">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>

            <tr>
                <td>Data 5</td>
                <td>Data 6</td>
                <td>Data 7</td>
                <td>Data 8</td>
            </tr>

            <tr>
                <td>Data 9</td>
                <td>Data 10</td>
                <td>Data 11</td>
                <td>Data 12</td>
            </tr>
        </tbody>
    </table>
</body>

</html>
Print Page
Previous
Next
Advertisements