HTML

HTML Table Styling Tutorial

HTML Table Styling means using CSS to change the appearance of HTML tables. It involves modifying fonts, colors, spacing, and borders. This tutorial shows you how to build clear and appealing tables that work well on all devices.

Learning Outcomes

After reading this tutorial, you will be able to:

Create an HTML table using core elements like <table>, <tr>, <td>, and <th>.
Use <thead>, <tbody>, <tfoot>, and <caption> to organize table content clearly.
Apply <colgroup> and <col> to target columns for future styling.
Add HTML attributes, such as scope, to improve table accessibility.
Build semantic HTML tables that help users and search engines understand the data.

Build a Solid HTML Table Structure

A good table needs proper HTML structure. A clear structure helps users and search engines read the table.

Core Elements

A basic table uses these elements:

<table>: The main container.
<tr>: A row.
<td>: A data cell.
<th>: A header cell.

Semantics and Accessibility

When building an HTML table, include elements that improve clarity and aid accessibility. These practices help all users, including those who use assistive devices, to understand your table.

Sections

Use <thead>, <tbody>, and <tfoot> to divide the table into a header, body, and footer. Place a <caption> at the top to describe the table. This structure clarifies the role of each part of the table for both users and search engines.

Column Styling

Use <colgroup> and <col> to group columns. This lets you apply styles to entire columns, ensuring uniform formatting without repeating styles for each cell.

Screen Readers

Improve accessibility by adding a scope attribute to header cells. Use <th scope="col"> for column headers and <th scope="row"> for row headers. This helps screen readers understand the table's layout and read the data in a logical order.

Example:

<table>
  <caption>Vehicle Models</caption>
  <thead>
    <tr>
      <th scope="col">Make</th>
      <th scope="col">Model</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tesla</td>
      <td>Model S</td>
    </tr>
    <tr>
      <td>Chevrolet</td>
      <td>Bolt</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Data as of 2025</td>
    </tr>
  </tfoot>
</table>

Output:

Vehicle Models
Make	Model
Tesla	Model S
Chevrolet	Bolt
Data as of 2025

This example shows how to build an accessible HTML table using semantic elements.

The <table> tag is the container for all table content.
The <caption> tag provides a brief summary of the table. Here, it labels the table as "Vehicle Models."
The <thead> section groups the header row. Inside it, the <tr> tag defines a row with two header cells (<th>). Each header cell uses the attribute scope="col" to indicate that it is a column header. This helps assistive technologies understand the table structure.
The <tbody> section holds the main data. It contains two rows (<tr>). Each row has two cells (<td>), which list the vehicle make and model.
The <tfoot> section contains footer information. In this case, one row with one cell spans both columns using colspan="2", adding a note that the data is from 2025.

This structure helps users and search engines understand the table's layout and improves accessibility for screen readers.

Table Styling Techniques

To create a well-designed table, it's important to reset the default browser styles. Browsers automatically apply their own styles to HTML elements, which can interfere with your table's design. By resetting these default styles, you establish a clear base that allows you to style the table exactly as you want, without unwanted modifications. This ensures a more consistent appearance across different browsers and gives you full control over the design.

Layout and Spacing

Fixed Layout – Use table-layout: fixed and width: 100% to set even column widths.
Border Collapsing – Use border-collapse: collapse to merge borders. Use border-spacing with border-collapse: separate to add gaps.
Cell Padding – Add padding to <td> and <th> to improve readability.

Example:

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  border: 1px solid #ccc;
}

Typography

Set fonts and text properties to improve clarity.

Global Fonts. Choose a clear font stack. For example, use Google Fonts.
Headers. Use a different font for headers.
Text Alignment. Adjust alignment and letter spacing for better readability.

Example:

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
thead th {
  font-family: 'Rock Salt', cursive;
  text-align: center;
  letter-spacing: 2px;
}
td {
  text-align: left;
  letter-spacing: 1px;
}

Graphics and Color Enhancements

Add colors and borders to enhance the table's appearance. By using CSS, you can customize the table's background color, text color, and borders, making it visually appealing and easier to read. For instance, alternating row colors can improve readability, and borders can help separate the data clearly. These enhancements not only improve the aesthetic but also contribute to a better user experience.

Zebra Stripes

Alternate row or column colors to help users read the table.

Rows:

Apply a background color to even rows.

tbody tr:nth-child(even) {
  background-color: #f0f0f0;
}

Column:

Apply a background color to even columns.

td:nth-child(even),
th:nth-child(even) {
  background-color: #e0e0e0;
}

Combined Effect:

Use a transparent color with rgba().

tbody tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}
td:nth-child(even),
th:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

Borders and Dividers

Use borders to separate elements clearly.

Header Underlines - Use border-bottom on header cells.
Cell Borders - Apply consistent borders to all cells.

Example:

th {
  border-bottom: 2px solid #4CAF50;
}
tr {
  border-bottom: 1px solid #ddd;
}

Hover Effects

Highlight rows or cells when a user moves the mouse over them.

tr:hover {
  background-color: #f5f5f5;
}
td:hover {
  border-bottom: 1px dashed #333;
}

Advanced Table Styling Techniques

Apply precise CSS selectors to style specific parts of the table.

Specific Cell Styling

Use selectors like :nth-child() to target specific cells.

Example:

td:nth-child(3) {
  font-weight: bold;
}

Rounded Corners

Apply rounded corners to soften the table's look.

Example:

tr:first-of-type th:first-of-type {
  border-top-left-radius: 8px;
}
tr:first-of-type th:last-of-type {
  border-top-right-radius: 8px;
}

Split Columns and Rows

Create spacing between cells for a modern look.

table {
  border-collapse: separate;
  border-spacing: 10px 0;
}

Focus and Outlines

Improve keyboard navigation by highlighting focused cells.

td:focus,
th:focus {
  outline: 2px solid #666;
  outline-offset: -2px;
}

Data-Driven Text Alignment

Control text alignment with data attributes without extra classes.

<table data-col2="center" data-col4="right">
  <!-- table content -->
</table>

[data-col2] tr > *:nth-of-type(2) {
  text-align: center;
}
[data-col4] tr > *:nth-of-type(4) {
  text-align: right;
}

Responsive Table Designs with Modern CSS

CSS Grid and Flexbox

CSS Grid divides the table area into rows and columns. You define the grid by setting rules for columns and rows. This method makes the table layout flexible and clear on any screen size.

Example with CSS Grid:

table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  border-collapse: collapse;
}
thead, tbody, tr {
  display: contents;
}
th, td {
  padding: 8px;
  border: 1px solid #ccc;
}

Media Queries

Use media queries to adjust table styles on small screens. Set rules to hide or resize elements when the device width is below a certain value. For example, hide headers and rearrange data cells to display clearly on mobile devices. This method keeps tables accessible and easy to read on all devices.

@media (max-width: 600px) {
  th, td {
    padding: 5px;
    font-size: 14px;
  }
}

FAQs on HTML Table Styling

How do I change the style of an HTML table?

Use CSS to style table elements such as table, tr, td, and th.

How can I fill a table cell with color?

Apply the background-color property on <td> or <th>, for example:

td {
  background-color: #e0e0e0;
}

What is the default border behavior for HTML tables?

Browsers use border-collapse: separate with default spacing. You can override this with CSS.

How do I add padding inside table cells?

Use the padding property on <td> and <th>, for example:

td, th {
  padding: 10px;
}

Previous Next