Building a responsive comparison table with HTML and CSS

When building a website, it's common to need to present data in a tabular format, such as a comparison table. However, it's important to ensure that the table is not only aesthetically pleasing but also responsive and easy to read on any device, from desktop computers to mobile phones.

In this blog, we'll go through the process of creating a responsive comparison table using HTML and CSS. We'll be using HTML tables to structure the data and CSS for styling and making the table responsive.

HTML Structure

To start, we'll create a basic HTML table structure with three columns: a column for each product, and a column for each feature we want to compare.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Feature 1</th>
      <th>Feature 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
    <tr>
      <td>Product 3</td>
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
  </tbody>
</table>

CSS Styling

Next, we'll add some basic styles to our table using CSS.

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 20px;
}

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

th {
  background-color: #ddd;
  font-weight: bold;
}

Making the Table Responsive

Now, we'll make our table responsive so that it looks good on any device, regardless of screen size. To do this, we'll use CSS media queries to apply different styles based on the screen size.

@media only screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  td {
    border: none;
    border-bottom: 1px solid #ccc;
    position: relative;
    padding-left: 50%;
  }
  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
  th {
    display: none;
  }
}

In this media query, we're using display: block to stack the table cells vertically and display: none to hide the table headers. We're also adding some additional styles to make the table more readable on smaller screens, including adding borders and padding to the cells and using the :before pseudo-class to display the table headers as labels for each cell.

Testing and Refinement

After implementing the responsive styles, it's important to test the table on different devices and screen sizes to ensure that it looks good and is easy to read on all devices. We can use browser developer tools or services like BrowserStack to test the table on different devices.

Based on the testing, we may need to make further refinements to the CSS styles to improve the table's readability and usability on different devices. For example, we may need to adjust the font size or padding of the cells, or adjust the media query breakpoints to better target specific screen sizes.

Conclusion

In this blog, we've gone through the process of creating a responsive comparison table using HTML and CSS. By using HTML tables to structure the data and CSS for styling and making the table responsive, we've created a table that looks good and is easy to read on any device, from desktop computers to mobile phones. By testing and refining our design, we can ensure that our table provides a great user experience for all of our website visitors.