,

Styling HTML Tables

Tables are one of the most popular means of presenting information in rows and columns when there is data that needs to be presented on a webpage. Styling HTML tables using CSS makes it not only attractive but also highly responsive and friendly to users’ devices.

Even though basic HTML tables can serve the purpose well, they do look rather unattractive, especially if displayed on various devices.

In this blog, we are going to see how you can style HTML tables and lists using CSS and make them responsive, especially on mobile devices.

As you continue building your webpage, be sure to look into other ways of organizing and structuring content using HTML table lists and interactive forms.

HTML Tables Basic Structure

Before entering into styling, the structure of an HTML table should be grasped.

The basic table syntax is as follows

  • <table>: Defines the table itself.
  • <thead>: Contains header rows (<th>).
  • <tbody>: Contains table data rows (<td>).
  • <tr>: Represents a table row.

Now that you know the basics, let’s move on to adding style and responsiveness to this table.

Simple CSS styling for the tables

CSS styling makes your table aesthetically presentable and readable. 

Here is a simple style for your table

  • border-collapse: collapse;: Ensures the table borders are merged into a single line.
  • padding: Adds space inside the cells for better readability.
  • text-align: Aligns text to the left in both header and data cells.
  • tr:nth-child(even): Adds a background color to the even rows, which will add a striped effect to the table.
  • tr:hover: Highlights rows when hovered over for better interactivity.

These basic styles make your table far more readable and aesthetically pleasing.

Making Tables Responsive for Mobile Devices

One of the common issues with tables is that they tend to look terrible on smartphones and tablets. By default, tables tend to overflow or become too large to view easily on smaller screens. 

Here are a few ways to make your tables responsive

Technique 1: Horizontal scrolling

When your table is wider than the screen, you can activate horizontal scrolling. This allows users to scroll horizontally through the table without breaking the layout.

overflow-x: auto;: This property adds a horizontal scrollbar to the table if its content exceeds the container width.

This is a great simple approach to managing wide tables on mobile screens, particularly when the tables have many columns.

Technique 2: Stack Table Rows for Mobile

For a more mobile friendly technique, you can stack the rows into a block format on a smaller screen. This works better when you have a table with many rows, but fewer columns.

  • @media (max-width: 768px): This media query targets screens with a width less than 768px, making the table adjust on tablets or mobile devices.
  • td::before: Adds a label before each table cell’s content, so the user will know what the data represents.

This method makes the table to be presented as stacked blocks, making it more readable and user-friendly on small screens.

Combining Tables with Lists for Better Organization

Occasionally, you might find a need to display a combination of tables and lists to suit your needs to better organize data. For example, you may use a table to show overall data and a list to include details for every item. 

You can integrate a list inside the table as demonstrated below

To this end, you have placed an unordered list within a table cell. This helps in listing items as part of a table and can enhance their clarity and organization.

Using Semantic HTML Elements with Tables

Semantic tags such as <section>, <article>, and <header> enhance SEO and organize the content meaningfully when used with your tables.

You can encapsulate a table in a <section> element to give it extra context, like this

Using these semantic elements ensures that your webpage is well-structured and accessible.

Conclusion – Responsive and Stylish Tables

This is what CSS gives you: powerful tools to make HTML tables look good and work well on all screen sizes; use horizontal scrolling, stacked rows, or semantic elements to ensure your table stays user-friendly.

Do not forget to use these styling tips with HTML Tables and Lists to better organize your data and explore enhancing your page with media for richer content

FAQs

Text us on WhatsApp