How do you format tables in Help Center?

49 Comments

  • Lucky Herzberger

    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

    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

    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

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

    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

    @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

    @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

    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

    Thank you @Lucky Herzberger.

    0
  • Terry Wolfrey

    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?

    0
  • 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
  • John McGovern

    Is there still no solution to this?

    1
  • Mohamadfadhil Yaacob

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

    0
  • Meghan Howard

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

    0
  • Fabien RIC

    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
  • 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
  • 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
  • Nigel Dalton Brown

    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. 

    0

Please sign in to leave a comment.

Powered by Zendesk