CSS Table

You can create Present Data by Table with a more interesting and useful style. For which Table Properties have been created in CSS.

You can Customize Table’s Border Setting, Caption, Cells etc. by CSS’s Table Properties.

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France

Types of CSS Table Properties

Various Table Properties is provided by CSS to customize the HTML Table:

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

Table Borders

The border property is used to define Border in the table. You can Define Border for each Element of Table.

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

Output

Add a border to a table:

Firstname Lastname
Peter Griffin
Lois Griffin

Collapse Table Borders

The work of removing this fatal border by border-collapse property is done. With this, all share the Element Border and the space is over. It has two potential Values, the first is the separate and second collapse.

Example

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Let the borders collapse:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results 
in IE8 and earlier versions.</p>

</body>
</html>

Output

Let the borders collapse:

Firstname Lastname
Peter Griffin
Lois Griffin

Note: If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results in IE8 and earlier versions.

Table Border Space

This property is used to define the distance between cells from one cell to another. Which you can control from both sides

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

#table1 {
  border-collapse: separate;
  border-spacing: 15px;
}

#table2 {
  border-collapse: separate;
  border-spacing: 15px 50px;
}
</style>
</head>
<body>

<h2>border-spacing: 15px:</h2>
<p>When using "border-collapse: separate", the border-spacing property can be used to set the space between the cells:</p>
<table id="table1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<h2>border-spacing: 15px 50px:</h2>
<p>Using two values (the first sets the horizontal spacing and the second sets the vertical spacing):</p>
<table id="table2">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

Output

border-spacing: 15px:

When using “border-collapse: separate”, the border-spacing property can be used to set the space between the cells:

Firstname Lastname
Peter Griffin
Lois Griffin

border-spacing: 15px 50px:

Using two values (the first sets the horizontal spacing and the second sets the vertical spacing):

Firstname Lastname
Peter Griffin
Lois Griffin

caption-side Property

You must have defined the caption in the HTML Table. Which appears above the Default Table. The caption-side property is used to control the position of the table caption. Its possible values ​​are top, bottom left and right

Example

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  caption-side: bottom;
}

#example2 {
  caption-side: top;
}
</style>
</head>
<body>


<h3>caption-side: bottom:</h3>
<table id="example1" border="1">
<caption>Table 1.1 Customers</caption>
<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>Berglunds snabbköp</td>
  <td>Christina Berglund</td>
  <td>Sweden</td>
</tr>
<tr>
  <td>Centro comercial Moctezuma</td>
  <td>Francisco Chang</td>
  <td>Mexico</td>
</tr>
<tr>
  <td>Ernst Handel</td>
  <td>Roland Mendel</td>
  <td>Austria</td>
</tr>
</table>

<h3>caption-side: top (default):</h3>
<table id="example2" border="1">
<caption>Table 1.1 Customers</caption>
<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>Berglunds snabbköp</td>
  <td>Christina Berglund</td>
  <td>Sweden</td>
</tr>
<tr>
  <td>Centro comercial Moctezuma</td>
  <td>Francisco Chang</td>
  <td>Mexico</td>
</tr>
<tr>
  <td>Ernst Handel</td>
  <td>Roland Mendel</td>
  <td>Austria</td>
</tr>
</table>
</body>
</html>

Output

caption-side: bottom:

Table 1.1 Customers
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

caption-side: top (default):

Table 1.1 Customers
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria

empty-cells Property

Many times we do not have enough data, then some cells remain empty. Whatever appears in the table and increasing the size of the table.

But, by the empty-cells property you can hide the Border of these empty cells. It can have two potential Values. From show you display the border and you hide the border with hide

Example

<!DOCTYPE html>
<html>
<head>
<style>
table.ex1 {
  empty-cells: hide;
}

table.ex2 {
  empty-cells: show;
}
</style>
</head>
<body>

<h1>The empty-cells Property</h1>

<h2>empty-cells: hide:</h2>
<table class="ex1" border="1">
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td></td>
  </tr>
</table>

<h2>empty-cells: show (default):</h2>
<table class="ex2" border="1">
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td></td>
  </tr>
</table>

</body>
</html>

table-layout Property

The table-layout property is used to control the layout of Border according to the data. This property has two possible values. Cells with fixed value are display of equal length-width. And the Auto Value is displayed according to the Cell Data Length

Example

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  border: 1px solid black;
} 

th,td {
  border: 1px solid black;
}

table.a {
  table-layout: auto;
  width: 180px;  
}

table.b {
  table-layout: fixed;
  width: 180px;  
}

table.c {
  table-layout: auto;
  width: 100%;  
}

table.d {
  table-layout: fixed;
  width: 100%;  
}
</style>
</head>
<body>

<h1>The table-layout Property</h1>

<table class="a">
  <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>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<h2>table-layout: fixed; width: 180px:</h2>
<table class="b">
  <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>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<h2>table-layout: auto; width: 100%:</h2>
<table class="c">
  <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>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<h2>table-layout: fixed; width: 100%:</h2>
<table class="d">
  <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>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>