Responsive Tables with Check Marks

April 8th, 2015

In 2007, I started a website called Schools for Theatre. Since I used to be an actor (my major in college was Musical Theatre), I decided to combine my theatre knowledge with my love of web design. At the time (and even still today), Schools for Theatre was the only website with information on colleges and universities that offered theatre degrees.

Needless to say (just take a look if you don’t believe me), the website, design-wise, is extremely outdated and in need of a major face lift. So in my spare time, I have been working on a complete redesign, as well as updating the back-end to Laravel (more blog posts to come on this one).

Back in 2007, responsive web design wasn’t a thing, so I am working to transform it into a website that is friendly to all screen sizes. One of the biggest challenges has been deciding how to convert data tables into responsive tables. These tables tell you which specific theatre degrees are offered at each school for each major. I created tables that use check marks to let you know which majors and degrees are available to you.

Screen Shot 2015-04-07 at 3.47.47 PM

My beautiful 2007-styled data tables on Schools for Theatre.

Let’s Make Some Responsive Tables!

I had some specific goals I wanted to accomplish with the re-design of these tables:

  • All tables must be responsive;
  • All tables would be in list form on small screens, and in table form on larger screens;
  • None of the tables would use images for the check marks (if possible);
  • I didn’t want to use fake tables. The tables couldn’t be lists marked up with CSS display: table;.

Step One: HTML

The trickiest part of the whole implementation was changing from a list of degrees on smaller screens, to moving those degrees to the <thead> and adding in check marks in each column’s <td>. The easiest way to make this work was using data attributes. Data attributes are used to store extra information about an HTML element, without having to add this information within the element’s tag.

<table>
    <thead>
        <tr>
            <th>Major</th>
            <th>AA</th>
            <th>AS</th>
            <th>BA</th>
            <th>BS</th>
            <th>BFA</th>
            <th>MA</th>
            <th>MFA</th>
            <th>PhD</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="major">Business</td>
            <td></td>
            <td data-checked="Yes" data-degree="AS"><span>Yes</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td data-checked="Yes" data-degree="MFA"><span>Yes</span></td>
            <td></td>
        </tr>
        <tr>
            <td class="major">Technology</td>
            <td></td>
            <td></td>
            <td data-checked="Yes" data-degree="BA"><span>Yes</span></td>
            <td data-checked="Yes" data-degree="BS"><span>Yes</span></td>
            <td></td>
            <td data-checked="Yes" data-degree="MA"><span>Yes</span></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Step Two: CSS

The first thing I had to do was make sure that the table looked like an inline list on smaller screens. Since we were using min-width media queries (coding from small screens to larger), I would need to change the table and it’s elements to display: block;, and then change them back to tables on larger screens. It was fun using display: table-header-group; on the <thead> tags, which was a new one for me.

The second step was changing the check marks to the actual names of the degrees on smaller screens, and back to check marks on larger screens. Another new CSS selector I had never used before came to good use: content: attr(data-selector);. Using this, I was able to pull the values of the data attributes in the HTML <td> tags, and use their values as the actual values in the lists on the smaller screens. Then, when I wanted to change back to the check marks on the smaller screen, I just changed the content value to the check mark entity.

[data-degree] {
    &:before {
        content: attr(data-degree);
    }
}

@media screen and (min-width: 550px) {
    [data-degree] {
        &:before {
            content: "";
        }
    }
  
    [data-checked] {
        &:before {
            content: "✓";
        }
    }
}

Step Three: Javascript

Oh wait, there is none. Pure HTML5 and CSS. I think in the past I would have used Javascript to switch out the degrees and check marks, but it seems that it works great just using CSS and data attributes.

Caveat: I have yet to try this out in screen readers, which will be the true test as to how well this works. I’ll be sure to report back once I do. In the meantime, if you try it, let me know what you think.

See the Pen Responsive Table with Check Marks by Barry Horbal (@MikesBarto2002) on CodePen.

Leave a Reply