How do you format tables in Help Center?

49 Comments

  • Lucky Herzberger

    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.

     

    4
  • Jessie Schutz

    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!

    3
  • Ife Ramsey

    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.

    2
  • Michael H

    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.

    2
  • Chad Bates

    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.

    1
  • Laura D.

    Hi Chad, 

    David had submitted a ticket about this - I was able to find it and the reply from the Product Manager for Help Center.

    Details are: 

    • 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!

     

     

    1
  • Sue Walsh

    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!

    1
  • Katie Yoder

    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.

    1
  • John McGovern

    Is there still no solution to this?

    1
  • Nigel Dalton Brown

    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
    • etc

    Also, it seems to add a lot of blank space above and below the text????

    Many thanks

     

    1
  • Josh Clayton

    Hi Laura,

    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?  

    Thanks,

    Josh

    0
  • Laura D.

    Hi Josh, 

    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!

    0
  • Josh Clayton

    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.

    0
  • Laura D.

    That's good to know about Word - hope all of the article creating goes well!

    0
  • Jackie Barefield

    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.

    Thanks

    0
  • Laura D.

    Hi Jackie, 

    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:

    Screen_Shot_2014-03-03_at_9.32.32_AM.png

    0
  • Jessie Schutz

    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!

    0
  • Samantha

    Hello,

    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.  

    0
  • Chad Ferguson

    Hi Samantha,

    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!

     

     

    0
  • Lucky Herzberger

    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.

    0
  • Franco Sabadini

    I'm having the same issue Lucky mentioned, can't believe this issue has been here for almost 3 years :/. Is it going to be fixed? I'd really like to disable the unsafe HTML feature.

    0
  • Graeme Carmichael

    Just in case it helps.

    You can vary the column width by using the Cell Properties option and setting the Scope to Column or Column Group.

    But for this to work the display unsafe content box must be checked.

    0
  • Louis Minson

    It seems unbelievable that this issue has not been fixed for 3 years now.

    Why on earth should we have to have unsafe HTML switched on to show tables???

     

    .

    0
  • Dean Wilson

    Hi guys,

    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.

    0
  • Mark Hinson

    hi Jessie,

    Has there been a fix to allow <table> (and some other html tags) to be formatted or seen correctly when viewing a HelpCenter Article.  

    I can see the workaround above offered by Laura, which is to allow "Display unsafe content" in the "General settings" area of Help Center works ok, but from reading above this was a short term solution to get around certain tags being prevented from being used.

     - thanks, Mark

    0
  • Christian Colding

    Hi Mark,

    When you say that you can't format <table> do you then mean that you can't format it with inline styles or how exactly are you trying to style it?

    0
  • Mark Hinson

    hi Christian,

    What I meant was you can create a table in an Article (either via toolbar or via source) and in Edit mode the table in the Article looks ok, you can apply a border style and background colour to give the table some definition.  But when you view the article later via the Help Center all the borders and any background colours is not presented.  They seem not be be rendered or presented correctly, as if the html style is being ignored.  

    I read above that if you look at "General settings" area of Help Center and enable "Display unsafe content" then when an article is viewed the html renders ok and the table is presented as formatted.  

    The question I ask, and is also asked above, is, is using "Display unsafe content" the only way currently to make the html tags in Articles present the tables in the format they were created with?

    thanks, Mark

    0
  • Christian Colding

    Hi Mark,

    I need to do some further investigations. Just to be sure I am looking at the right thing, do you perhaps have a URL to an article that has a table where the styling is stripped?

    0
  • Mark Hinson

    https://xxxxxxxxx.zendesk.com/hc/en-us/articles/209425129-Xxxxxxx-Work-Instructions-CMS-EPP-PM-Wrapper-

    Christian, this system requires authenticated login, so can you confirm your email and I will set you up as a end user so you can access via .../access/normal

    thanks, Mark

     

    0
  • Christian Colding

    Hi Mark,

    I accessed it through our internal systems as I also needed to see what it displayed inside the editor.

    You are indeed correct that inline styles get stripped out if you do not have unsafe content allowed. I will look into whether there is a reason for this.

    That being said though, our editor is not what you might call a WYSIWYG - What You See Is What You Get. Generally the styling of your article when you edit it, will be different from how it looks inside your Help Center. The reason is that styling should be defined through global CSS and that CSS is only available inside Help Center.

    So the point of the article editor is not to exactly show how it will look once published, but rather to allow you to build up the right content that you then apply styles to afterwards - ensuring consistency across your articles. By using inline styles instead of CSS, it will be difficult for you to change this at a later stage and it's generally not recommend for web design.

    Instead I would recommend you to style you table through CSS, by adding this to your CSS file:

    .article-body table {
    table-layout: fixed;
    border-color: #333333;
    background-color: #cccccc;
    0

Please sign in to leave a comment.

Powered by Zendesk