Demosphere Tip of the Week: Structuring Website Tables

Written by Heidi Snead on November 28, 2017. Posted in Best Practices, Demosphere Features.

Website tables are a great way to organize schedules, standings, lists of forms and documents, coach and player profiles and more. Creating tables in the Demosphere website solution has never been easier! This week we’re sharing tips on how to effectively use the Article table tools for both Desktop and Mobile viewing.

Creating Tables 101

Create a table directly in the Article’s Story Content Interface

Locate the table icon in the website’s editor tool panel. This will open a dialogue where you can set up the initial table structure. Not sure what size table you’ll need? Don’t worry, you can always go back and add or remove attributes. See the section below on formatting tables for more information.

Setup your essential table properties:

Set up the number of rows and columns you’d like to start with
Indicate if you want your table to have any borders. The larger the number, the thicker the border. Entering a 0 will leave your table without borders around the cells
Set the position you want the table to appear on your Article (Left, Center, Right)
When you create tables, the default width will be set to 500 pixels wide. We’ll cover optimal sizing in the formatting section below

With a basic structure in place, you can now work on entering your information in each table cell. Click in each individual cell to type in your information:

Formatting Tables

Now that you have your table content all set, it’s time to focus on formatting and styling the display:

You can highlight entire columns and rows, or individual cells to apply formatting to your text. Use the website editor tools to place links, images, modify general text size, fonts, colors, alignment.

For more advanced table formatting, simply right click on the table and select from one of the following options:

Cell: Use this menu option to insert new cells in thetable, delete highlighted cells. Select Cell Properties to apply a background color to one or many cells in a row or column, or set the alignment of the text within the cell
Row: Use this menu option to insert or remove entire rows into an already formed table
Column: Use this menu option to insert or remove entire columns into an already formed table
Table Properties: Use this menu option to adjust the border size, table width, or table alignment on the page or add a caption to your table

Optimizing Tables for Mobile Viewing

When a table is initially created, we reviewed that there is a default width of 500 pixels set. To ensure that the table responds to all screen sizes (all desktops, tablets, mobile phones), it’s best practice to set this width to 100%.

This forces the table to always span 100% of the width of the screen size it is displayed on.

Here is an example of a table with 4 columns that has a set pixel width of 500 px on mobile phones. Notice how the 4th column is not visible in the view.

Now, the same table has the width set to 100% which is now fully responsive on mobile devices. Notice how the text within the cells wraps to the 2nd row if necessary.

At a certain point, tables can become too complex to fit within a mobile screen view. The wrapping of text and resizing of cell widths on tables that have 100% width can only work to an extent and the W3C.org recommendation for making tables responsive is place a scroll bar beneath the table. This allows users to scroll back and forth on very wide tables on their mobile devices. Watch out for this new feature in our November release!

One way to reduce the need for scrolling is to keep the tables simple – for example, tables that need to convey a lot of information can be broken up into two tables stacked on top of each other.

Copy and paste a table from a document or spreadsheet (e.g. Google document and Microsoft tools)

The current website editor (CK Editor) allows for copy and pasting of tables from word or spreadsheets directly into the story content view:

Paste directly into the story content view:

Note: when pasting tables directly from a word document or spreadsheet, the website editor will preserve all copied formatting and ignore your site’s custom designed styling and formatting.

The recommended approach is to design your table directly in the website editor interface.

Table Alternatives

Not quite ready to dive into table formatting? Try these options:

Take a screenshot of your table and place as an image inside an article
Create a PDF of your word document and post as a link on your website
Post a link to a public Google Sheet within an article or as a link
Test it out! You can always create a ‘Pending Public’ view article on any page of your website to test out more advanced table formatting tools and options that will only be visible to website admins.

Demosphere actively monitors updates to the CK Editor tool and applies upgrades to the Demosphere website product as new updates are stabilized. Be on the lookout for more support related to the cell padding and spacing features as well as more intuitive media embedding.