HTML Table Styling

HTML table styling allows you to customize the appearance of tables using CSS. You can change borders, background colors, text alignment, font sizes, cell padding, and spacing to make tabular data easier to read.

HTML tables are commonly used to display student marks, employee details, product prices, sales reports, and other structured information. With CSS, you can transform a basic table into a clean, organized, and professional design.

In this tutorial, you will learn how to style HTML tables using CSS with practical examples.

What Is HTML Table Styling?

HTML table styling is the process of applying CSS properties to HTML table elements to control their appearance and layout.

The main HTML elements used to create tables include:

<table> defines the table.
<caption> provides a title or description for the table.
<tr> defines a table row.
<th> defines a header cell.
<td> defines a data cell.

CSS properties such as border, background-color, padding, text-align, and border-collapse help you customize these elements.

If you are new to tables, start with our HTML Tables tutorial.

Basic HTML Table Styling Example

Let’s create a simple student table and style it using CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table Styling</title>

  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #cccccc;
      padding: 12px;
      text-align: left;
    }

    th {
      background-color: #0878d1;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #f2f7fc;
    }
  </style>
</head>
<body>

  <h2>Student Details</h2>

  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Grade</th>
    </tr>
    <tr>
      <td>Rahul</td>
      <td>20</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>21</td>
      <td>B</td>
    </tr>
  </table>

</body>
</html>

In this example, the table occupies the full available width. The CSS adds borders, creates space inside cells, gives the headers a blue background, and applies alternating colors to the rows.

HTML Table Borders

The CSS border property adds visible lines around a table and its cells. You can customize the border width, style, and color.

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

The 1px value specifies the border width, solid defines the border style, and black sets its color.

You can use styles such as solid, dashed, dotted, and double.

For more examples, read HTML Table Borders.

HTML Table Border Collapse

The CSS border-collapse property determines whether adjacent table borders are combined or displayed separately.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 10px;
  }
</style>

The collapse value combines adjacent borders into a single border. The separate value keeps adjacent borders separate.

Using border-collapse: collapse is a common choice for tables that need a simple, clean appearance.

HTML Table Cell Padding

The CSS padding property adds space between the content of a table cell and its border. Padding helps prevent text and numbers from appearing too close to the cell edges.

<style>
  th, td {
    padding: 15px;
  }
</style>

Here, each header and data cell receives 15 pixels of internal spacing.

You can increase or decrease the padding depending on the amount of information displayed in your table.

Learn more in our HTML Table Padding tutorial.

HTML Table Cell Spacing

Cell spacing controls the distance between adjacent table cells. In CSS, you can use the border-spacing property when the table uses separate borders.

<style>
  table {
    border-collapse: separate;
    border-spacing: 8px;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 10px;
  }
</style>

The border-spacing: 8px declaration creates eight pixels of space between adjacent cells.

Remember that border-spacing does not work as intended when border-collapse is set to collapse.

For more details, read HTML Table Spacing.

HTML Table Background Colors

The CSS background-color property lets you change the background of table headers, cells, rows, or the entire table.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 12px;
  }

  th {
    background-color: #0878d1;
    color: white;
  }

  td {
    background-color: #f0f7ff;
  }
</style>

In this example, the header cells have a blue background with white text, while the data cells have a light blue background.

Choose colors with sufficient contrast to keep the text readable.

HTML Table Text Alignment

The CSS text-align property controls the horizontal alignment of content inside table cells.

<style>
  th {
    text-align: center;
  }

  td {
    text-align: left;
  }
</style>

Common values include:

CSS Value	Description
`left`	Aligns content to the left
`center`	Centers content horizontally
`right`	Aligns content to the right

You can also use vertical-align to control vertical alignment inside cells.

<style>
  td {
    vertical-align: middle;
  }
</style>

The middle value vertically centers the cell content. Other common values include top and bottom.

HTML Table Striped Rows

Striped tables use alternating row colors to make individual records easier to distinguish. You can create this effect using the CSS :nth-child() pseudo-class.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 12px;
    text-align: left;
  }

  th {
    background-color: #0878d1;
    color: white;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f7fc;
  }
</style>

The tbody tr:nth-child(even) selector targets every even-numbered row inside the table body.

This technique is useful when displaying long lists of employees, products, or student records.

HTML Table Hover Effects

A hover effect changes the appearance of a row when a user moves the mouse pointer over it.

<style>
  tbody tr:hover {
    background-color: #dcecff;
  }
</style>

When a user moves the pointer over a body row, its background changes to light blue.

Hover effects can improve navigation through large tables. However, do not use hover alone to communicate important information because touchscreens may not support the same interaction.

HTML Table Styling with CSS Classes

CSS classes allow you to apply styles to specific tables instead of affecting every table on a webpage.

<style>
  .student-table {
    width: 100%;
    border-collapse: collapse;
  }

  .student-table th,
  .student-table td {
    border: 1px solid #cccccc;
    padding: 12px;
  }

  .student-table th {
    background-color: #0878d1;
    color: white;
  }

  .student-table tbody tr:nth-child(even) {
    background-color: #f2f7fc;
  }
</style>

<table class="student-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rahul</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>95</td>
    </tr>
  </tbody>
</table>

The student-table class applies the styles only to the table with that class. Other tables on the same page can use different classes and designs.

HTML Table Captions with CSS

The <caption> element provides a title or description for an HTML table. You can use CSS to customize the caption’s color, font size, weight, and spacing.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  caption {
    caption-side: top;
    font-size: 22px;
    font-weight: bold;
    color: #0878d1;
    padding: 12px;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 10px;
  }
</style>

<table>
  <caption>Student Marks</caption>
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>90</td>
  </tr>
</table>

The caption appears above the table by default. You can use caption-side: bottom to display it below the table.

Read our HTML Table Captions tutorial to learn more.

HTML Table Styling with Colspan and Rowspan

The colspan and rowspan attributes allow a table cell to span multiple columns or rows. CSS can style these cells just like other table cells.

Here is an example using colspan:

<table>
  <tr>
    <th colspan="2">Student Information</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>Rahul</td>
  </tr>
</table>

The header spans two columns because its colspan value is 2.

Here is an example using rowspan:

<table>
  <tr>
    <th rowspan="2">Department</th>
    <td>Development</td>
  </tr>
  <tr>
    <td>Testing</td>
  </tr>
</table>

The header cell spans two rows. You can apply borders, padding, background colors, and alignment to these merged cells using CSS.

Explore HTML Table Colspan and HTML Table Rowspan for more examples.

HTML Responsive Table Styling

Wide tables can be difficult to view on smaller screens. One solution is to place the table inside a container that allows horizontal scrolling when necessary.

<style>
  .table-container {
    overflow-x: auto;
  }

  table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 10px;
    text-align: left;
  }

  th {
    background-color: #0878d1;
    color: white;
  }
</style>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Department</th>
        <th>Email</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Rahul</td>
        <td>Development</td>
        <td>rahul@example.com</td>
        <td>Hyderabad</td>
      </tr>
    </tbody>
  </table>
</div>

The overflow-x: auto property allows horizontal scrolling when the table exceeds the width of its container. The min-width property helps prevent the columns from becoming too narrow.

Common HTML Table Styling Mistakes

Avoid these common mistakes when styling HTML tables:

Forgetting to add padding, making the content difficult to read.
Using text and background colors with insufficient contrast.
Applying styles globally when only one table needs a particular design.
Adding too many colors and borders, making the table visually confusing.
Ignoring smaller screens when displaying tables with many columns.
Using table elements to create the overall layout of a webpage instead of using appropriate CSS layout techniques.

HTML Table Styling Best Practices

Follow these practices to create readable, accessible, and consistent tables:

Use CSS to control the visual appearance of table elements.
Keep colors, borders, and typography consistent across your website.
Add sufficient padding to separate content from cell borders.
Use <th> elements for column and row headings.
Use meaningful captions when a table needs a descriptive title.
Apply alternating row colors only when they improve readability.
Make wide tables usable on mobile devices.
Use CSS classes to style specific tables without affecting unrelated elements.
Test your tables in different browsers and screen sizes.