How do you format tables in Help Center?

50 Comments

  • Christian Colding
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
  • Mark Hinson
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
  • Jade Steffensen
    Comment actions Permalink

    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
  • Michael McAfoos
    Comment actions Permalink

    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
  • Lucky Herzberger
    Comment actions Permalink

    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
  • Marybeth Sklar
    Comment actions Permalink

    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
  • Lucky Herzberger
    Comment actions Permalink

    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
  • Marybeth Sklar
    Comment actions Permalink

    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
  • Josh
    Comment actions Permalink

    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
  • Paul Lee
    Comment actions Permalink

    @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
  • Lucky Herzberger
    Comment actions Permalink

    @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
  • Lucky Herzberger
    Comment actions Permalink

    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
  • Paul Lee
    Comment actions Permalink

    Thank you @Lucky Herzberger.

    0
  • Mohamadfadhil Yaacob
    Comment actions Permalink

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

    0
  • Fabien RIC
    Comment actions Permalink

    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
  • Steven Knox
    Comment actions Permalink

    Please add this feature

    0

Please sign in to leave a comment.

Powered by Zendesk