Recent searches


No recent searches

How do you format tables in Help Center?



Posted Sep 20, 2013

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?


18

58

58 comments

We are also having issues with table formatting in Help Center articles. Because the window in which a help center article can be displayed is so narrow, our table renders in a way which is almost impossible to read.

Most of the columns in our table only display one word per line due to how narrow the columns have to be in order to fit the table into the display area.

Given how much white space is available on the left side of our article, it's really a shame that we can't take advantage of that space in order to make this more readable.

0


Michael - we narrowed our page margins in the design files, partially for that reason.  There was too much real estate not being used.  

Not only did this help with our tables, but it makes our articles much easier to consume. We also made our tables responsive by manipulating the CSS file.  This allows the columns to auto-adjust based on the content, as well as when viewing from a mobile device.

I've come to learn that most of these types of changes get pushed back to the customer to make changes themselves, as they see fit.  We've made A LOT! 

Our internal resources were not available to help with our theme customizations, so we used a 3rd party (Lotus Themes) who designs/customizes Zendesk themes.  We selected one of their standard themes and then customized the mess out of it! :-)  

They were great to work with, quick, efficient, creative, responsive, thorough, patient, and (best of all) cost-effective.  They're small, but really know what they're doing.  I highly recommend them to anyone needing help with customizations of their Zendesk Help Center.

 Good luck, all!

0


Like several of you I can't set column width with the WYSIWYG, nor does .css work. I have definition/glossary tables, where the first column needs to be 22% wide and the second 78%.

The only way I have found to set column width is to use <colgroup> tags under the <table> tag.

<colgroup> <col style="width: 22%;" /> <col style="width: 78%;" /> </colgroup>

Hoping this helps someone, though what I'm really hoping is that table formatting becomes more robust and easier to implement in ZD.

 

0


Marybeth, the way I found to do it in the WYSIWYG is to put the cursor in the header cell of the column, select the Cell Properties and change the width there.  That change affects the entire column.  It may not be restricted to the header cell, that's just how I do it.  I've not explored it beyond that point, but that could be a viable "bandaid" for now.

0


Lucky, I've tried that, but it does not work for me. :(  I'm okay with the colgroup option for now as I don't need variable width columns.

0


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.

3


Have been struggling with this for a while trying to get decent looking tables. Stumbled across a great page on codepen.  I'm using the Copenhagen template and it has come up a treat. 

Check out the codepen link to play around with their easy to use editor.

I followed these steps and used the following code:

  1. Edit your theme
  2. Select the css tab
  3. Search for tables
  4. Replace everything in the tables section with:

.wrapper {
margin: 0 auto;
padding: 20px;
max-width: 100%;
}

.table {
margin: 0 0 40px 0;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: table;
}
@media screen and (max-width: 580px) {
.table {
display: block;
}
}

.row {
display: table-row;
background: #f6f6f6;
}
.row:nth-of-type(odd) {
background: #e9e9e9;
}
.row.navy {
font-weight: 800;
color: #ffffff;
background: #335394;
}
.row.teal {
font-weight: 800;
color: #ffffff;
background: #6ac2bc;
}
.row.blue {
font-weight: 800;
color: #ffffff;
background: #639cc8;
}
@media screen and (max-width: 580px) {
.row {
padding: 8px 0;
display: block;
}
}

.cell {
padding: 6px 12px;
display: table-cell;
}
@media screen and (max-width: 580px) {
.cell {
padding: 2px 12px;
display: block;
}
}

NB. row.navy, row.blue and row.teal are header rows with bold text, white text colour, and coloured background. Replace the hex colour with your own and rename row.### to whatever suits - it just needs to be the same in the HTML that comes up shortly.

 

       5. Select Save

       6. Select Publish Changes

       7. Now navigate to and edit your article

       8. Hit the </> Source Code button 

       9. Copy and paste the following HTML code:

<div class="wrapper">
  
  <div class="table">
    
    <div class="row navy">
      <div class="cell">
        Name
      </div>
      <div class="cell">
        Age
      </div>
      <div class="cell">
        Occupation
      </div>
      <div class="cell">
        Location
      </div>
    </div>
    
    <div class="row">
      <div class="cell">
        Luke Peters
      </div>
      <div class="cell">
        25
      </div>
      <div class="cell">
        Freelance Web Developer
      </div>
      <div class="cell">
        Brookline, MA
      </div>
    </div>
</div>
</div>

       10. Click OK

NB. It won't look very good in the WYSIWYG editor, just plain text running down the page. Each line is a cell.

The first four lines are the headers (Name, Age, Occupation and Location). The following four lines are the row data. 

       10. Preview should look something like this:

 

Hope this helps!

0


@Lucky Herzberger: Did you replace the entire Tables section of the CSS file? I'm trying that with the Copenhagen template, but it messes up the rest of the page formatting.

0


@Paul Lee: We actually had a 3rd party (Lotus Themes) work up our entire CSS file (plus any template/JS files) so I'm not 100% familiar with all of the code.  The snippet image that I added to my comment on September 7 of last year was what I know of the CSS table code - but there may be more I'm unfamiliar with.  I'm not great at coding and only dabble, so I let a pro build out our theme for us and just made minor adjustments, where needed, to perfect it.  

I do highly recommend using them, if you're in the market for some assistance in that area.  Lotus Themes is very affordable and they have great support.  The cost more than compensated for the time/headache that would've been involved to do it all on our own.

Good luck getting your Zendesk theme where you want it to be! 

0


As a side note, I did see that tables in the WYSIWYG editor now have a drag-and-drop column width adjustment, which was great to see - improvements are being made on the front-end!

0


Thank you @Lucky Herzberger.

0


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?

3


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.

3


Is there still no solution to this?

2


Still having the same problem. Could not set the table to vertical align = top. In preview looks good but when published, looks horrible

1


+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. 

2


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


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

 

5


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.

7


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. 

2


Please add this feature

1


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.

 

Thanks,

Bill

1


image avatar

Brett Bowser

Zendesk Community Manager

Hey William,

This issue occurs most likely because your Help Center CSS is overriding what is configured in the article editor. I was able to track down a useful tip that may help get you started: How to add a table format into Guide css?

Hope this points you in the right direction!

0


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. 

1


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.

3


image avatar

Katarzyna Karpinska

Zendesk Product Manager

Hi All, we know that we have a long way to go when it comes to the experience we are providing in regards to tables. We'll be working on introducing some improvements this year. For a start we've made a change yesterday that should make working with:

  • cell width and height
  • borders
  • list items
  • centering of the tables

Slightly easier.

NB. Unfortunately, we couldn't fix issues with cell padding this time. 

0


The article How to add a table format into Guide css isn't very useful. Especially as styles.css is pretty complex. Is there any documentation that explains what each style in that file is defining? For example I just want to add a margin under each paragraph (everywhere, not just tables) and for the life of me can't find where the <p> tag is defined. I also want to do something as basic as change the indentation of a bullet list, and searching for an <li> definition comes up with 100s of entries.

1


If only there was a popular and industry-standard method of defining tables, like Markdown syntax...

Please excuse my cynicism but (fully) supporting and embracing Markdown everywhere across the Zendesk tools would make working with Zendesk so much easier and less finicky. Other platforms like GitHub or Stackoverflow have been doing this for decades.

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post