Recent searches


No recent searches

Adding and formatting tables in help center articles



image avatar

Aimee Spanier

Zendesk Documentation Team

Edited Jun 21, 2024


1

44

44 comments

image avatar

Pulkit Pandey

Zendesk LuminaryCommunity 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


Sure thing, @...!

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

I appreciate your help :)

0


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


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


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity 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


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


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity 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


@..., 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


image avatar

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


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


image avatar

Remi

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


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


image avatar

Trapta Singh

Zendesk LuminaryCommunity 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


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


image avatar

Trapta Singh

Zendesk LuminaryCommunity 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


Huzzah! It worked beautifully!

Thanks for the solution @...!

0


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

Glad to hear that. Happy Zendesking :)

0


I've come across a weird phenomenon that I can't quite explain related to table formatting. I often use tables with white or coloured borders to give the appearance of displaying information in blocks or tiles. I recently noticed that when I view my help center articles on my MacBook Pro screen, I can still see the lines of the formatted table. However, when I drag that same browser tab to my external monitor, the lines disappear (see screenshots for comparison). Is it possible that the higher screen resolution on my MacBook (2560x1600) is the reason that I see the lines and not on my external monitor (2560x1440)? Or could there be another reason that these lines are appearing?

0


image avatar

Dane

Zendesk Engineering

@Zack,
 
Have you already tried to isolate if it's happening on all external monitors? That is definitely one weird behavior. 

0


Dane I haven't checked with another external monitor myself, but I asked a colleague to test it out and they experienced the same thing that I did. They have the same MacBook Pro that I do, not sure of the resolution on their external monitor.

0


image avatar

Dane

Zendesk Engineering

@Zach,
 
I have also tested it on my MBP. However, I was not able to replicate the issue that you are currently experiencing. If you choose to have this investigated, please contact us through Messaging and we'll look into it further.

0


Thanks for looking into it Dane. I'll contact through Messaging.

0


Hello, the advanced option for cell properties is missing, any idea how to have it back? 

0


image avatar

Neil

Zendesk Customer Care

Hi,
 
As mentioned in the article above.
 

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

0


Hello, I have a question regarding formatting tables. Every time I create a table (new table or copy and paste from another doc) the format change completely when I publish the article. I understand that is normal for the way the editor has been conceived and I understand there is a way to add a defining code on the css theme (not supported by Zendesk). But my question is: how can I avoid this? I have recently created a table on a doc and it's impossible to keep the same format between cells even I used the same parameters. How can I create a table that is "stable"? Thanks

0


image avatar

Zsa Trias

Zendesk Customer Care

Hello Freyja,

I have found this article that can help: Why don’t table settings in the editor match the published article?

As mentioned there, by default, the Guide theme CSS overrides the cell padding you have set up through the table properties editor. The article also provides a code snippet that you can insert into your theme to have your cell padding reflected appropriately.

0


Trapta Singh is there specific coding we need to use to have cell borders on all 4 sides? I added both a table border colour and cell border colour and while I can see it in edit mode, when I preview/publish the border is only on the top and bottom of the cells.

0


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

Colleen Huck try adding below code at the bottom of style.css file.

 

.article-body table, .article-body td, .article-body th {
 border: solid 1px #000;
}

 

Let me know how it goes for you.

 

Thanks

Trapta

1


Trapta Singh  thanks that worked! 

 

Is there a way to apply it to individual guides versus the template as a whole? We don't always need the full borders. 

 

Further is it there any way to choose where you apply borders? (like in Excel or Word how you can have them on only the right or top of a specific cell)

 

Thanks!

0


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

Hi Colleen,


Yes you can. But for that you need to change the code a bit and where ever you want to add the border you need to add the class in the article source code.


You can use below snippet for the same:


.article-body .add-border table, .article-body td, .article-body th {
 border: solid 1px #000;
}

Now, for the articles where you want to add the border, you need to add an add-border class at the top of the source code.


Let me know if this works for you.


Thanks

Trapta

0


Please sign in to leave a comment.