Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

CSS Table Responsive Designs: How to Make a Great Table

Tables are a very important way of passing information and explaining various contexts for better understanding on a web page. Tables are often hard to read and understand when they are disarranged.

However, CSS has provided you with a way to style our table content, making it look good, understandable, and well-arranged at different viewports (Screen sizes).

In this article, I will walk you through how to create a responsive table on your web page. By understanding this context, your journey in creating responsive tables will be a less tasking one.

Let’s dive right in 🚀

How to Create Table Responsive Data

Data tables are essential to many websites, blogs, and applications as they allow you to showcase data in tabular formats for easy referencing and understanding.

Data tables can be used in many ways, such as displaying results, comparing two different data, analyzing data, calendars, etc.

Non-responsive data tables pose a great deal of challenge, especially when viewed on mobile devices. They often have fixed widths, causing the content to go beyond the boundaries of the screen, leading to users scrolling horizontally just to view the remaining part of some texts.

Furthermore, text within non-responsive data tables becomes extremely tiny and difficult to read, leading to users zooming in and out to read texts.

Certainly, CSS has provided some advanced strategies that can be used in dealing with a non-responsive table design and converting it to a responsive one. Some of these advanced strategies can be accessed using Grid layouts, Flexbox, overflow, etc.

Table Structure Optimization

Semantic HTML is important for accessibility, readability, and also for optimization. Using Semantic HTML elements in data tables also helps boost the accessibility, clarity and, organization, responsiveness of your table.

Some of the main semantic HTML elements used in creating tables are;

table: This is the main container for creating a table.

caption: This element gives a brief description of the table.

thead: This contains the table headers.

tbody: This includes the main contents of the tables, both in cells and rows.

tfoot: Within this tag is where the table footer is placed.

tr: This is used to define the table rows.

th: represents the header cells and is usually contained within the thead element.

td: represents the table description and is found directly within tbody.

col: This is used to define a specific column in a table.

Having seen the different HTML tags, we will also see how to properly structure and use them in our project.

<!--  Index.html -->

<!-- How to create a data table using the semantic HTML element. -->

<body>

<h1> Data Tables</h1>

<table>
  <caption>A Comprehensive List of Students</caption>
  <thead>
    <tr>
      <th>
        S/n
      </th>
      <th>
        Name
      </th>
      <th>
        Gender
      </th>
      <th>
        Mail
      </th>
      <th>
        Contact Address
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td data-title="S/n">1.</td>
      <td data-title="Name">Emmanuel</td>
      <td data-title="Gender">Male</td>
      <td data-title="Mail">efranklin542@gmail.com</td>
      <td data-title="Contact Address">Faraday street</td>
    </tr>
    <tr>
      <td data-title="S/n">2.</td>
      <td data-title="Name">Mary</td>
      <td data-title="Gender">Female</td>
      <td data-title="Mail">lindaM@utlook.com</td>
      <td data-title="Contact Address">Lincoln street</td>
    </tr>
    <tr>
      <td data-title="S/n">3.</td>
      <td data-title="Name">Bethel</td>
      <td data-title="Gender">Male</td>
      <td data-title="Mail">bethel2016@gmail.com</td>
      <td>Brad street</td>
    </tr>
    <tr>
      <td data-title="S/n">4.</td>
      <td data-title="Name">Emmanuel</td>
      <td data-title="Gender">Male</td>
      <td data-title="Mail">efranklin542@gmail.com</td>
      <td data-title="Contact Address">Faraday street</td>
    </tr>
   <tr>
      <td data-title="S/n">5.</td>
      <td data-title="Name">Bethel</td>
      <td data-title="Gender">Male</td>
      <td data-title="Mail">bethel2016@gmail.com</td>
      <td>Brad street</td>
    </tr>
 <tr>
      <td data-title="S/n">6.</td>
      <td data-title="Name">Mary</td>
      <td data-title="Gender">Female</td>
      <td data-title="Mail">lindaM@utlook.com</td>
      <td data-title="Contact Address">Lincoln street</td>
    </tr>
    <tr>
      <td data-title="S/n">7.</td>
      <td data-title="Name">Emmanuel</td>
      <td data-title="Gender">Male</td>
      <td data-title="Mail">efranklin542@gmail.com</td>
      <td data-title="Contact Address">Faraday street</td>
    </tr>

    <!-- You can add more details-->
  </tbody>

</table>
</body>

Here is the result of the code above;

Non appealing table

If you are working on a CSS project, and you want to be 5x more productive, you want to skip the boring part of writing each piece of code yourself, check out our AI-generated custom components for CSS. This allows you to quickly get started on your project.

Enhancing Aesthetics with CSS

The default styling of data tables provides a basic look for HTML elements across various browsers, and this does not make a data table look visually appealing.

However, we can make our data tables more visually appealing and user-friendly using custom CSS to enhance layouts and feel.

We can create a more visually appealing, user-friendly, readable table with some advanced CSS table styling techniques.

/*style.css*/

*{
  margin: auto;
  box-sizing: border-box;
}

h1 {
  margin: auto;
  text-align: center;
}
table {
  border-collapse: collapse;
  width: 100%;
}

caption {
  font-size: 50px;
  color: grey;
}

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

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

tbody tr:hover {
  background-color: #ddd;
}

Adding some of the above styles to our HTML table also makes our table look visually appealing, understandable, and presentable.

An appealing and responsive table

Responsive Design Considerations

Responsive design ensures your website and its components seamlessly adjust to various devices and screen sizes. Creating a data table that is responsive across all screen sizes not only boosts user accessibility and readability but also ensures that the table is visually appealing across various screen sizes.

These are just a few examples of the CSS properties that can be adjusted with media queries to create responsive tables. The specific properties you choose to modify will depend on your table’s design, content, and the desired user experience on different devices.

Next, a non-responsive table brings about poor readability, organization, and visual display of the table data across various screen sizes.

Non-responsive table at mobile screen

Image source – CSSTricks.com

Dynamic Width Control

Dynamic width control for tables is important and ensures a table can adapt to different screen sizes and also prevent layout distortion.

But most times, we do not have to make many changes for our table to be responsive. We can just implement dynamic width control by setting a width value to our table columns. These values can be in percentages (width: 100%).

/*style.css*/

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  width: 40%;
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

/*you can add width to more content*/

Default column widths and text-wrapping can present lots of challenges to our table. Therefore leading to the table being rigid and the text inside the table not being presented correctly.

This issue can be easily sorted out with the use of various CSS techniques such as flexbox, grid, max-width, min-width, etc.

By applying the min-width and max-width properties to columns, we can easily define a range within which the column of our table can expand or contract based on its content or screen size. For example;

/* Applying min-width and max-width to columns */

th,
td {
  min-width: 20%;
  max-width: 40%;
}

We can also choose to apply min-width and max-width to specific columns in a table. We can also achieve this by adding nth-child() properties to those particular table columns. For example;

/* Applying min-width and max-width to columns */

th:nth-child(1),
td:nth-child(1) {
  min-width: 20%;
  max-width: 40%;
}

th:nth-child(2),
td:nth-child(2) {
  min-width: 25%;
  max-width: 45%;
}

th:nth-child(3),
td:nth-child(3) {
  min-width: 40%x;
  max-width: 50%;
}

/* Apply max-width and min-width to the remaining columns of the table*/

Overcoming Word-Length Issues

Often, lengthy links or text placed inside table cells cause our table to look disorganized and also difficult to read.

The CSS word-break property comes in handy in this very type of situation as it helps you split long words or links in our table and prevent disruption of the table layout.

<table>
  <caption>List of Important Websites in the World </caption>
  <thead>
    <tr>
      <th>
        S/n
      </th>
      <th>
        Website name
      </th>
      <th>
        About Company
      </th>
      <th>
        Website links
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1.</td>
      <td>fredCodeCamp</td>
      <td>freeCodeCamp is a community of people around the world who are learning to code together. We're a 501(c)(3) public charity.</td>
      <td> <a href="<https://www.freecodecamp.org/news/about/>">
        <https://www.freecodecamp.org/news/about/></a></td>
    </tr>
    <tr>
      <td>2.</td>
      <td>Medium</td>
      <td>With styling tables now behind us, we need something else to occupy our time. The next article explores debugging CSS — how to solve problems such as layouts not looking like they should, or properties not applying when you think they should. This includes information on using browser DevTools to find solutions to your problems.
      </td>
      <td> <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables"><https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables></a></td>
    </tr>

    <tr>
      <td>2.</td>
      <td>Bootstrap</td>
      <td>Originally released on Friday, August 19, 2011, we’ve since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile-first approach. With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s Flexbox. We intend to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
      </td>
      <td> <a href="<https://getbootstrap.com/docs/4.0/content/tables/>"><https://getbootstrap.com/docs/4.0/content/tables/></a></td>
    </tr>
  <tbody>
  <table>

for the CSS styling;

td a {
  word-break: break-all;
}

td {
  width: 40%;
  word-break: break-all;
}

Media Queries for Responsive Styling

Just as media queries are an important tool in creating a responsive design, they can also be used to create tables that adapt well to different screen sizes.

Thus, to create a responsive table with a media query, we add @media and define a specific screen width we are targeting.

Here is an example of how to use Media Queries for creating responsive tables;

/*Using the HTML Code in the previous section */

/*style.css*/

@media (max-width:760px) {
  h1 {
    font-size: 20px;
  }
  table{
    border: 2px solid gray;
    border-collapse: separate;
  }

  table caption {
    display: none;
  }

  table thead tr{
    display: none;
  }

  table, tbody, tr, td {
    display: block;
    width: 100%;
    padding: .5em;
  }

  table tr{
    margin-bottom: 20px;
  }

   table td {
    text-align: right;
    padding-left: 50%;
    word-break: break-all;
  }

  table td::before {
    content: attr(data-title) ": ";
    display: float;
    word-break: break-all;
  }

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

An appealing and responsive table

If you prefer to learn more about how to use media queries for creating responsive tables through video, I have included a YouTube video below;

Accessibility Best Practices

Accessibility is one of the most important factors to consider when creating a website. It ensures that people with diverse limitations can navigate, understand, and interact with the website effortlessly.

Since data tables, in most cases, are used to display large amounts of information, It is important that when creating a data table, we consider the accessibility aspect of it to make it easy for both the disabled and non-disabled person to use.

It is crucial to test these data tables using screen readers such as JAWS (Job Access with Speech), NVDA (NonVisual Desktop Access), and others to make sure people with disabilities who depend on these tools can view them.

Making use of these tools to access our data tables, will help you make sure that your table is correctly organized, properly interpreted, and easily accessed by people with disabilities.

Another crucial step you must do to guarantee data table accessibility is to test it using keyboard navigation. It makes it easier for those with motor disabilities who have trouble using a mouse or other pointing device to navigate across a data table.

Using HTML Semantic

HTML Semantic is a vital way of writing content that can be read and understood by the web browser. It can also be vital in search engine optimization (SEO) and help make writing easier for people who are disabled.

Here is an example of how to use some of the HTML Semantic in creating data tables;

<body>
<table>
    <caption>Monthly Expenses</caption>
    <thead>
      <tr>
        <th>Month</th>
        <th>Salary</th>
        <th>Expenses</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-title="Month">January</td>
        <td data-title="Salary">$550</td>
        <td data-title="Expenses">$250</td>
      </tr>
      <tr>
        <td data-title="Month">February</td>
        <td data-title="Salary">$550</td>
        <td data-title="Expenses">$300</td>
      </tr>
      <!-- More rows -->
    </tbody>
    <tfoot>
      <tr>
        <td data-title="Month">Total</td>
        <td data-title="Salary">$6600</td>
        <td data-title="Expenses">$3,800</td>
      </tr>
    </tfoot>
  </table>
</body>

CSS styling;

 *{
  margin: auto;
  box-sizing: border-box;
}

h1 {
  margin: auto;
  text-align: center;
  font-size: 50px;
}
table {
  border-collapse: separate;
  width: 100%;
}

caption {
  font-size: 50px;
  color: grey;
  font-style: italic;
}

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

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

tbody tr:hover {
  background-color: #ddd;
}

@media (max-width:760px) {
  h1 {
    font-size: 20px;
  }
  table{
    border: 2px solid gray;
    border-collapse: separate;
  }

  table caption {
    display: none;
  }

  table thead tr{
    display: none;
  }

  table, tbody, tr, td, tfoot{
    display: block;
    width: 100%;
    padding: .5em;
  }

  table tr{
    margin-bottom: 20px;
  }

   table td {
    text-align: right;
    padding-left: 50%;
    word-wrap: break-word;
  }

  table td::before {
    content: attr(data-title) ": ";
    display: float;
    word-wrap: break-word;
  }

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

An appealing and responsive table

Semantic HTML can be of great benefit when applied in data tables as it plays a vital role in enhancing the accessibility, structure, and readability of the table on web pages. Some important benefits of this semantic HTML are;

  • It is used for creating Responsive Table Designs

  • It helps enhance the clarity and structure of data tables.

  • It contributes to better SEO and makes writing a lot easier.

  • It helps in enhancing User Experience.

Learn how to create responsive data tables using only HTML and CSS

Utilizing the Summary Attribute

The summary attribute is used to provide a brief description of a table’s purpose and structure. This attribute comes in handy for people with disabilities who read and comprehend tables primarily through the use of assistive technology like screen readers.

The summary attribute is usually placed inside the table tag.

Example;

<table summary="A comprehensive list of students in grade 6">
  <!-- table list goes here -->

</table>

Leveraging ARIA Attributes

The ARIA set of HTML attributes helps make web content more accessible for users with disabilities. ARIA stands for Accessible Rich Internet Applications. These attributes provide extra data that assistive technologies, especially screen readers, can use to better interpret and navigate web pages. The goal is to improve the web browsing experience for people who rely on these technologies.

One popular Aria attribute for defining particular functions of table content is the role attribute. This attribute improves accessibility by giving more details about the functions of table elements, making it easier for users with disabilities to understand and navigate table layouts.

The role attribute can be used for defining columns, rows, th, body, etc.

Example;

<!-- Defining Table Headers-->
<thead>
  <tr>
    <th role="rowheads">Month</th>
    <th role="rowheads">Salary</th>
    <th role="rowheads">Expenses</th>
  </tr>
</thead>

<!-- Defining Table Body-->
<tbody role="rowgroups">
  <tr>
    <td data-title="Month">January</td>
    <td data-title="Salary">$550</td>
    <td data-title="Expenses">$250</td>
  </tr>

Some other ARIA attributes can be used as well to improve the accessibility of data tables, ensuring a better experience for disabled users who rely on assistive technologies. Some of these attributes include;

  • aria-label: This provides a label or description for an element. This label can be included in a table, row, column, or cell.

  • aria-sort: This indicates the sorting order of a column in a table. It can have values like “none”, “ascending” or “descending.”

  • aria-colindex: it helps specify the index of a cell within the column of a table.

  • aria-rowindex: it can be used to specify the index of a cell within the rows of a table.

  • aria-readonly: This attribute indicates whether an element is a read-only text or not.

Color Contrast for Readability

Color contrast is one of the essential factors to consider for readability, especially for individuals with visual impairments or color vision deficiencies.

Tools like WebAim, colors, Accessible WEB, etc. can be helpful to test and improve the color contrast of data tables.

Alt Text for Image Accessibility

Alternative text, also known as Alt Text, is a vital accessibility feature that ensures that information is conveyed effectively to users. In most cases, it is used alongside img tags to effectively convey information about particular images whenever the image fails to display on the web page.

Example;

<body>
<table>
    <caption>Monthly Expenses</caption>
    <thead>
      <tr>
        <th>Month</th>
        <th>Salary</th>
        <th>Expenses</th>
        <th>Picture</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-title="Month">January</td>
        <td data-title="Salary">$550</td>
        <td data-title="Expenses">$250</td>
        <td data-title="Picture"><img src="food.png" alt="Upward trend icon indicating increased revenue"> </td>
      </tr>

...

What You Have Learned

In this article, you have learned that tables are a very important way of passing information and explaining the context for a better understanding of a web page. But, in most cases, tables get hard to read and understand whenever they are disarranged.

In addition, accessibility is one of the most important factors to consider when creating a website, as it ensures that people with diverse limitations can navigate, understand, and interact with the website effortlessly.

The ARIA attributes are intended to make web content more accessible, particularly for users with disabilities. By giving assistive technologies like screen readers additional data, these attributes help improve the way web pages are interpreted and navigated.

So many ARIA attributes like aria-label, aria-sort, aria-colindex, aria-rowindex, aria-readonly, can be used to improve the accessibility of data tables and ensure a better experience for disabled users who rely on assistive technologies.

Your Next Steps

Just in case you still have trouble with data tables, check out Purecode.ai custom-built CSS components

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.