oursolutionarchitectoursolutionarchitect
  • Selected Reading
  • Q&A

CSS - Tables


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.

Styling Tables using CSS

Following is a simple HTML table which has been styled using CSS :

<html>
<head>
<style>
   table {
     font-family: Arial, Helvetica, sans-serif;
     border-collapse: collapse; width: 100%;
   }
   td, th {
     border: 1px solid #ddd; padding: 8px;
   }
   tr:nth-child(even){background-color: #f2f2f2;}
   tr:hover {background-color: #ddd;}
   th {
     padding-top: 12px; padding-bottom: 12px;
     text-align: left; background-color: #40a944; color: white;
   }
</style>
</head>
<body>
   <h1>CSS Styled Table</h1>
   <table>
     <tr>
       <th>Name</th>
       <th>Address</th>
       <th>Country</th>
     </tr>
     <tr>
       <td>Nuha Ali</td>
       <td>My Home Bhooja</td>
       <td>India</td>
     </tr>
     <tr>
       <td>Zara Ali</td>
       <td>Students Roosters</td>
       <td>England</td>
     </tr>
     <tr>
       <td>Mahira</td>
       <td>Orland Park</td>
       <td>Chicago</td>
     </tr>

   </table>
</body>
</html>

CSS Properties of a Table

You can set the 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.

Collapse Table Border using CSS

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

Example

The following example shows how we can use border-collapse property to merge the borders to remove the spacing between the table cells.

<html>
<head>
<style>
   table {
      border-collapse: collapse;
      border: 3px solid;
      width: 100%; padding:5px;
   }
   th, td {
      border: 1px solid black;
   }
</style>
<body>
   <table>
     <tr>
       <th>Name</th>
       <th>Address</th>
       <th>Country</th>
     </tr>
     <tr>
       <td>Nuha Ali</td>
       <td>My Home Bhooja</td>
       <td>India</td>
     </tr>
     <tr>
       <td>Zara Ali</td>
       <td>Students Roosters</td>
       <td>England</td>
     </tr>
     <tr>
       <td>Mahira</td>
       <td>Orland Park</td>
       <td>Chicago</td>
     </tr>
   </table>
</body>
</html>

Setting Table 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).

Example

Now let's modify the previous example and see the difference −

<html>
<head>
<style>
   table {
      border-collapse: separate; border-spacing: 1em; width: 100%;
      padding: 5px; border: 3px solid #40a944;
   }
   td {
      width: 1.5em; height: 1.5em; background: #d2d2d2;
      text-align: center; vertical-align: middle;
   }
</style>
<body>
   <table>
     <tr>
       <th>Name</th>
       <th>Address</th>
       <th>Country</th>
     </tr>
     <tr>
       <td>Nuha Ali</td>
       <td>My Home Bhooja</td>
       <td>India</td>
     </tr>
     <tr>
       <td>Zara Ali</td>
       <td>Students Roosters</td>
       <td>England</td>
     </tr>
     <tr>
       <td>Mahira</td>
       <td>Orland Park</td>
       <td>Chicago</td>
     </tr>
   </table>
</body>
</html>

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.

Setting Table Caption using CSS

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.

Example

Let us see an example:

<html>
<head>
<style>
   table {
      border-collapse: separate; border-spacing: 1em; width: 100%;
      padding: 5px; border: 3px solid #40a944;
   }
   .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>

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.

Hide Empty Cells in a Table

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.

Example

Here is the empty-cells property used to hide borders of empty cells in the <table> element.

<html>
<head>
<style>
   table {
      width: 100%;
      border:1px solid #aaa;
      border-collapse: separate;
      empty-cells: hide;
   }
   td,th {
      padding: 5px;
      border: 1px solid #aaa;
   }
</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: 100%;
      border:1px solid #aaa;
      border-collapse: separate;
      empty-cells: show;
   }
   td,th {
      padding: 5px;
      border: 1px solid #aaa;
   }
</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>

Setting Table Layout using CSS

The table-layout property helps 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.

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.

Example

The following example shows the use of table-layout: fixed:

<html>
<head>
<style>
   table {
      width: 100%;
      border:1px solid #aaa;
      border-collapse: collapse;
      table-layout: fixed;
   }

   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>

The following example shows the use of table-layout: auto:

<html>
<head>
<style>
   table {
      width: 100%;
      border:1px solid #aaa;
      border-collapse: collapse;
      table-layout: auto;
   }
   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>

Setting Table Height and Width

CSS provides height and width properties to set a table height and width respectively.

Example

<html>
<head>
<style>
   table {
      width: 600px; 
      height: 200px;
      border-collapse: collapse;
      border: 1px solid #aaa;
   }

   th, td {
      border: 1px solid #aaa;
   }
</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>Data 3</td>
         </tr>
        <tr>
           <td>Data 1</td>
           <td>Data 2</td>
           <td>Data 3</td>
        </tr>
     </tbody>
   </table>
</body>
</html>

Setting Table Text Align

The text-align property sets the horizontal alignment of the text content within table cells (<th> or <td>). It can take following values:

  • left

  • right

  • center

  • justify

The content of <th> element is center-aligned and that of <td> element is left-aligned, by default.

Example

Let us see an example of text-align: center:

<html>
<head>
<style>
table, td, th {
   border: 1px solid black;
}
table {
   border-collapse: collapse;
   width: 100%;
}
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.

Setting Table Vertical Align

The property vertical-align sets the vertical alignment of content in <th> or <td>.

It can take following values:

  • top

  • middle

  • bottom

The vertical alignment of content of <th> and <td> elements is middle, by default.

Example

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: 100%;
   }
   td {
      height: 50px;
      vertical-align: middle;
   }
</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 Table 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:

table {
  background-color: #f2f2f2;
}
td {
  background-color: #f2f2f2;
}
tr {
  background-color: #ffffff;
}

Example

Let us see an example:

<html>
<head>
<style>
   table {
      background-color: rgb(237, 181, 237);
      border: 2px solid black;
      border-collapse: collapse;
      width: 100%;
   }
   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 Table 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.

Example

Let us see following example:

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

Example

Let us see few examples:

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

Example

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>

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.

Example

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>

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.

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.

Example

Let us see an example. You can 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 of a table caption.
empty-cells With separate borders, hides empty cells in a table.
table-layout Determines the table-rendering algorithm.