How do you format tables in Help Center?
We've migrated our content to the new Help Center. The removal of a table tool in the WYSIWYG editor is rather annoying although we figured we could get around this by coding tables manually in the HTML editor (most of our articles contain tables of data). Although (on the face of it) you can do this, when you view the article in the browser the HTML table formatting is stripped out. It turns out the only way to display tables is by enabling the option to display "unsafe HTML". Why would tables be considered unsafe? Is this really by design? Also, if you look at the list of unsafe tags, table/td/tr are not there so why is Help Center behaving in this way? [As it happens, "href" is also considered unsafe - it would be an extremely odd knowledgebase that did NOT include links to other articles etc].
To be clear, I only want those with the ability to create KB articles to be able to format with tables etc; I'm not wanting community users to be able to do this in their forum posts. There appears to be no distinction in Help Center though. What am I missing?
Just wanted to let you know that we are working on introducing a new way of creating and editing tables in the WYSIWIG. Initially, it will be available only in Content Blocks but we have plans to extend it also to the article editor in the future.
I couldn't agree more with this, and if I could upvote it by more than one I would.
The WYSIWYG formatting options for tables leave a lot to be desired, and unless you have patience to get into the HTML (or worse - the style sheet for your help centre) and use your experience there to deliver a better table experience, it next to impossible to do things easily.
And this in turn creates a barrier to entry for smaller and growing business who don't have HTML, code or design experience in their arsenal; as they can't take advantage of the benefits Zendesk Guide can provide for better customer experience and reducing the overall cost of omnichannel support provision by decreased human interactions and shorter interaction lengths.
This may or may not be helpful...
We designed our own theme and had such a headache with the tables that we added standard table formatting to the CSS file and can just override horizontal alignments and any simple text formatting (bold, italics, etc.) and such in the WYSIWYG editor, as needed.
I've added the code we use for our table formatting below, if helpful. Adding that padding line (where the arrow is pointing) helped prevent our table details from running into the borders. It was added to the "td" section.
Now this is how our tables look in the WYSIWYG editor (note that I did change the first row to be a Header row from within the WYSIWYG editor and kept the rest as Body rows):
And this is how the same table looks when it's published:
Hope this helps someone having issues. We've actually appreciated the standard formatting so our articles look consistent. However, it would be nice to have some better variation from within the editor.
Hi, for those of us who are not competent/comfortable making changes to CSS etc, please can we have more user-friendly table formatting options.
- borders from a word like set op options
- cell shading, from a drop-down of colours
Also, it seems to add a lot of blank space above and below the text????
Hey guys! I did some digging around in our Product Feedback forum but wasn't able to find any post about this particular feature. I'm going to go ahead and move this post over there so we can be sure the Product Managers will see your feedback!
I find the current table editor so unfriendly that I gave up and simply add pictures of the tables I need. This is obviously not an ideal solution. It would be REALLY great if the table editor could be simplified. Also, some additional documentation and clarification on expected behavior and how-to's would be nice.
The initial question about table formatting was published in 2013. Laura D. at some point said a fix was a few weeks out. It's now 2017 and I'm still seeing the same problems. WHEN ARE YOU GOING TO FIX IT?
I tried what Laura D mentioned back in October of 2013, but checking "Display unsafe content" in the "General settings" area of Help Center has no effect. Do we have a working solution for this 4 year old issue? Any help would be very much appreciated. Thanks in advance. I also sent an email to support. I will post the solution they send me here.
Seven years later... Can someone from Zendesk please confirm whether a more user-friendly table (particularly aimed at improving formatting flexibility) is at least on the roadmap?
The CSS others have offered is not a viable workaround because not all tables within our Help Center warrant the same content, thus require different margin sizes and what not. I have turned to creating tables in Microsoft Word and including screenshots of those tables within our help articles, which is a huge limitation since users cannot use < Ctrl + F > to search for specific content within a table.
This is an enormous pain point, and obviously has been one for years now. Please offer a solution.
Can you explain what the "Style" option is on the Advanced table options? And how to set it. I can't find documentation on this. Thanks!
Is there still no solution to this?
+1 on the formatting of the table... column text running together, not showing border, coding in cell buffer seemingly has no effect. It's like any type of style markup is not working properly... please advise.
Adding some more comments on user-friendly table formatting options.
1. What is the deal with the line spacing? I've tried almost everything to get rid of the spacing above and below the text but I can't make it work. I now have a table with a mix of narrow and double height rows and the extra space is annoying. Any help appreciated.
2. What is the difference between font size = Normal or Default? Why have both options? Should Normal = Default?
When you look at them in edit view, they look exactly the same, but in "Help centre view", Default is definitely larger.
Any help appreciated.
We are running into this issue. We can create the table in the agent view, but it displays as a jumble of text in the customer facing article.
David had submitted a ticket about this - I was able to find it and the reply from the Product Manager for Help Center.
- Right now you'll need to check the box next to "Display unsafe content" in the "General settings" area of Help Center to get tables to work in Knowledge Base articles.
- The fact that you have to do this to get tables to show is a mistake that we're working on fixing right now. (We did not mean to make these tags part of the unsafe tag set.)
- The fix should be out in the next few days.
- Tables are only allowed for agents writing KB articles. (I don't know if that's the case permanently as content formatting will improve for end-users over time but for now it is).
- Only agent can post articles.
- We're also planning to make it easier to add tables in articles for agents.
I hope that helps, please let me know if you have more questions!
Thanks for the feedback, we're continuing to improve the editor but there aren't any dates for specific improvements at this time. I'm not sure what plans the Product team has for improvements regarding copying and pasting content from Word; since the program includes it's own non-HTML formatting with copied text there's some extra complexity in the operation. That said, there have been some improvements since this question was last answered, I'll make a note of them in case anyone is curious.
There's now an "Insert table" button in the article editor that allows you set basic table properties. Also, "Display unsafe content" (in the General settings) no longer needs to be enabled to have tables show in Help Center:
Has there been any further movement on this issue?
We have many tables in the support articles we are trying to put together in Zendesk but their appearance is ordinary, to say the least (see below). We have tried to use the table/row/cell properties but nothing seems to work.
We don't want to turn on the unsafe HTML feature. I've found the external table editor is not the solution and I do not have the experience in CSS to "code".
An response/assistance would be greatly appreciated.
Still having the same problem. Could not set the table to vertical align = top. In preview looks good but when published, looks horrible
Please add this feature
My tables in the Guide always add space underneath images. I've tried writing them in HTML and using the WYSIWYG editor. I've looked at the CSS styles as well. No luck. I'm trying to have a seamless tables with no borders, no spacing, that leave no gaps between cells.
Creating tables in articles is SO frustrating. When I change the alignment in the cell properties to Top instead of None, it hardly ever actually switches to the Top. And when I drag the dividers to change the width, it will SOMETIMES move a smidge, but never to the point I drag it to. I have to drag it several times and it still usually won't get where I want it to go. And the way it looks while editing an article is not even close to how it looks when the article is previewed or published. I know it will vary slightly, of course, but it does not keep any of the properties set in the table or cell properties.
When are you planning to make it easier for agents to add tables? We have a lot we need to add and are doing a big push to create articles next week.Can you point us to a best practice for adding them in the time being?
We haven't firmed up a timeline for improving the HTML article editor yet. In the meantime I have heard of customers using table generators to create HTML code which can be pasted into the HTML view of an article (use the "</>" button in the editor to get get to this view). Quite a few of these came up when I searched Google - this one seemed to have an easy to use interface and laid out the code nicely: http://www.tablesgenerator.com/html_tables. At least this way it relieves the necessity of writing everything yourself.
I did notice in testing that once I placed a table in one article I could copy and paste it into the regular view of another article. If you have table formats that you use repeatedly this could save even more time.
Hope this helps - please let us know if you have more questions!
Thanks for the quick reply. I also had some success experimenting copying a table directly into a Zendesk article from Word (which is where our help articles currently live). Depending on whether the content already exists, we might do a combination of Word and the html generator until the upgrade.
That's good to know about Word - hope all of the article creating goes well!
Voting for this - we need tables in our KB docs. We need to be able to create and edit these easily. Word tables don't appear to maintain column width when they are pasted into a Help Centre article. Please let us know when we can expect these features to be working efficiently.
Hi Sue! Sorry for the delayed response!
The Style field is where you can add some CSS code snippets to customize the table. You can change the background color and things of that nature.
Hope that helps!
I'm glad I came across this post. We're new to Zendesk and was finding the table formatting to be not-zen-having. According to what I've read above it should no longer be necessary to check "Display unsafe content" in Settings. However, I need to express that we had to check that to keep our formatting from getting stripped out. The table was displayed, but the background color was not. I found the"Display unsafe content" setting and now the color shows up but I can not seem to change the height, or width. Any advice, or direction, would be greatly appreciated.
Thanks for reaching out! We've created a ticket on your behalf using your email address as the requester. I'll be happy to help further with this issue there. Thanks!
We added our formatting in the code (for the most part) so it happens on the back end and is not really visible in the WYSIWYG Editor. However, the issue I come across (similar to Samantha's comment) is how to edit the width of columns within the Editor. These columns need to be of variable width, and they don't seem to auto-adjust based on the width of the text within the column.
The auto-formatting seems to take the total width of the table and divide that evenly over each column. With that in mind, what is the best way to make some wider and some narrower, based on the content of the column? I've played with the table/row/column/cell properties and can't seem to get it to work.
Please sign in to leave a comment.