CSS Tutorial - CSS Table

HTML table is used to layout tabular data in grid. With CSS we can style HTML table by adding border, control table cell text alignment, highlight table row, and etc.

Table Border

We can use border property to add border to table, table row and table cell.

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

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {<!--  www .  ja  v a  2 s .co m-->
    border: 1px solid black;
}
</style>
</head>
<body>
    <table>
      <tr><th>Value</th><th>Item</th></tr>
      <tr><td>CSS</td><td>Style</td></tr>
      <tr><td>HTML</td><td>Structure</td></tr>
    </table>
</body>
</html>

Click to view the demo

Table Border Collapse

The border-collapse property controls the way that the browser draws table borders. It controls borders on adjacent cells.

Its possible values are collapse or separate.

The browser draws a border around the table plus a border around each cell, creating a double border effect. You can address this by applying the border-collapse property.

The following code uses the border-collapse Property.

<!DOCTYPE HTML>
<html>
<head>
<style>
table  {<!--from   ww  w .jav a 2  s .  c om-->
    border-collapse: collapse;
}
th,  td {
    padding: 2px;
}
</style>
</head>
<body>
    <table  border="1">
        <caption>Results of Survey</caption>
        <colgroup id="colgroup1">
            <col  id="col1And2" span="2"/>
            <col  id="col3"/>
        </colgroup>
        <colgroup id="colgroup2"  span="2"/>
        <thead>
            <tr>
            <th>Rank</th>
            <th>Name</th>
            <th>Color</th>
            <th colspan="2">Size</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Favorite:</th>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>500</td>
            </tr>
            <tr>
            <th>2nd Favorite:</th>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="5">&copy; 2011 java2s.com Data Enterprises</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Click to view the demo

The collapse value tells the browser that you don't want borders drawn on every edge of adjacent elements.

Example

The following code shows how to compare separate and collapse table border.

<html>
<body>
  <table id="myTable" border="1" style="border-collapse: collapse">
    <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
    </tr><!-- w ww .  j a va2 s  .com-->
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
  </table>
  <button onclick="myTable.style.borderCollapse='separate'">separate</button>
  <button onclick="myTable.style.borderCollapse='collapse'">collapse</button>
</body>
</html>

Click to view the demo

Table Width and Height

The width and height properties controls the width and height of a table.

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

table {
    width: 100%;
}

th {
    height: 50px;
}

Table Text Alignment

The text-align and vertical-align properties controls text alignment in a table.

The text-align property sets the horizontal alignment, like left, right, or center.

The vertical-align property sets the vertical alignment, like top, middle, or bottom.

td {
    text-align: right;
    vertical-align: bottom;
}