CSS Table Styling Tutorial, Borders, Padding & Examples for Beginners

Tables in CSS

In HTML, tables help organize data into rows and columns. With CSS, you can greatly enhance the appearance of tables making them clean, readable, and aligned with your website’s design.

Basic Table Structure

An HTML table is created using the <table> element along with <tr> (table row), <th>

(table header), and	<td> (table data) elements.

CSS Table Styling Properties

Here are some common CSS properties used to style tables:

1. Table Borders

You can add borders to the entire table, headers, or cells.

table {
  border: 1px solid #000;
  border-collapse: collapse;
  /* Collapses multiple borders into a single border */
}

th, td {
  border: 1px solid #000;
}

2. Table Width and Centering

You can set the width of a table and center it using the margin property.

table {
  width: 100%;
  margin: 0 auto;
}

3. Padding and Spacing

Add space inside and between cells for better readability.

td {
  padding: 10px;
}

table {
  border-spacing: 10px;
  /* Applies only when border-collapse is not used */
}

4. Background and Text Colors

You can style the background and text of headers and data cells:

th {
  background-color: #333;
  color: white;
}

td {
  background-color: #f0f0f0;
  color: #333;
}

Example: Basic Table with Border

<!DOCTYPE html>
<html>

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

<body>
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Marks</th>
    </tr>
    <tr>
      <td>Sonoo</td>
      <td>Jaiswal</td>
      <td>60</td>
    </tr>
    <tr>
      <td>James</td>
      <td>William</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Swati</td>
      <td>Sironi</td>
      <td>82</td>
    </tr>
    <tr>
      <td>Chetna</td>
      <td>Singh</td>
      <td>72</td>
    </tr>
  </table>
</body>

</html>

Output:

Example: Collapsed Border Table

Use border-collapse: collapse; for cleaner-looking tables:

<!DOCTYPE html>
<html>

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

<body>
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Marks</th>
    </tr>
    <tr>
      <td>Sonoo</td>
      <td>Jaiswal</td>
      <td>60</td>
    </tr>
    <tr>
      <td>James</td>
      <td>William</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Swati</td>
      <td>Sironi</td>
      <td>82</td>
    </tr>
    <tr>
      <td>Chetna</td>
      <td>Singh</td>
      <td>72</td>
    </tr>
  </table>
</body>

</html>

Output:

Key Point

Use border-collapse: collapse for a clean, grid-like border.

Apply padding for internal spacing and border-spacing for external spacing (when not collapsed).

Style table headers (<th>) differently for emphasis.

Tables can be styled just like any other HTML element using background color, font size, text alignment, etc.