English (US)
  1. Zendesk help
  2. Guide
  3. Using Guide for help center
  4. Working with articles in the knowledge base

Adding and formatting tables in help center articles

Aimee Spanier
  • Edited
Zendesk Documentation Team

Suite allall plans

You can add tables to your help center articles, and customize their properties, by clicking the table icon in the article editor toolbar, and selecting your table options. The table formatting options available depend on whether or not you are allowing unsafe HTML in help center pages.

This article contains the following topics:

Adding a table to an article

To add a table to an article

  1. Open the article in the Guide article editor, and place your cursor where you want to add the table.
  2. In the article editor toolbar, click the table icon:

  3. In the table formatting menu, move your cursor over the grid to select the number of rows and columns you want to include in the table:

  4. Click the grid to add the table to your article.

Once the table is added to your article, you can add content by clicking inside a cell and inserting text or images. You can also format the width, height, text alignment, and other table properties.

Additionally, you can reopen the table formatting menu to change cell properties, add and remove rows and columns, and change the look and feel of your table.

Editing a table

After you have inserted a table, you can change formatting options for the table including deleting or adding rows and columns, changing the properties of cells, or deleting the entire table.

To edit the table properties

  1. Click inside the table in the article.
  2. In the article editor toolbar, click the Table icon. From here, you can, for example add and remove rows and columns, or delete the entire table.
  3. To edit global table properties, click Table properties. This opens the Table properties window. By default, you can customize the following properties:

    If you need greater control over your table appearance, you need to change your help center security permissions to allow unsafe HTML. See Allowing unsafe HTML in help center pages for more information. If you decide to make this security change, the table properties window displays the following options:

    The Advanced tab allows you to update the style, border color, and background color.

    Tip: You specify color values using hexadecimal values. For example, black is #000000 and white is #FFFFFF.
  4. When you've made your formatting changes, click OK.
Return to top

31 Comments

  • Sheila Lucas

    Hello,

    I have created numerous 2x1 tables in an article to house how-to content on different devices for our software platform. Each cell contains a numbered list and the bottom of each table are snug up against the last row of content in the editor. However, when published, some of the tables' padding extends down for at least a dozen lines:

    In editor:

    Published article:

     

    This is not a consistent issue for all tables, so I cannot identify what is causing it.

    Thank you in advance!

     

    (edit - @..., might you be able to assist?)

    0
  • Pulkit Pandey
    Community Moderator

    Hey Sheila Lucas,

    Can its possible to share the URL of that article where you are getting this issue so that I can go through it and provide you a solution 

    Thank You

    Pulkit

    0
  • Sheila Lucas

    Sure thing, @...!

    Table issues begin here and run the rest of the way through the article.

    I appreciate your help :)

    0
  • Stephen Kairys

    Hi,

    On a table, I'm having a weird issue. In column 3, the text starts at the very top, right up against the top border. That's in EDIT mode. However, when I look in PREVIEW mode, there's an unwanted blank line which looks weird.

    EDIT MODE:

     

    PREVIEW MODE (UGH):

    Interestingly, if I don't add the nonsense words at the bottom, the 1st line looks great.

    Bottom line: What's the solution to ensure the first line of text is not preceded by whitespace?

    Not the first time a table that looks great in the editor deteriorates in preview mode. I just don't understand why this annoying difference occurs.

    0
  • Stephen Kairys

    Update: now I removed the garbage characters and the first line still is not ok. Maybe I was seeing things. In any event, REVISION HISTORY displays it yet another way.

    At this point I'm ready to abandon this whole table thing and format it another way. It's taken me too much time already.

    0
  • Pulkit Pandey
    Community Moderator

    Hey Sheila Lucas

    Sorry for the late replay :)

    Hope this will solve your issue, please add the below code at the end of style.css file 

    .article-body table tr {
      height: unset;
    }

    Let me know if solves your issue 

    Thanks 

    Pulkit

    0
  • Sheila Lucas

    Hello @...

    Unfortunately, this did not seem to resolve the issue. I have cleared my browser cache and viewed the article as a non-logged in user for good measure, but it doesn't seem that the added code worked.

    I would like to confirm that I added it to the correct location:

    Guide → Customize Design → Live theme → Customize → Edit code → style.css → provided code copied and pasted to the bottom:

    0
  • Pulkit Pandey
    Community Moderator

    Hi Sheila Lucas, 

    Yes, you have added the code in right place meanwhile I have gone through it and sharing the updated code. 

    Replace the below code with the previous one in the same place where you have added it previously.

    .article-body table tr {
      height: unset !important;
    }

    Let me know if it solves your issue

    Thanks 

    Pulkit

     

    1
  • Sheila Lucas

    @..., that did the trick! Thank you so much for your assistance.

    0
  • Pulkit Pandey
    Community Moderator

    Happy to hear that it works for you :)

    0
  • Marny Klump

    I am new to zendesk. I have read the article and comments. I've ensured that the allow the unsafe content has been enabled. The cell padding is not working, although I have entered background colours and table colours, none of that is showing. I am not a coder, nor do I want to be one when I grow up LOL, I just want to create the content with ease. Any assistance would be great.

    0
  • Stephen Kairys

    Manny - You are not alone. I, too, am having a left-padding issue The stakeholder for this doc would prefer to have padding, but so far, I've been unable to comply.

    PS-Out of curiosity, is your issue in EDIT view or PREVIEW/PUBLISH view?

     

    0
  • Marny Klump

    @..., it is in the preview/publish view. Looks fine while editing, but the words are right up against the table outline once I am previewing or have published. 

    0
  • Stephen Kairys

    @...

    Same thing here. Good luck getting it resolved. I'm spending time on silly formatting issues which is costing me time authoring content.

    0
  • Amy Gracer
    Community Moderator

    Try adding the padding setting to your CSS?

    .table tr {
    padding: 20px 0;

    }

     

    (Guide Admin > Customize Design > Edit Code > style.css)

    0
  • Pulkit Pandey
    Community Moderator

    Hey Marny Klump

    Can it's possible to share the URL of an article where you are getting this issue so that I can look at it and provide the solution.

    Thanks

    Pulkit

    0
  • Stephen Kairys

    @...

    Thank you for that suggestion. Would this code affect just the current table, the current article, or all articles. I'd be hesitant to do it for all articles b/c I don't want to alter the format of tables I'm currently not working on.

    Please provide instructions (or a link) regarding how to modify CSS.

     

    0
  • Amy Gracer
    Community Moderator

    It would impact all tables. 

    I played with it some more, and found a way to get it to work on a cell at least using the table properties:

    1. Select a table cell
    2. On the ribbon, click Table.
    3. Select Cell Properties
    4. Click the Advanced tab
    5. In the style box, type
    padding-left: 15px;


    1. Click OK

    If that works, you can all table cells, and then perform the steps again. It should update the whole table.

     

     

     

     

    0
  • Stephen Kairys

    Amy Gracer

    OK, will give it a try. How did you choose 15px? How many millimeters is that?

    I assume I'd just add it to the existing parameters?

    width: 101.571%;
    height: 22px;
    background-color: beige;

    Thanks.

    0
  • Stephen Kairys

    OK, I tried it. It worked OK in terms of the left padding; however it made the 2nd column really narrow. I widened it by dragging the cell border. ; Please don't take this post as a final endorsement of this solution. 

    I've already spent too much time on this formatting issue and need to get back to authoring content, so I won't be able to test further.

    Thanks.

    0
  • Amy Gracer
    Community Moderator

    Are those parameters on your cell? If so, yes, just add.

    1 px =~ .26mm

    I have a 10px padding on my table cells. See what works for you.

    I'm not sure why you would have a cell width set to more than 100%. Try removing that property altogether.

    Good luck!

    0
  • Stephen Kairys

    No idea where the over-100% came from. 

    If I add an empty table, all I see is the below.

    What was the reason for

    1 px =~ .26mm

    Table looks ok without it.

    Do you know of an article in the Zendesk help center that explains all these table fields?

    Thanks again. Making progress, I think. OK, back to my tech writing. :)

    0
  • Amy Gracer
    Community Moderator

    You asked how many millimeters is a pixel :)

    A pixel is about .26 mm.

    I'd remove all width styles for now and add the padding. You can try 5, 10, 15px. Whatever works for you. 

    All of these settings are part of the HTML/CSS  code.

    In Zendesk, they'll call this customizing the theme. See here:

    https://support.zendesk.com/hc/en-us/articles/203664326-Customizing-your-help-center-theme

    I suggest you look at https://www.w3schools.com/tags/default.asp

    It's a great resource for learning how to style your html just the way you want it. 

    We writers have to wear many hats! Fine tuning the design can be a nice break from it sometimes. (Now I have to get back to mine!)

    Good luck again :)

    0
  • Marny Klump

    @... https://help.production.membersuite.com/hc/en-us/articles/360058903191-Career-Center-Field-Descriptions

    I got the cell padding but I still can't get the colour for the background in the headers/titles to work. Also, how do I make it so that all are consistent widths. They were when I copied/pasted, but then some have changed on different articles. 

    Thanks

    0
  • Remi Saumet
    Zendesk Customer Care

    Hi Marny Klump,

    Thank you for your post here, hope you are doing well today !

    I understand you got the cell padding working, great job there ;)

    Unfortunately, as per your URL, it requires a login and I cannot access, and I'm unsure about what you are trying to achieve. Also, bear in mind that Custom Code is unsupported!

    However, if you want to add a colour background to your cell's title "Field" here from your screenshot :

    You will have to edit the cell's HTML code to reach this level of customization. Also, the colour for the background has to be set using hexadecimal values. ( Red = #ff0000 ).

    Here is how to edit the code of your page's article / table : 

    Here is an example of setting an equal width for your cells as well as adding a background colour for a specific cell using the cell <td> style and merging 2 cells with colspan.

    Here is the related code : 

    For reference : 

    - What is a <tr> Table Row tag : HTML <tr> Tag.
    - What is a <td> Table Data tag : HTML <td> Tag  > Look for the following examples in the doc : 

    • How to set the width of a table cell (with CSS).
    • How to add background-color to table cell (with CSS).

    - How to merge cells with Colspan : HTML <td> colspan Attribute.

     

    Hope this will help or guide you in the right direction, nonetheless, if you are still struggling about that, we can wrap this up into a ticket and I can have a direct look at your Help Center for you, if you want ?

    Thank you in advance,

    Have a great rest of your day!

    0
  • Mark Glinski

    After reading through this thread, it appears that this issue hasn't been resolved. I, too, am experiencing the problem where the cell padding appears in edit mode but not in preview or publish mode. I've tried to manipulate the padding in the CSS included with Copenhagen, but it does nothing. 

    Zendesk, please advise. Thanks!

    0
  • Trapta Singh
    Community Moderator

    Hi @Mark Glinski,

    Can you show us what CSS you are trying to add? It will be great to share the screenshot of your theme and how it looks after adding the CSS code.

    Thanks

    0
  • Mark Glinski

    Hi, @.... Yes, I'd love to share the CSS.

    I'm sending all the table styles, so please forgive the potential overkill ;-)

    When I discovered the issue initially (without touching the CSS), I tried manipulating the table padding locally. No dice. So then I tried adding padding to the tr and td styles. Same thing. 

    I appreciate you looking at this:

    /***** Tables *****/
    .table {
    width: 100%;
    table-layout: fixed;
    }

    @media (min-width: 768px) {
    .table {
    table-layout: auto;
    }
    }

    .table th,
    .table th a {
    color: lighten($color_3, 20%);
    font-size: 13px;
    font-weight: 300;
    text-align: left;
    }

    [dir="rtl"] .table th, [dir="rtl"]
    .table th a {
    text-align: right;
    }

    .table tr {
    border-bottom: 1px solid #ddd;
    display: block;
    padding: 20px;
    }

    @media (min-width: 768px) {
    .table tr {
    display: table-row;
    }
    }

    .table td {
    display: block;
    padding: 20px;
    }

    @media (min-width: 768px) {
    .table td {
    display: table-cell;
    }
    }

    @media (min-width: 1024px) {
    .table td, .table th {
    padding: 20px 30px;
    }
    }

    @media (min-width: 768px) {
    .table td, .table th {
    padding: 10px 20px;
    height: 60px;
    }
    }
    0
  • Trapta Singh
    Community Moderator

    Hi @...,

    Try replacing your code with the below code:

    /***** Tables *****/
    .table, .article-body table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      border-spacing: 0;
    }

    @media (min-width: 768px) {
      .table, .article-body table {
        table-layout: auto;
      }
    }

    .table th, .article-body table th
    .table th a, .article-body table th a {
      color: lighten($text_color, 20%);
      font-size: 13px;
      font-weight: 300;
      text-align: left;
    }

    [dir="rtl"] .table th, [dir="rtl"] .table th a,
    [dir="rtl"] .article-body table th, [dir="rtl"] .article-body table th a {
      text-align: right;
    }

    .table tr, .article-body table tr {
      border-bottom: 1px solid #ddd;
      display: block;
      padding: 20px;
    }

    @media (min-width: 768px) {
      .table tr, .article-body table tr {
        display: table-row;
      }
    }

    .table td, .article-body table td {
      display: block;
    }

    @media (min-width: 768px) {
      .table td, .article-body table td {
        display: table-cell;
      }
    }

    @media (min-width: 1024px) {
      .table td, .table th,
      .article-body table td, .article-body table th {
        padding: 20px 30px;
      }
    }

    @media (min-width: 768px) {
      .table td, .table th,
      .article-body table td, .article-body table th {
        padding: 10px 20px;
        height: 60px;
      }
    }

    It looks like Zendesk previously used to add a class "table" to the tables added in article content. But now it doesn't seem to have that class so the CSS is not applying to it.

    However, try the above code and let us know if that works for you.

    Thanks

    0
  • Mark Glinski

    Huzzah! It worked beautifully!

    Thanks for the solution @...!

    0

Please sign in to leave a comment.

Related articles

Powered by Zendesk