CSS Table formatting

Border

The table border can be set by using the border property of CSS.

The example below specifies a black border for for the entire table , cluding the table headers <th> and table cells <td>

Sample code

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

Complete Example

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

<h2>Example of table border</h2>

<table>
  <tr>
    <th>Roll No</th>
    <th>Full Name</th>
  </tr>
  <tr>
    <td>101</td>
    <td>Antonio</td>
  </tr>
  <tr>
    <td>102</td>
    <td>Moses</td>
  </tr>
</table>

</body>
</html>

Notice that the output of the example above produces a table with double borders. This is because both the table and the <th> and <td> elements have separate borders.

Border-collapse

The border-collapse property sets whether the table borders should be collapsed into a single border:

Sample code

table {border-collapse:separate;}
table, th, td {
  border: 2px solid green;
}

Values
collapse : A single border is created
separate: Double border effect is shown
inherit : Inherits the properties from its parent element.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<style>

table, th, td {
  border: 2px solid green;
  border-collapse:collapse;  /*separate, inherit*/
}
 
</style>
</head>
<body>

<h2>Example of table border collapse</h2>

<table>
  <tr>
    <th>Roll No</th>
    <th>Full Name</th>
  </tr>
  <tr>
    <td>101</td>
    <td>Antonio</td>
  </tr>
  <tr>
    <td>102</td>
    <td>Moses</td>
  </tr>
</table>

</body>
</html>

Width/Height

Width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th> to 50px:

table { width:100%;}
th {height:50px;}

Example

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

table {
  width: 100%;
  border-collapse: collapse;
}

th {height:50px;} 
</style>
</head>
<body>

<h2>Example of table width 100% and th height 50 px</h2>

<table>
  <tr>
    <th>Roll No</th>
    <th>Full Name</th>
  </tr>
  <tr>
    <td>101</td>
    <td>Antonio</td>
  </tr>
  <tr>
    <td>102</td>
    <td>Moses</td>
  </tr>
</table>

</body>
</html>

Text-align

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>. By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

The example below aligns the text inside <td> element to the center:

td{text-align:center;}

See how it works

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

table {
  width: 100%;
  border-collapse: collapse;
}

td {text-align:center;} 
</style>
</head>
<body>

<h2>Example of text align for tables</h2>

<table>
  <tr>
    <th>Roll No</th>
    <th>Full Name</th>
  </tr>
  <tr>
    <td>101</td>
    <td>Antonio</td>
  </tr>
  <tr>
    <td>102</td>
    <td>Moses</td>
  </tr>
</table>

</body>
</html>

Vertical-align

The vertical-align property sets the vertical alignment (like top, bottom and middle) of the content in or . By default, the vertical alignment of the content in table is middle for both and elements.

The following example sels the vertical text alignment to bottom for elements:

Sample code

td {height:50px; vertical-align:bottom;}