You can add tables to your Help Center articles, and customize their properties, by clicking the table icon in the article editor toolbar, and selecting your table options. The table formatting options available depend on whether or not you are allowing unsafe HTML in Help Center pages.
This article contains the following topics:
Adding a table to an article
To add a table to an article
- Open the article in the Guide article editor, and place your cursor where you want to add the table.
- In the article editor toolbar, click the table icon:
- In the table formatting menu, move your cursor over the grid to select the number of rows and columns you want to include in the table:
- Click the grid to add the table to your article.
Once the table is added to your article, you can add content by clicking inside a cell and inserting text or images. You can also format the width, height, text alignment, and other table properties.
Additionally, you can reopen the table formatting menu to change cell properties, add and remove rows and columns, and change the look and feel of your table.
Editing a table
After you have inserted a table, you can change formatting options for the table including deleting or adding rows and columns, changing the properties of cells, or deleting the entire table.
To edit the table properties
- Click inside the table in the article.
- In the article editor toolbar, click the Table icon. From here, you can, for example add and remove rows and columns, or delete the entire table.
- To edit global table properties, click Table properties. This opens the Table properties window. By default, you can customize the following properties:
If you need greater control over your table appearance, you need to change your Help Center security permissions to allow unsafe HTML. See Allowing unsafe HTML in Help Center pages for more information. If you decide to make this security change, the table properties window displays the following options:
The Advanced tab allows you to update the style, border color, and background color.
Tip: You specify color values using hexadecimal values. For example, black is #000000 and white is #FFFFFF. - When you've made your formatting changes, click OK.
44 Comments
What are we supposed to enter in border? A color? A format? Anything else?
Hi Geraldine -
Typically, you would enter how many pixels thick you wish for the border to be, so it will be a numeric value.
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?
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!
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
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.
How do I make the table borders show?
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. :)
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
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).
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!
Done
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.
Thanks for letting us know, Kathleen! We'll get it updated soon. Appreciate the heads up.
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.
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!
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.
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!
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.
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!
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.
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 :)
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.
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!
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
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!
I am also having the same issue with the cell padding not publishing.
@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!
Hi Brett,
Thanks for your help. There is no "Advanced" for either the Tabel nor the Cell properties in my Zendesk...
Best, Digna
@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.
Please sign in to leave a comment.