The Art of Building Tables

Designing tabular content no longer needs to be an unpleasant job. With the Xidipity table builder tool the effort becomes a creative, artistic exercise with numerous design choices.

HTML tables are a web development tool primarily used to display data which can be rendered in a grid. Before the invention of grid controls is was also used as a formating tool. As an example, Xidipity uses a table to create a two column display even though the theme uses and supports the “flex-grid” control. The primarily reason for this is the HTML table is better supported by the TinyMCE editor and the results are the same.

 

The design language of the Xidipity table is a tic-tac-toe format as displayed below. The result is contemporary and displays well.

Item 1 Item 2 Item 3
Item 4 Item 5 Item 6
Item 7 Item 8 Item 9

 

Challenges

Responsive

By default tables are not responsive. If your table has nine columns it has nine columns on all displays. I find a table with data elements about four characters in width will fit approximately nine columns on a smartphone in portrait mode. Add more columns or more data and the design falls apart on this device. In addition, if the columns are customized by moving the column divider, the table becomes fixed width and will very likely not work on mobile.

 

Missing Headers

The default table design is missing headers. While it is not brain surgery, you will have to get your hands a little dirty to add customizations. 

 

Lesson

Create a 3×3 table with a header and subtitle

This is a popular layout but this use case certainly does not cover every option.

 

  1. Place your cursor at the place where the table will be inserted
  2. Click the Table ( grid_on ) dropdown from the menu toolbar
  3. Select “Table” and then hover the pointer over the grid boxes until you have a 3×5 grid selected
    Hint: Grid cells will darken when selected
  4. Click to insert
  5. Highlight 2nd row
  6. Click the Table ( grid_on ) dropdown from the menu toolbar
    1. Select “Cell” and then “Merge Table Cells
  7. Enter data elements
    • row 1 – Header, Header, Header
    • row 2 – Subtitle
    • row 3 – cell 1, cell 2, cell 3
    • row 4 – cell 4, cell 5, cell 6
    • row 5 – cell 7, cell 8, cell 9
  8. Highlight 1st row
  9. Click the Table ( grid_on ) dropdown from the menu toolbar
  10. Select “Row” and then “Table Row Properties
  11. Set “Row Type” to header
  12. Select “Advanced” Tab
  13. Set “Background Color” to #eeeeee
  14. Highlight 1st row
  15. Select font weight ( format_bold ) dropdown and select normal weight
  16. Click the 2nd row
  17. Select “Align Center” from the alignment dropdown
    Hint: The word “Subtitle” should now be centered
  18. Click the Table ( grid_on ) dropdown from the menu toolbar
  19. Select “Row” and then “Table Row Properties
  20. Set “Row Type” to header
  21. Select “Advanced” Tab
  22. Set “Background Color” to #f5f5f5

 

Header 1 Header 2 Header 3
Subtitle
Item 1 Item 2 Item 3
Item 4 Item 5 Item 6
Item 7 Item 8 Item 9

 

Gradient Headers

Another common design for tables is to use a gradient background for the header.  A collection of gradients is available on the the gradients page for your use.

 

Lesson

Table with Gradient Header
  1. Create a table by repeating steps 1 – 21 from above
  2. Open the Xidipity Gradient Palette
  3. Scroll down to the Purple Haze gradient snippet
  4. Highlight the snippet
  5. Copy to the clipboard
  6. Click the Table ( grid_on ) dropdown from the menu toolbar
  7. Select “Row” and then “Table Row Properties
  8. Select “Advanced” Tab
  9. In the Style textbox paste the clipboard contents
  10. Click OK
  11. Highlight 1st row
  12. Select ( format_bold ) dropdown and select “Normal” weight
  13. From the ( format_color_text ) font colors dropdown, select White

 

Header 1 Header 2 Header 3
Subtitle
Item 1 Item 2 Item 3
Item 4 Item 5 Item 6
Item 7 Item 8 Item 9

 

Skill Level
          

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *