Data Table with CSS – How to Tame

Data Table with CSS – How to Tame

A data table can be a pain to work with, perhaps comparable to herding cats or taming a lion.  Tons of similar-looking, heavily-nested markup can be viewed as completely inflexible. One of the biggest problems I ever encountered was working on a particular company, whose content was almost exclusively data tables, it involved making tables’ cells line up nicely not only with each other, but also with those cells in other tables on the page.

Example of a data table with css:

The problems

There are a lot of headaches we encounter when building tables, and I imagine most of you reading this article will nod along to every point I make; it will be something that will have annoyed us all at some point or another. What this particular (and very specific) problem boils down to is trying to consistently format, size and align complex data layouts across multiple tables. Imagine a financial report; loads of tables of data with differing numbers of cells and columns that—from a purely aesthetic perspective—need to line up in some neat, coherent fashion. Achieving this is made very difficult by a number of different factors…

Cell widths

Tables lay out their cells—by default—in a rather unusual, almost haphazard way. There seems to be no rhyme or reason behind how and why they are rendered at the widths they are, which leads to columns and cells of differing sizes.

Spanning cells

In order to have cells span several columns (and rows, but that doesn’t pose the same problems), we have to use the colspan attribute. To have a cell spanning two columns we would write <t[h|d] colspan="2">. These are often unmanageable, and it can be confusing to remember what all your colspans should add up to.

Knock-on effects

Resizing one cell in one row can, and usually will, affect the layout of the entire table. This is is because all cells’ boundaries have to line up with the boundaries of the rest of the row and column in which it sits. You can’t just change the width of one cell, you have to change them all. This means that, for example, spanning one cell across xcolumns might mean having to update a whole load more colspans elsewhere in thetable.

Tables next to tables

The above problems are further compounded when you begin laying out multiple different tables on any given page. In Sky Bet world, this was pretty much every page. One table’s rendered layout might be vastly different to the tables above and/or below it, creating an unsightly mess of misaligned columns. You might have a tablewith no colspans above a table with some colspans, above a table with lots of awkward colspans. You might have a table with lots of cells above a table with very few. You might have any combination of amounts of cells and amounts of colspans. It all gets very hairy, very quickly.

Solution

I’ve come up with what I feel is a solid, very pragmatic solution.

There are two parts to solving this problem. Firstly we need to standardize the number of cells in every table, and then we need to force these cells to all be the same width. Think of this as a grid system for tables.

24 cells

Think about page layouts that adhere to a grid system; you might have a 24 column grid, but your page might only have two main columns which span, say, 16 and eight columns respectively. You can’t see the 24 columns, but they’re there. You might then have a large footer broken into three columns of eight (again, adding up to 24).

We need to apply this model to tables; we shall give all tables 24 columns, and then use a generous amount of colspans to knock our cells through into each other, into more useful layouts. Now every table we build will be based on a 24 column grid which will, firstly, make everything more consistent, and, secondly, it will make our maths much simpler. We just need to make sure every row’s colspan values add up to 24 every time.

This does mean that every cell in the table now has to carry a colspan, but as I said, this solution is a pragmatic one.

The reason we pick 24 is because it can take halves, thirds, quarters, sixths, eighths and twelfths; we can make a lot of layouts if we have 24 columns to play with.

Now, we would write this snippet:

...
    <th>Column one</th>
    <th>Column two</th>
    <th>Column three</th>
...

as:

...
    <th colspan="8">Column one</th>
    <th colspan="8">Column two</th>
    <th colspan="8">Column three</th>
...

For all this is more markup, it does mean we can begin to standardise our tables’ layouts so that multiple tables on the same page can share a lowest common multiple and are now able to be aligned to one another.

The short version of this section is basically: we are setting up a grid system for ourtables.

Equal width columns

It’s all well and good that all our tables have the same number of columns, but that doesn’t escape the fact that browsers will still render every table differently, and that the size of these cells will always vary. There’s no point having a 24 column table-grid-system if each column is a different width. Thankfully, this is the easiest part of the puzzle to solve and, probably, the most interesting part of this article: table-layout: fixed;.

Now it’s time to tame a data table with css.

There is a little known, and even less used, CSS property called table-layout. table-layout basically tells a browser how to render the columns in a table, and is, by default, set to auto. auto means that the browser will automatically render the cells in a table based on their width, which leads to the differently and inconsistently sized columns.

Interestingly, table-layout: fixed; is the backbone of my pure CSS, equal-width tabs.

Setting table-layout to fixed however, tells the browser to render every cell the same width as each other. Equally-sized table cells right out of the box!

Combining the two

By giving our tables a common grid system of 24 columns, and ensuring these columns are all of equal width, we can begin throwing together all manner of layouts.

I would propose that you opt into the table-grid-system via a simple helper class, perhaps .table-grid:

.table-grid {
    table-layout: fixed;
}

Every time we want to build a table to a fixed and consistent layout, we simply invoke the grid and lay it out to that.

Hopefully now you’ve gained an edge and can control a data table with css on your project(s).

Combine the Power of Data and Design to Maximize Results For Your Website

Combine the Power of Data and Design to Maximize Results For Your Website

In today’s digital era, having an impactful and compelling website is a critical component for any business or organization. A useful site that connects with your audience instills trust, screams authority, and drives action, can mean the difference between remaining relevant and competitive or falling silently to the wayside.

Despite the critical importance of websites in today’s competitive landscape, many web designers find their creations falling short on the performance matrix, under-delivering on KPIs and leaving those in charge scratching their heads for an answer.

Simply put, sometimes innovative layouts and stunning visuals aren’t enough. Lack of data in the design process can create a disconnect between what “works” and what looks or feels appealing.

The marriage of data and design makes for a compelling approach to data-driven design processes and can act as a guiding force for strategizing and implementing site architecture and design elements that not only look great but meet or exceed performance expectations.

Market Research – Where it all Begins

In life, as in business (and web design), having a clear direction and goal in mind from the outset will make for a predictable journey to that end.

If one does not know to which port one is sailing, no wind is favorable

~ Seneca

Market research is all about understanding your audience, analyzing the competition and competitive landscape, and looking introspectively inward to identify strengths, weaknesses, opportunities, and threats.

MARKET DEMANDS

Your “market” represents the gameboard, along with all of its components and pieces upon which your design strategy executes. As it relates to market demands, what elements are vital, required or expected of your design and website?

Examples:

  • Visible accreditations or licensure;
  • Prominent reviews and ratings;
  • Specific contact or support channels;
  • Information such as guides or training materials;
  • Product/service visuals or demonstrations;
  • Transparent pricing.

Market demands vary and will be particular to your specific industry, geographic location, and other factors.

COMPETITION / COMPETITIVE LANDSCAPE

You know what they say: Keep your friends close and your enemies closer. While you don’t need to become best friends with the competition, monitoring their activities, strategies, updates, offerings and other prerogatives can provide you with insightful and useful information.

Competitive data can be used to leverage the time, resources and hard work of other brands to identify those activities or strategies that either perform well or fail in the market.

By doing so, you can learn from costly mistakes, while benefiting from winning concepts already battle-tested in the market and proven to either work.

Further, understanding the competitive landscape in its totality will help you understand what you’re up against, and can help you formulate ways to uniquely position your design in the market such that it stands out among the sea of competitors vying for the same business.

TARGET AUDIENCE / CUSTOMER AVATAR

Without a deep understanding of your target audience, any web designer is prone to missing the mark badly, failing to connect with, engage, inspire action, and meet the needs of their visitors.

Considerations with regards to your audience should include both demographic and user behavior data.

Demographic Data to Consider:

  • Gender
  • Age brackets
  • Income
  • Geographic locations
  • Family size
  • And other relevant data
  • Behavioral Data to Consider:
  • Needs and wants
  • Pain points or complaints
  • Issues/problems
  • Desired solutions
  • Likes and preferences
  • Purchase habits
  • And more…

The specific types of behavioral and demographic data that will be most useful and relevant to your design will be mostly dependent on your brand, vertical/niche, offerings, and other particulars.

PRODUCT / SOLUTIONS AUDIT

Sometimes it’s hard to see the forest for the trees as it were. Taking a step back and assessing your product/solutions and other offers can provide perspective on necessary design elements, positioning, and framing that can help turn a non-performing offer into a critical source of revenue.

Utilizing information uncovered in the previous steps, cross-reference your offers and take a hard look at whether or not your products or services meet market and user demands, needs and want.

In what way do your offers stand out (or in what ways can you make them stand out) from those offered by the competition. Utilize this data to formulation unique positioning and strategic approaches to incorporate your offers’ USP or value proposition.

Keyword Research

Keyword research is a vital component of the design process, and will largely dictate how information is architected, organized, presented and delivered on the site.

Approach keyword research from a bottom-up or top-down funnel approach.

Necessary components of keyword research include:

  • Keyword competition;
  • Keyword intent (buyer vs. research vs. informational, etc.);
  • Stage of funnel each keyword targets;
  • Organization of content for search engines and user experience;
  • Link modeling for internal link and ranking strategies.

Types of Content May Include:

  • Sales/landing pages;
  • Service/product pages;
  • Resources, guides, tutorials;
  • Informational and supportive blog posts or articles;
  • Information Architecture.

Information architecture is essential for user experience, search engine optimization, and conversion rate optimization. Utilizing data from the previous market and keyword research phases you can begin to optimally architect information in a way that is conducive to better performance.

ELEMENTS TO INCORPORATE INTO YOUR DESIGN ARCHITECTURE

Site Structure: Determined by both market and keyword research, your site’s structure can be first mapped out by using an organizational chart for ease of visualization.

URL Mapping: This step, while mostly administrative and somewhat tedious, involves the creation of each URL structure optimized for both readability by users and optimized for search engines to understand. Once created, assign designated keywords to their respective URLs.

Page Flows: An understanding of user behavior and the ideal buyer journey should also shape how information is structured and organized, helping both users and search engines to “flow” seamlessly through information in a way that answers their questions and solves their problems with the least amount of “friction.”

Value Propositions: An understanding of the problems and pain points facing your target audience will enable you to architect, draft and present unique value propositions tailored to each individualized problem or issue.

Topic Clustering: Once you’ve mapped out your keywords, pages, and content, group or “cluster” those topics that are semantically relevant to each other. Clustering your content can help with search engine categorization and relevancy metrics.

Interlinking: Once mapped out with pages and content clustered, seek out opportunities to link between related pages.

Closing Thoughts

Tailoring design to user needs and expectations is never far from any designer’s thought process, yet knowing exactly which strategies or tactics have the best chance of performing well is often unclear. By utilizing a data-driven decision-making process, web designers can leverage information in a way that helps them formulate a plan tailor-made to perform and exceed expectations. Designs using data versus personal opinion, experience improved levels of engagement, higher conversions, enhanced user experience and overall performance.

As a professional web designer, you have a responsibility to both the users, and to the organization for which you are working, to use and implement all available tools to deliver the best end product possible. Data is one of those tools and one in which there is an excellent potential for success when used correctly.

references: canva, webdesignerdepot, klipfolio