HTML Table Styles

ArborRose

I don't generally work with html table chart type, but I have a dashboard that needs borders and subheadings if possible. I am only interested in what I can control in html tables, I don't want to use bricks.

I can't find any web examples with fancy tables showing borders and headings such as the following. Can this be done with the chart type html table and if so, how?

Ashleigh

@ArborRose I have not seen this with HTML tables but another table chart type in Analyzer called Mega table just got a border feature.

Ashleigh

@ArborRose I have not seen this with HTML tables but another table chart type in Analyzer called Mega table just got a border feature.

Ashleigh

Pivot tables also have border options and you would be able to create sub headings by putting different fields in the Columns sections.

ArborRose

Mega Table should work just fine. Thanks. Any idea how to I could make subheadings?

ArborRose

Ashleigh - can I control the borders between specific columns? I need to create visual sections of three or four groups of columns. I'm not seeing that control with a Mega table.

ArborRose

None of these solutions work. A pivot table is inappropriate to my need. A mega table only lets me set the global style for verticals (as far as I can see). I need to set specific columns left and/or right borders so I can "section" the dashboard.

Ashleigh

@ArborRose The border feature is fairly new (couple months?) so that is good feedback to add to the idea exchange. Would an acceptable solution be to instead choose a color for the entire column instead of the border? That might be the only other way to establish some separation without going to a custom brick.

ArborRose

I tried background colors and hate the result. In this case I am trying to mimic an excel sheet. Without subheadings and borders, my Domo version isn't very readable. To differentiate columns, the descriptions get out of hand. This is such a basic html ability. I fail to see the usefulness of an html table that doesn't do html.

Dobbrunz

HTML tables offer a basic structure, the real magic in customization comes through the use of CSS. You can achieve a wide range of styles, from simple border lines to more complex designs involving subheadings and color schemes, all through CSS.

For borders, you can use the CSS border property to specify the style, width, and color of the border around table cells (td or th elements). To style subheadings, you might consider using the <th> element with CSS to differentiate it from regular table data cells, or even use the colspan attribute to span your subheadings across multiple columns for a clearer hierarchy.

I recommend exploring some examples to get inspired and see what's possible. CSS-Tricks has a comprehensive guide on styling tables, which covers everything from basic border styling to more advanced techniques that could help you achieve the look you desire for your dashboard.

ArborRose

@Dobbrunz - the problem I had was that I could not find an example using Domo. I was eventually able to find a way to do it using blank brick. See my code and example below. The result is good but the implementation is too much work.