in

CSS TABLES | Learn How to Structure Tables on Web Pages Using CSS

In this tutorial we will be discussing about CSS tables and how you can structure beautiful tables on your web pages using CSS. In our previous tutorial we discussed about CSS links and how you can style them. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS LINKS | Learn How to Structure Beautiful Links On Web Documents

CSS TABLES

We can set different table properties when styling our web table using CSS. The list of table properties we can structure using CSS include :

  • The table border-collapse
  • The border-spacing
  • The table empty cells
  • The table layout
  • The caption side

The border-collapse

This property is used to inform the web browser whether to control the appearance of the table adjacent border that touches each other or they should retain their style. The values that can be accepted by this property is either “collapse” or “separate”. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style type="text/css">
   .table_one{
      border-collapse: collapse;
      height: 100px;
      width: 300px;
   }
   .table_two{
      border-collapse: separate;
      height: 100px;
      width: 300px;  
   }
   td.one {
      border: 2px dotted; 
   }
   td.two {
      border: 3px solid;
   }
   </style>
   <title>CSS Table border collapse  illustration</title>
</head>
<body >
   <caption> first table collapsed</caption>
   <table class="table_one">
      <tr>
         <td class="one">
            first table first row
         </td>
      </tr>
      <tr>
         <td class="two">
            first table second row
         </td>
      </tr>
   </table>
   <br>
   <caption> second table no collapse</caption>
   <table class="table_two">
      <tr>
         <td class="one">
            second table first row
         </td>
      </tr>
      <tr>
         <td class="two">
            second table second  row
         </td>
      </tr>
   </table>
</body>
</html>

Result

CSS Table border collapse illustration first table collapsed
first table first row
first table second row

second table no collapse
second table first row
second table second row

The table border-spacing

This property specifies the width spacing between cells in the table. But mind you, if we give this table one value for example border-spacing="3px" this will affect the horizontal and vertical section. But if we give this property two values for example border-spacing=”3px 7px” the first value will affect the horizontal and the second value will effect the vertical. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style type="text/css">
   .table_one{
      border-spacing: 5px;
      border-collapse: separate;
      height: 100px;
      width: 300px;
   }
   .table_two{
      border-spacing: 2px 9px;
      border-collapse: separate;
      height: 100px;
      width: 300px;  
   }
   td.one {
      border: 2px dotted; 
   }
   td.two {
      border: 3px solid;
   }
   </style>
   <title>CSS Table border collapse  illustration</title>
</head>
<body >
   <caption> first table no collapse and one border spacing value</caption>
   <table class="table_one">
      <tr>
         <td class="one">
            first table first row
         </td>
      </tr>
      <tr>
         <td class="two">
            first table second row
         </td>
      </tr>
   </table>
   <br>
   <caption> second table no collapse and two border spacing values </caption>
   <table class="table_two">
      <tr>
         <td class="one">
            second table first row
         </td>
      </tr>
      <tr>
         <td class="two">
            second table second  row
         </td>
      </tr>
   </table>
</body>
</html>

Result

CSS Table border collapse illustration first table no collapse and one border spacing value
first table first row
first table second row

second table no collapse and two border spacing values
second table first row
second table second row

The table empty cells

The empty-cell property is used to determine the visibility of the cell border when the cell is empty. we can set the cell border to either show or hide when the cell is empty. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style type="text/css">
   .table_one{
      border-spacing: 5px;
      border-collapse: separate;
      height: 100px;
      width: 300px;
      empty-cells: hide;
   }
   .table_two{
      border-spacing: 2px 9px;
      border-collapse: separate;
      height: 100px;
      width: 300px; 
      empty-cells: show; 
   }
   td.one {
      border: 2px dotted; 
   }
   td.two {
      border: 3px solid;
   }
   </style>
   <title>CSS Table Table Empty Cell illustration </title>
</head>
<body >
   <caption> first table with the first row as empty cell</caption>
   <table class="table_one">
      <tr>
         <td class="one">
           
         </td>
      </tr>
      <tr>
         <td class="two">
            first table second row
         </td>
      </tr>
   </table>
   <br>
   <caption> second table with the first cell as not empty </caption>
   <table class="table_two">
      <tr>
         <td class="one">
            second table first row
         </td>
      </tr>
      <tr>
         <td class="two">
            second table second  row
         </td>
      </tr>
   </table>
</body>
</html>

Result

CSS Table Table Empty Cell illustration first table with the first row as empty cell
first table second row

second table with the first cell as not empty
second table first row
second table second row

The table layout

The table layout property tells the web browser how to render the table page. The values for this property can be fixed, auto or inherit.

<!DOCTYPE html>
<html lang="en">
<head>
   <style type="text/css">
   .table_one{
      table-layout: auto;
      border-spacing: 5px;
      border-collapse: separate;
      height: 100px;
      width: 300px;
      
   }
   .table_two{
      table-layout: fixed;
      border-spacing: 2px 9px;
      border-collapse: separate;
      height: 100px;
      width: 300px; 
      
   }
   td.one {
      border: 2px solid; 
   }
   td.two {
      border: 3px solid;
   }
   </style>
   <title>CSS Table layout Illustration  </title>
</head>
<body >
   <caption> first table with the first row as empty cell</caption>
   <table class="table_one">
      <tr>
         <td class="one">
           first table first row
         </td>
      </tr>
      <tr>
         <td class="two">
            first table second row
         </td>
      </tr>
   </table>
   <br>
   <caption> second table with the first cell as not empty </caption>
   <table class="table_two">
      <tr>
         <td class="one">
            second table first row
         </td>
      </tr>
      <tr>
         <td class="two">
            second table second  row
         </td>
      </tr>
   </table>
</body>
</html>

Result

CSS Table layout Illustration first table with the first row as empty cell
first table first row
first table second row

second table with the first cell as not empty
second table first row
second table second row

The caption side

We use the caption property to add captions to our table. This uses an open and close <caption> tags. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      table{
         border: 2px;
         border-style: solid;
      }
      caption.top{
         caption-side: top;
      }
      caption.bottom{
         caption-side: bottom;
      }
   </style>
   
   <title>The Table caption </title>
</head>
<body>
   <table>
      <caption class='top';> this is the top caption  </caption>
      <tr  >
         <td style="border-style: solid;"> first column           </td>
         <td style="border-style: solid;">   second column         </td>

      </tr>
      <caption class='bottom';> this is the bottom caption  </caption>
      <tr style="border-style: solid;"  >
         <td style="border-style: solid;"> first column           </td>
         <td style="border-style: solid;">   second column         </td>

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

Result

The Table caption
this is the top caption
first column second column
this is the bottom caption
first column second column

conclusion

The table properties listed above are needed when styling your table for a web document. A good understanding of this properties will enable you make good web page table formatting and structure. Lets move on to the next topic on CSS BORDERS

What do you think?

css links

CSS LINKS | Learn How to Structure Beautiful Links On Web Documents

css borders

CSS BORDER | Learn How To Design the Border of Web Pages With CSS