How do you format tables in Help Center?

58 Comments

  • Official comment
    Katarzyna Karpinska
    Zendesk Product Manager

    Hi All, 

    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. 

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

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

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

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

    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

    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!

    2
  • Jessie Schutz
    Zendesk Customer Care

    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
  • ZZ Graeme Carmichael
    Community Moderator

    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.

    1
  • Jessie Schutz
    Zendesk Customer Care

    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
  • Mark H

    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 H

    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 H

    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;
    }
     
    That way you can make sure that all tables look consistent across your articles and you won't have to worry about unsafe content.
     
    While we still allow for inline styles when unsafe content is allowed and will for a significant time to come, we do expect to be moving in a direction where this won't be possible and where all styling should be applied through CSS.
    0
  • Mark H

    hi Christian,

    Thanks for checking this and for explaining how it works.

    The advice to use CSS instead of inline style worked great and will also give us consistency across all articles which is exactly what we will need.

    I have one question for you, is there a web page somewhere that lists all of the {{place holders}} and css  .styles that are available for the HelpCenter?

    thanks, Mark

    0
  • Christian Colding

    Hi Mark,

    Glad it worked!

    Help Center teampltes are built up using a templating language we call Curlybars. You can find full developer documentation on this site:

    https://developer.zendesk.com/apps/docs/help-center-templates/introduction

    Regarding CSS, then you can use all available CSS styles without limitations. We don't have specific documentation for CSS, but you can find a lot of different guides out there that help you when doing CSS. 

    0
  • Karen Grimmett

    Hi Christian - I've read this whole post and we do have "Display unsafe content" checked in our settings and we still can not seem to get much of our table formatting (specifically cell padding) to work. We have horrible looking tables where text on one column runs right into the boarder and right up against the text for the next cell. Although the source editor allows us to add table/column/row attributes, they seem to be ignored when actually displaying them ... BOTH in the article editor AND when we view the article in the help center.

    We are using the Coppenhagen theme, if that helps.

    0
  • 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.

     

    5
  • Jade Steffensen

    Hi Christian,

    In response to your comment on 6 Sep, I think the article editor is a WYSIWYG editor, but in the case of tables, WYSINWYG.

    For now the "Use unsafe HTML" setting and global CSS should suffice, but I still think it would be a good idea to address this in the future (either by making users aware that their table CSS will be stripped without enabling "Allow unsafe HTML" or simply allowing it by default).

    0

Please sign in to leave a comment.

Powered by Zendesk