Mastering CSS Table Properties: Customizing Table Layouts

CSS Display Table are used to create the table with the help of display table utility classes. The height of the container will be the same for all the columns when the length of content differs. In this blog, we will discuss CSS Display Table properties.

Property	Description
table	It's rendered as a block table, with a line break before and after the table
table-caption	It's rendered as a table caption (replacement of caption tag)
table-cell	It's rendered as a table cell (replacement of td(table data) tag)
table-column	It's rendered as a column of cells
table-column-group	It's rendered as a group of one or more columns
table-footer-group	It's rendered as a table footer row
table-header-group	It's rendered as a table header row
table-row	It's rendered as a table row (replacement of tr(table row) tag)
table-row-group	It's rendered as a group of one or more rows

border-collapse: Specifies whether the borders of table cells should be collapsed into a single border or separated. Values can be collapse or separate.

table {
  border-collapse: collapse;
}

border-spacing: Sets the spacing between adjacent cell borders when border-collapse is set to separate .

table {
  border-spacing: 7px;
}

caption-side: Specifies the placement of the table caption. Values can be top, bottom, or inherit .

table {
  caption-side: top;
}

table-layout: Controls how the table layout algorithm works. Values can be auto, fixed, or inherit.

table {
  table-layout: fixed;
}

width Sets the width of the table. It can be specified in pixels, percentages, or other valid CSS length units.

table {
  width: 100%;
}

height Sets the height of the table. It can be specified in pixels, percentages, or other valid CSS length units.

table {
  height: 250px;
}

table-cell This property defines the display type of an element as a table cell.

td {
  display: table-cell;
  padding: 7px;
  border: 3px solid #0080ff;
}

In this example, the td selector targets all elements and sets their display type as table-cell. It also applies padding and a border to the table cells.

Basic Table Design in CSS

By combining the HTML structure and CSS styles, you can create a basic table that has headers, rows, and cells with appropriate styling. Feel free to customize the styles further to match your design requirements.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TUTOR JOES</title>
  <style>
    table{
      border-collapse: collapse;
    }
  </style>
</head>
<body>

  <table 
  border="1px" 
  cellpadding="10px"
  cellspacing="10px"
  width="100%"
  >
  <caption>STUDENT DETAILS</caption>
  <colgroup>
    <col>
    <col style="width: 50px;">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>NAME</th>
      <th>AGE</th>
      <th>CITY</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ram</td>
      <td>12</td>
      <td>Namakkal</td>
    </tr>
    <tr>
      <td>Sam</td>
      <td>14</td>
      <td>Chennai</td>
    </tr>
    <tr>
      <td>Joes</td>
      <td>30</td>
      <td rowspan="2">Salem</td>
    <tr>
      <td>Tiya</td>
      <td>11</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Tutor Joes</td>
    </tr>
  </tfoot>
  </table>
</body>
</html>

Output

Live Preview

HTML Tables coloring with CSS

To color HTML tables using CSS, you can apply background colors to different table elements such as table rows, table cells, or specific table headers. Here's how you can achieve this:

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display Table</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="table">
    <div class="caption">
      Tutor Joes Software Solution
    </div>
    <div class="col-group">
      <div class="tbl-col">Col-1</div>
      <div class="tbl-col col-2">Col-2</div>
      <div class="tbl-col">Col-3</div>
    </div>
    <div class="header">
      <div class="col">Name</div>
      <div class="col">Age</div>
      <div class="col">City</div>
    </div>
    <div class="row-group">
      <div class="row">
        <div class="col">Ram</div>
        <div class="col">25</div>
        <div class="col">Salem</div>
      </div>
      <div class="row">
        <div class="col">Sam</div>
        <div class="col">11</div>
        <div class="col">Hosur</div>
      </div>
      <div class="row">
        <div class="col">Sara</div>
        <div class="col">12</div>
        <div class="col">Salem</div>
      </div>
      <div class="row">
        <div class="col">Tiya</div>
        <div class="col">25</div>
        <div class="col">Chennai</div>
      </div>
      <div class="row">
        <div class="col">Joes</div>
        <div class="col">25</div>
        <div class="col">Namakkal</div>
      </div>
    </div>
    <div class="footer">
      <div class="col">Total Students</div>
      <div class="col"></div>
      <div class="col">5</div>
    </div>
  </div>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;

}
body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.table{
  display: table;
  width: 600px;
  border:1px solid #333
}

.col{
  display: table-cell;
  border:1px solid orangered;
  padding:10px 30px;
}

.row{
  display: table-row;
}

.header{
  display: table-header-group;
  font-weight: bold;
  text-align: center;
  background-color:orangered;
  color:white;
}

.footer{
  display: table-footer-group;
  font-weight: bold;
  color:orangered;
}

.row-group{
  display: table-row-group;
}

.col-group{
  display: table-column-group;
}
.tbl-col{
  display: table-column;
}
.col-2{
width: 30px;
background: rgb(229, 171, 149);
}

.caption{
  display:table-caption;
  text-align: center;
  font-weight: 500;
  color:orangered;
  padding: 10px;
}

/*
table
table-cell
table-row
table-column
table-caption
table-column-group
table-row-group
table-header-group
table-footer-group
*/

Output

Live Preview

These properties allow you to control the display and organization of HTML tables, including the table structure, rows, cells, captions, column groups, and header/footer sections. By applying appropriate styles and using these properties, you can create well-structured and visually appealing tables on your web page.

By manipulating the background-color property for different table elements and using CSS selectors, you can achieve various color schemes and designs for your HTML tables. Feel free to adjust the colors and customize the styles further to match your specific design preferences.