CSS Tables

CSS Tables

This tutorial will teach you how to set different properties of an HTML table using CSS. You can set following properties of a table:

1) CSS border-collapse

The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
}
table, td, th {
    border: 2px solid red;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Prakash</td>
    <td>Thakur</td>
  </tr>
  <tr>
    <td>Pritam</td>
    <td>Sarode</td>
  </tr>
</table>
</body>
</html>
Try it with the Editor

2) CSS border-spacing

The border-spacing property sets the distance between the borders of adjacent cells (only for the "separated borders" model).

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
table.ex {
    border-collapse: separate;
    border-spacing: 10px;
}
</style>
</head>
<body>
<table class="ex1" border="5">
  <tr>
    <td>Prakash</td>
    <td>Thakur</td>
  </tr>
  <tr>
    <td>Pritam</td>
    <td>Sarode</td>
  </tr>
</table>
</body>
</html>
Try it with the Editor

3) CSS caption-side

The caption-side property specifies the placement of a table caption.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
caption {
    caption-side: bottom;
}
</style>
</head>
<body>
<table border="1">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
</table>
</body>
</html>
Try it with the Editor

4) CSS empty-cells

The empty-cells property sets whether or not to display borders and background on empty cells in a table (only for the "separated borders" model).

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: separate;
    empty-cells: hide;
}
</style>
</head>
<body>
<table border="5">
  <tr>
    <td>Prakash</td>
    <td>Thakur</td>
  </tr>
  <tr>
    <td>Pritam</td>
    <td></td>
  </tr>
</table>
</body>
</html>
Try it with the Editor

5) CSS table-layout

The table-layout property sets the table layout algorithm to be used for a table.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: separate;
    width: 100%;
    border: 1px solid black;
} 
td {
    border: 1px solid black;
}
table.ex1 {
    table-layout: auto;
}
table.ex2 {
    table-layout: fixed;
}
</style>
</head>
<body>
//table-layout: auto:
<table class="ex1">
  <tr>
    <td width="5%">1000000000000000000000000000</td>
    <td width="95%">10000000</td>
  </tr>
</table>
//table-layout: fixed:
<table class="ex2">
  <tr>
    <td width="5%">1000000000000000000000000000</td>
    <td width="95%">10000000</td>
  </tr>
</table>
</body>
</html>
Try it with the Editor