Displaying Tables within a Responsive Framework

When responsive design frameworks came along, the first thing they did was to dispense with absolute table structures and replace them with relative positional divs. This means that robust tables are slightly more difficult to create and manipulate / style within a responsive framework, than they ever were within tabular HTML.

The standard WYSIWYGs still have table formatting, but the scope of this is significantly diminished / limited - and in fact quite different considerations need to be made for responsive as you need to factor how your table will appear at diferent screen resolutions / break points.

You need to consider the lowest common denominator first really - in how will your table/s display on a relatively small portrait screen of a mobile phone. This largely means the highly complex table structures of old are out, and whatever you do needs to be somewhat simplified for the current paradigm.

You have 4 main choices when deploying tables in responsive, as per the following:

1: WYSIWYG with % Columns

Affino uses the TinyMCE WYSIWYG editor, and those who used this for HTML sites will notice how a number of the styling settings / options have disappeared in the current iteration. Yet it is still fairly straightforward to do basic tables, as long as they are relatively simple. It obviously depends on the context of a table and in particular the column headings and content, if similar to the table in the above visual- you can probably run to as many 7 columns and still comfortably display them on a mobile screen. If however there are long column titles and / or the content is made up of words, then your limit is probably only 4 or 5 columns. If table is using German or Icelandic compound words, then columns will be even wider.

I fairly recently completed the Affino System Security Rights help guide with a series of 4-column tables, which Affino Customers can view here: Security Help Guide

Any styling can be fiddly though, as can entering column and row attributes - in many ways this is easier with the ’view code’ function on TinyMCE where you can just edit, copy and paste the raw HTML - much quicker than right-clicking and setting variables per individual cell.

2: WYSIWYG with Fixed Pixel Dimension Columns

If the table is obviously going to be longer than 4-7 columns, then it’s not worth doing the table as responsive, as it will try to flow down within the space - meaning that long rows are reduced to stacks of columns - and you can no longer compare parallel rows as before (which is often the main purpose of tables). The solution here is to craft some CSS to enable a horizontal scroll bar - so that the table is entered fully as a static container but you can scroll right and left to view the entire table within the smallest viewport - with the parallel rows in tacts. In terms of site builds, this will be an additional cost typically. The above table in the visual is set up in this manner, with a horizontal scroll bar at its base.

3: SVG Scalable Graphics

Recent years have brought us Scalable Vector Graphics or SVGs - which stay sharp and crisp - big and small. Meaning that in many instances the easiest solution is often just to use a vectorised format of the whole table, numbers and all. You can guarantee quality and uniformity of display across all devices, with the minimum of pain. Do note that larger and more complex graphs will simply have too much density of information at the smaller sizes - so won’t be practically legible. So SVGs don’t solve every scenario. If you want a fully interactive table with lots of columns, it’s likely it will need to be custom developed.

4: Custom Code

For complex and tabbed tables, these have to be custom coded, and will involve a lot of testing across platforms and devices. Certainly the most expensive and time-consuming route to go, but if you want customers to be able to click on and select actual numbers from the table, then your only workable option would be a custom coded table. Obviously maintenance of these can be costly too - depending on how this has been scripted. You could also consider deploying a more application-centric solution whereby a dedicated interface is created to handle tables, or the source data can be uploaded via CSV / spreadsheet.

The core styling would need to be embedded into the framework of the display interface, and there would be obvious limitations in this approach too. So it really depends on how much you want this sort of thing, and how much you are willing to pay to get it.

Quick and Dirty Approach

The methodology I tend to apply is that if the Table format is simple enough (few enough columns), I will do it on the WYSIWYG with % columns applied, otherwise I will make use of SVGs. If the source table is to too big and too complicated for a small screen, I will simply abstract / extract key points / data comparisons into an executive summary and leave the table out entirely. There are of course other variations available - changing formats at different breakpoint sizes for instance, but these are overly complex and more time-consuming to put into place and maintain.

When Things Go Wrong

For examples how tables can cease to be functional at lower breakpoint sizes. the Icelandic Power Station resource - Veitur - gives a useful lesson. If you view on desktop and simply reduce you browser width to a small mobile phone screen equivalent, you can see the column stacking issue I mentioned above, which to all intents and purposes renders the primary table display format useless.

Legal

Cookie Settings

Custom ID

Privacy Preferences

Your Privacy

Strictly Necessary Cookies

Performance Cookies

More Information

What are Cookies?

Cookies are tiny text files that are placed on your computer, mobile phone, or other device, and help provide you with the best experience we can. They are used by most websites to help personalise your web experience. Some features will not function if you do not allow cookies.

Our cookies help us:

Make our website work as you’d expectSave you having to login every time you visit the siteRemember your settings during and between visitsImprove the speed/security of the siteAllow you to share pages with social networks like TwitterContinuously improve our website for youGranting us permission to use cookies

If the settings on your software that you are using to view this website (your browser) are adjusted to accept cookies we take this, and your continued use of our website, to mean that you are fine with this. Should you wish to remove or not use cookies from our site you can remove them, however doing so will likely mean that our site will not work as you would expect.

It is only once you sign up and provide consent that the system will look to personalise the experience for you with best matching content and other recommendations.

Which cookies do we use and why?

Across the site we use the minimum number of cookies, with no third party analytics tracking, e.g. Google Analytics. There are however some key social, audio and video embeds which are used on the site and these in turn use cookies, we recommend that you use privacy and ad blocking plugins to minimise the number of third party cookies, none of which are required for affino.com.

1. Strictly necessary

Strictly necessary cookies are essential in helping you to move around our websites and use their features, such as accessing secure areas of the website and shopping. These cookies don’t gather any information about you that could be used for marketing or remembering where you’ve been on the internet.

We use these Strictly Necessary cookies to:

Remember things like information you’ve entered on order forms when you navigate to different pages in a single web browser sessionRemember the goods and services you ordered when you get to the checkout pageIdentifying you as being signed in and keeping you logged in throughout your visit so that you don’t need to sign in each and every time you visit.Using our site indicates that you accept the use of ’Strictly Necessary’ cookies.

Accepting these cookies is a condition of using the website, so if you prevent them we cannot guarantee how our site will perform for you.

Here is a list of the cookies we have defined as ’Strictly Necessary’

Host: affino.comCookie names: JSESSIONIDPurpose: To keep track of user sessions on the site and identify your user session on the server level.

These cookies allow websites and applications to remember choices you make (such as your user name, language or the region you are in) and provide enhanced, more personal features. They do not gather any information about you that could be used for selling advertising or remembering where you’ve been on the internet, but do help with serving advertising.

Some examples of how we do this include:

Remembering your preferences and settings.Show you when you’re logged in to the websiteSupporting social media components, like Facebook or Twitter (where a website uses a plugin from these third party platforms, for example).Remembering if you’ve been to the site before so that messages intended for first-time users are not displayed to you.Remembering your search settingsMaking our shopping basket and checkout workRemembering if you have accepted our terms and conditionsUsing our site indicates that you accept the use of ’Functional’ cookies.

Accepting these cookies is a condition of using the website, so if you prevent them we cannot guarantee how our site will perform for you.

Here is a list of the cookies we have defined as ’Functional’:

None

3. Performance (analytical)

’Performance’ cookies collect information about how you use our website e.g. which pages you visit, and if you experience any errors. These cookies don’t collect any information that could identify you - all the information collected is anonymous and is only used to help us improve how our website works.

Some examples of how we do this include:

Provide statistics on how our website is usedSee how effective our adverts are (we don’t use this information to target adverts to you when you visit other websites)Provide feedback to partners that one of our visitors also visited their website. This can include details of any products bought. This lets our partners improve their website, but we don’t allow our partners to reuse this information for further advertisingHelp us improve the website by measuring any errors that occurUsing our site indicates that you accept the use of ’Performance’ cookies.

Accepting these cookies is a condition of using the website, so if you prevent them we cannot guarantee how our site will perform for you.

Here is a list of the cookies we have defined as ’Performance’:

None

4. Target or Advertising (3rd party)

’Targeting’ cookies are linked to services provided by third parties, such as ’Like’ buttons and ’Share’ buttons. The third party provides these services in return for recognising that you have visited our website.

An example of this includes:

Link to social networks like Facebook, who may subsequently use information about your visit to target advertising to you on other websitesWe use third party services provided by third parties like YouTube or Vimeo who may subsequently use information about your visit to target advertising to you on other websitesYou can control whether or not these cookies are used, but preventing them may stop us from offering you some services. All of these cookies are managed by third parties, and you may alternatively use the third parties’ own tools to prevent these cookies.

Here is a list of the cookies we have defined as ’Targeting’.

None

Third Party Cookies

Some third party content may be embedded in pages on Affino.com and these may have the ability to track and personalise your experience for the embedded content. Examples of third party cookies are:

Host: soundcloud.comCookie name: __utma, __utmb, __utmc, __utmzPurpose: Soundcloud can be used to share music and audio files. They use google analytics to capture visitor information

Host: youtube.comCookie name: PREF, use_hitbox, PRVISITOR_INFO1_LIVEEFPurpose: When you view a web page on your site with an embedded YouTube video, YouTube creates these cookies

Host: twitter.comCookie name: personalization_idPurpose: When you view a web page on your site with an embedded Twitter card, Twitter creates this cookie.

How you can control cookies

1. Browser controls

Most modern browsers offer you ways to control or block cookies. These browser controls will usually be found in the “options’ or “preferences” menu. For more help, you may take a look at the “Help” settings or review these website for more details - http://www.aboutcookies.org/Default.aspx?page=1

2. Ad cookies and targeting

You can find more information or turn off targeting by member companies at YourOnlineChoices UK http://www.youronlinechoices.com/uk.

About this policy

If our use of cookies changes, we will post the changes to this policy. Please check frequently as online data collection practices and our use of them continue to evolve. To contact us about this policy, you may email support@affino.com

This version of the privacy policy is effective as of Aug 1 2018

Strictly Necessary Cookies

Strictly necessary cookies are essential in helping you to move around our websites and use their features, such as accessing secure areas of the website and shopping. These cookies don't gather any information about you that could be used for marketing or remembering where you've been on the internet.

We use these Strictly Necessary cookies to:

Remember things like information you've entered on order forms when you navigate to different pages in a single web browser session

Remember the goods and services you ordered when you get to the checkout page

Identifying you as being signed in and keeping you logged in throughout your visit so that you don't need to sign in each and every time you visit.

Using our site indicates that you accept the use of 'Strictly Necessary' cookies.

Accepting these cookies is a condition of using the website, so if you prevent them we cannot guarantee how our site will perform for you.

'Performance' cookies collect information about how you use our website e.g. which pages you visit, and if you experience any errors. These cookies don't collect any information that could identify you - all the information collected is anonymous and is only used to help us improve how our website works.

Some examples of how we do this include:

Provide statistics on how our website is used

See how effective our adverts are (we don't use this information to target adverts to you when you visit other websites)

Provide feedback to partners that one of our visitors also visited their website. This can include details of any products bought. This lets our partners improve their website, but we don't allow our partners to reuse this information for further advertising