HTML Tables

Designing tabular content no longer needs to be an unpleasant job. With Xidipity and the TinyMCE WordPress editor it can become a creative, artistic, exercise and is as interesting as other web design areas.

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.

 

Xidipity supports a tic-tac-toe table format as viewed here. The result is contemporary and displays well. 

 

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 while in the editor, 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. 

 

Use Case

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 ” dropdown from the editor menu bar
  3. Select “Table” and then hover the pointer over the grid boxes until you have a 3×5 grid selected (screenshot)
    1. Grid cells will darken when selected
  4. Click to insert
  5. Enter data elements (screenshot)
    • 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
  6. Highlight 1st row
  7. Click the “Table ” dropdown from the editor menu bar
  8. Select “Row” and then “Table Row Properties” (screenshot)
  9. Select “Advanced” Tab
  10. Select “Header” from Row Type dropdown
  11. Click Ok
  12. Highlight 2nd row
  13. Click the “Table ” dropdown from the editor menu bar
  14. Select “Merge Table Cells” (screenshot)
  15. Highlight the word “Subtitle”
  16. Click the align center icon from the editor menu
  17. Highlight 2nd row
  18. Click the “Table ” dropdown from the editor menu bar
  19. Select “Table Cell Properties” (screenshot)
  20. Select “Advanced” Tab
  21. Enter “#F5F5F5” as background color
  22. Click Ok

 

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

 

Gradient Headers

Another common design for tables is to use a gradient background for the header. The following are some examples for your consideration. A collection of gradients is available on the the gradients page for your use.

 

Create Purple Gradient Header
  1. Open gradients page
  2. Scroll down to “Purple”
  3. Highlight the snippet below the title
    Hint: snippet begins with the word “background”
  4. Copy to the Clipboard
  5. Highlight 1st header cell of table
  6. Click the “Table ” dropdown from the editor menu bar
  7. Select “Cell” and then “Table Cell Properties”
  8. Select “Advanced” Tab
  9. Paste clipboard into the Style box
  10. Apply gradient background by Clicking Ok
  11. Click the “A ” dropdown from the editor menu bar
  12. Style text by clicking white color patch
  13. Repeat steps 6-12 for the next two header cells

 

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

 

Leave a Reply

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