Slack webhook html table

I have a HTML table that I am trying to post to Slack via webhook.

Is there a way to post the HTML table to Slack?

Here is the HTML code:

<!DOCTYPE html>
<html> <head> <title>HTML Tables</title> </head> <body> <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body>
</html>

8 Answers

I have opened a ticket to Slack support asking if Slack's Incoming Webhook message supports table of any form (HTML or Markdown).

The official answer is that Slack messages do not support tables.

They suggest to generate a table and post it as an image.

They also said that they will add it to their backlog.

8

No, I don't believe there's any way to draw a table in a Slack message.

Here are other available options for formatting Slack messages: .

You can now do simple two column tables in slack using the "fields" layout block.

You can do two column table:

[ { "type": "section", "fields": [ { "type": "mrkdwn", "text": "*Name*" }, { "type": "mrkdwn", "text": "*Email*" }, { "type": "plain_text", "text": "Jeff Henderson", "emoji": true }, { "type": "mrkdwn", "text": "" }, { "type": "plain_text", "text": "Anne Polin", "emoji": true }, { "type": "mrkdwn", "text": "" } ] }
]

Giving you:

enter image description here

Or go field style:

[ { "type": "section", "fields": [ { "type": "plain_text", "text": "Name", "emoji": true }, { "type": "mrkdwn", "text": "*Jeff Henderson*" }, { "type": "plain_text", "text": "Email", "emoji": true }, { "type": "mrkdwn", "text": "" }, { "type": "plain_text", "text": "Mobile Phone", "emoji": true }, { "type": "mrkdwn", "text": "0451000000" }, { "type": "plain_text", "text": "Work Phone", "emoji": true }, { "type": "mrkdwn", "text": "94550000" } ] }
]

Will yield:

enter image description here

7

Not a html table specifically, but you may use a package like console.table to print your table's data into a string variable. Then use triple backticks to add your table in your slack message's text field. For example:

const cTable = require('console.table');
const table = cTable.getTable([ { name: 'foo', age: 10 }, { name: 'bar', age: 20 }
]);

and then as part of your slack message's attachment:

const attachmentList = { "title": "YOUR TITLE", "text": 'HERE IS YOUR TABLE: : \n '+table+'', }
1

Unfortunately, it seems tables are a Markdown standard that Slack does not currently support.

A crude workaround would be to use box-drawing characters within a literal block of text (preceded and followed by three backticks/inverted commas, i.e. , on separate lines).

I occasionally use tablesgenerator.com to generate them on the fly.

╔══════╤══════╤══════════╗
║ Dog │ Cat │ Bird ║
╠══════╪══════╪══════════╣
║ Woof │ Meow │ Tweet ║
╟──────┼──────┼──────────╢
║ Fur │ Fur │ Feathers ║
╚══════╧══════╧══════════╝

They're certainly not pretty, but unlike the pasted images that Slack apparently recommends, their content can be searched, and, at least for some of my colleagues, work somewhat with assistive technology.

2

Slack API limits blocks to only 10 elements but what you can do is to add one long text with breaks to make it look like a table. Here is an example

[ { "type": "section", "text": { "text": "Conference Standings:", "type": "mrkdwn" }, "fields": [ { "type": "mrkdwn", "text": "*Team*" }, { "type": "mrkdwn", "text": "*W-L*" }, { "type": "plain_text", "text": "Team1\nTeam2\nTeam3\nTeam4\nTeam5\n" }, { "type": "plain_text", "text": "1\n2\n3\n4\n5\n" } ] } ]

Here is the result

enter image description here

2

This is sort of a mixture of different answers given here. I can also only suggest sending a formatted string as it supports more than two columns.

However, the thing is that Slack does not give every character an equal amount of space, as code would usually do. This means that the rows won't be aligned properly. Therefore, I suggest using code blocks, which require ticks ().

Python example using formatted strings:

monthly_numbers_str = f""
monthly_numbers_str += f"{"Month".ljust(7)}{"Users".ljust(7)}\n"
monthly_numbers_str += f"{"Jan".ljust(7)}{"15".ljust(7)}\n"
monthly_numbers_str += f"{"Feb".ljust(7)}{"19".ljust(7)}\n"
monthly_numbers_str += f"{"Mar".ljust(7)}{"30".ljust(7)}\n"
monthly_numbers_str += f""

Output (as code):

Month Users
Jan 15
Feb 19
Mar 30

I started using old school Console app tables in my slackbot.

See examples here:

Just send the raw text inside the 3 tick marks to the SlackAPI

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

You Might Also Like