HTML Table Styles

ArborRose
ArborRose Coach
in Cards, Dashboards, Stories

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?

image.png



** Was this post helpful? Click Agree or Like below. **
** Did this solve your problem? Accept it as a solution! **

Best Answer

  • Ashleigh
    Ashleigh Coach
    Answer ✓

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

    image.png
    image.png

    **If this answer solved your problem be sure to like it and accept it as a solution!

Answers

  • Ashleigh
    Ashleigh Coach
    Answer ✓

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

    image.png
    image.png

    **If this answer solved your problem be sure to like it and accept it as a solution!

  • Ashleigh
    Ashleigh Coach

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

    **If this answer solved your problem be sure to like it and accept it as a solution!

  • ArborRose
    ArborRose Coach

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

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • ArborRose
    ArborRose Coach

    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.

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • ArborRose
    ArborRose Coach

    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.

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • Ashleigh
    Ashleigh Coach

    @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.

    **If this answer solved your problem be sure to like it and accept it as a solution!

  • ArborRose
    ArborRose Coach

    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.

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • Dobbrunz
    Dobbrunz Member
    edited April 10

    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
    ArborRose Coach

    @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.

    image.png
    image.png
    image.png
    image.png

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

Categories