# Table Formatting in Markdown

**URL:** <https://zola.discourse.group/t/table-formatting-in-markdown/178>\
**Category:** Uncategorized\
**Created:** [August 17, 2019, 6:31am UTC](https://zola.discourse.group/t/table-formatting-in-markdown/178 "2019-08-17T06:31:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cetra3](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/cetra3/32/88_2.png) [@cetra3](https://zola.discourse.group/u/cetra3)\
**Post date:** [August 17, 2019, 6:31am UTC](https://zola.discourse.group/t/table-formatting-in-markdown/178/1 "2019-08-17T06:31:16Z")

</div>

I’d like to add a few classes to the generated table in markdown. Is there a way of doing this currently?

---

<div class="post-metadata">

**Author:** ![SgtIria](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/sgtiria/32/85_2.png) [@SgtIria](https://zola.discourse.group/u/SgtIria)\
**Post date:** [February 12, 2020, 8:43am UTC](https://zola.discourse.group/t/table-formatting-in-markdown/178/2 "2020-02-12T08:43:09Z")

</div>

Hi,

You can put the HTML into your `content.md` files and reference your CSS classes.

```
# Table Example

<div class="table-container">
	<table class="table is-narrow">
		<thead>
			<tr>
				<th></th>
				<th>Advantages</th>
				<th></th>
				<th>More Advantages</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>🐶</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. </td>
				<td>🐘</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. </td>
			</tr>
			<tr>
				<td>🦍</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. </td>
				<td>🐿️</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. </td>
			</tr>
			<tr>
				<td>🦓</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. </td>
				<td>🦔</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. </td>
			</tr>
			<tr>
				<td>🐪</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. </td>
				<td>🍰</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. </td>
			</tr>
		</tbody>
	</table>
</div>

```

# Table Example

| | Advantages | | More Advantages |
| --- | --- | --- | --- |
| 🐶 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. | 🐘 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. |
| 🦍 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. | 🐿️ | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. |
| 🦓 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. | 🦔 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. |
| 🐪 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. | 🍰 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ornare lectus. Vivamus in mauris ut lectus mattis varius. Sed pellentesque at odio eu iaculis. |

This references bulma classes.

OR…

You can just style the table elements used by markdown (or use a CSS framework that does this for you). Then just create a Markdown table:

```
### A Title:
Phrase | Count
--- | ---
Lorem ipsum	| 8
Lorem ipsum	| 8
Lorem ipsum	| 8
Lorem ipsum | 5
Lorem ipsum	| 4

```

### A Title:

| Phrase | Count |
| --- | --- |
| Lorem ipsum | 8 |
| Lorem ipsum | 8 |
| Lorem ipsum | 8 |
| Lorem ipsum | 5 |
| Lorem ipsum | 4 |