Adding and formatting tables in Help Center articles

Have more questions? Submit a request

38 Comments

  • Géraldine Peyre
    Comment actions Permalink

    What are we supposed to enter in border? A color? A format? Anything else?

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Hi Geraldine - 

    Typically, you would enter how many pixels thick you wish for the border to be, so it will be a numeric value. 

    0
  • Janet Julian
    Comment actions Permalink

    Is there any way to format a particular cell (rather than the whole table) aside from diving into the html?  For instance, if I want to provide a background color for a header row or highlight specific rows of a table with a background color?

    0
  • Alexander Popa
    Comment actions Permalink

    Hi Janet! 

    This can be done either by amending the table's cell properties - by accessing the Advanced tab, or by editing the HTML code of the article.

    I hope this helps!

    0
  • Janet Julian
    Comment actions Permalink

    Thanks Alexander, it did a bit.

    Another question ... when selecting font color it doesn't allow me to pick white.  If I'm using a dark background I like to use a white font.  Is there a way to make it white?

     

    Thanks,

    Janet

    0
  • Klara Audren
    Comment actions Permalink

    Hello Janet, 

     

    You would need to change the font color in the CSS in the advanced tab or acessing the HTML code of the article.

    0
  • Katie Novack
    Comment actions Permalink

    How do I make the table borders show?

    0
  • Vladan Jovic
    Comment actions Permalink

    HI Katie, This one should work.

    Just copy and paste this code at the end of your Help Center theme CSS file.

    .article-body table td {
    border: 1px solid;
    }

    Let us know how it goes. :) 

    0
  • Marie O'Brien
    Comment actions Permalink

    Hi,


    How do we make the tables centred? I've got most of the other formatting as I want it now - but struggling on making the table centred in the article. My figures etc all centre correctly using the text alignment item

     

    Thanks

    Marie

    0
  • Fabien RIC
    Comment actions Permalink

    It would be useful to be able to specify a name of a CSS class in the properties of the table (or row / or column or cell...).

    We would then just have to define the CSS classes in the theme of the help center.

    It would allow to have several consistent styles across the theme center, while allowing articles authors to focus on the content and not how it will be rendered. Moreover, we could flag some cells with a different class name, to underline important information (change background color for exemple).

    0
  • Jessie Schutz
    Comment actions Permalink

    Hi Fabien! That's really great feedback!

    If you don't mind taking a couple minutes, it would be great if you could add your suggestions to this thread in our Product Feedback topic!

    0
  • Fabien RIC
    Comment actions Permalink

    Done

    0
  • Kathleen Hunt
    Comment actions Permalink

    The table formatting controls have changed. Please update this article so we know how to change the color of rows/columns and complete other Advanced features that are not longer listed. 

    0
  • Jennifer Rowe
    Comment actions Permalink

    Thanks for letting us know, Kathleen! We'll get it updated soon. Appreciate the heads up.

    0
  • Lateesha Clark
    Comment actions Permalink

    Hey folks. Is there any way to freeze rows in my table? My table has a lot of information, so I want my header row to remain available while a user scrolls through the rest of the table/article.

    0
  • Rob Stack
    Comment actions Permalink

    Hi there, I've updated this article to reflect the new UI. Thanks very much for pointing this out! Additionally, I've made a number of changes to the article that hopefully make it easier to follow. Once again, we very much appreciate this great feedback!

    0
  • Sean Nelson
    Comment actions Permalink

    Is there a way to create sortable tables? It would be great to allow our users to sort the data by whichever column they want it to be sorted by.

    I have tried entering the applicable html configurations and even though I have allowed "unsafe" html, it will still not allow the sorting to work.

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Sean,

    Any chance you could provide the code you're using to allow sortable tables? While we're limited on what we can assist with on our end at Zendesk, that may help other community members jump in and offer up some guidance.

    Thanks!

    0
  • Alok
    Comment actions Permalink

    I had an old article with table formatting which was available as on October 2018. I updated the table formatting on the article using the new features which this article explains. Since then everytime I save the article a number of paragraph breaks are getting inserted in the article..

    For example a text like

    <p>
    SOME RANDOM TEXT
    </p>
    <p>
    MORE RANDOM TEXT
    </p>

    is getting changed to

    <p>
    SOME RANDOM TEXT
    </p>
    <p> </p>
    <p>
    MORE RANDOM TEXT
    </p>

    Please help.

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Alok,

    We will most likely need to take a look at a few article examples to determine the cause here. I'm going to generate a ticket on your behalf and pass this over to our Customer Advocacy team.

    You'll receive a follow-up email shortly stating your ticket has been created. Feel free to reply to that email if you have any additional information to provide.

    Cheers!

    0
  • Samantha Fransham
    Comment actions Permalink

    I am trying to set the height and width of my table. I followed the instructions to open the Table Properties and set my height and width. The problem is nothing changes for the table. The HTML code is updated as per my change but the table shows the same size as before. 

     

    The caption and border properties are updating as expected. I would love some insight into trouble shooting steps or known bugs.

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Samantha,

    This may be a silly question but did you go through the steps mentioned in our  Allowing unsafe HTML in Help Center pages article to make sure your table renders properly? If you've already enabled the Display Unsafe Content option, then the issue may be with your Guide theme.

    In that case, you may want to get your developers involved so they can check your themes CSS and make sure that everything is set up correctly there.

    Let me know if you have additional questions for me in the meantime :) 

    0
  • Richard Hartley
    Comment actions Permalink

    Does the cell padding feature work or is it necessary to allow unsafe HTML for that?

    I have created some tables which look fine in edit mode but all the padding vanishes when you view the saved result in Guide and they look untidy with the text pressed up against the borders.

     

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Richard,

    When using the cell padding feature it will add the appropriate CSS/HTML to the source code of your article. In this case you'll want to enable the allow unsafe HTML option within your Help Center so you see those results in the published article.

    Let me know if you run into any issues.

    Cheers!

    0
  • Digna van Nielen
    Comment actions Permalink

    Hi Brett

    I experience the same issue as Richard and Samantha describe; in the editor everything looks okay but once published there is no padding or spacing. Also the width of the cells disappeared. The "allow unsafe HTML" option is disabled in my environment. We use a copy of the Copenhagen team (no changes - only two extra css classes but nothing with tables).

    The advanced settings as described above don't appear in my table editor - it looks like this. Are the pictures in this article outdated, or perhaps my Guide environment needs to be updated? Either way, I hope you can help :)

     

    Best, Digna

    0
  • Jessica Hoffman
    Comment actions Permalink

    Hi All,

    I'm having the same issue Digna and Richard have described. I have allowed unsafe HTML, and the only property that does not appear to be carrying over successfully from the Editor page to the Published version is the cell padding. 

    I look forward to figuring this out. Thanks!

    1
  • Melody Quinn
    Comment actions Permalink

    I am also having the same issue with the cell padding not publishing. 

    1
  • Brett - Community Manager
    Comment actions Permalink

    @Digna, Jessica, and Melody, it's possible that your Guide CSS is overriding the cell padding properties you're configuring in your article. Could you try the following workaround to see if the padding displays correctly?

    1. Click on a cell, then click Table → Cell properties → Advanced

    2. Then on the Style box, type in padding: 5px; (if you want to add a padding of 5 on your cells).

    You'll most likely need to do this for each of the cells you have in your article which could be a bit tedious. The other option would be to edit your Guide CSS to adjust the padding.

    Let me know if you run into any issues with the above.

    Thanks!

    0
  • Digna van Nielen
    Comment actions Permalink

    Hi Brett,

    Thanks for your help. There is no "Advanced" for either the Tabel nor the Cell properties in my Zendesk... 

    Best, Digna

    0
  • Richard Hartley
    Comment actions Permalink

    @Brett - I enabled the allow unsafe HTML option, as suggested.   Unfortunately, it made no difference to the padding issue.  I am using the standard Guide Theme with no modifications. 

    I also tried your suggestion of using the Style box, but this too made no difference.

    0

Please sign in to leave a comment.

Powered by Zendesk