# How to create a table in a Rich text field

**URL:** <https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859>\
**Category:** Prismic for Content Creators\
**Tags:** reactjs\
**Created:** [September 14, 2020, 12:58pm UTC](https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859 "2020-09-14T12:58:39Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ujjwal](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/ujjwal/32/914_2.png) [@Ujjwal](https://community.prismic.io/u/Ujjwal)\
**Post date:** [September 14, 2020, 12:58pm UTC](https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859/1 "2020-09-14T12:58:39Z")

</div>

I need to create a table in rich text field. is it possible ?  
I render all the html from the rich text field directly to my page, is there way to create a table in rich text field. ( note: I do not want to create a separate field for table)

something like this:  
 ![image (4)](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/1X/95ab040de26135d77c148b5c18321943bb33f653.png)

---

<div class="post-metadata">

**Author:** ![marcellothearcane](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marcellothearcane/32/224_2.png) [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)\
**Post date:** [September 14, 2020, 3:03pm UTC](https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859/5 "2020-09-14T15:03:13Z")

</div>

Is this only one column? Because you can do it with key text and a [group field](https://user-guides.prismic.io/en/articles/484922-group):

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/1X/ad16634ced622cc3559e35d451f342a905183f48.png)

```json
{
  "Main": {
    "table_title": {
      "type": "Text",
      "config": {
        "label": "Table title",
        "placeholder": "Enter title"
      }
    },
    "table_rows": {
      "type": "Group",
      "config": {
        "fields": {
          "table_row": {
            "type": "Text",
            "config": {
              "label": "Table row",
              "placeholder": "Enter row value"
            }
          }
        },
        "label": "Table rows"
      }
    }
  }
}

```

There’s also a help guide here:

> **[Create a Table](https://user-guides.prismic.io/en/articles/2693470-create-a-table)**
>
> Create a table by using slices or embed one created with a third-party service

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [September 14, 2020, 3:05pm UTC](https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859/6 "2020-09-14T15:05:11Z")

</div>

Hi Ujjwal,

Thanks for posting!

Prismic does not provide a method for rendering a table in a rich text field. So, to display a table you would need to create another field. There are lots of methods for doing so, like how @marcellothearcane suggests.

We have a guide for creating a table using a group:

> **[Create a Table](https://user-guides.prismic.io/en/articles/2693470-create-a-table)**
>
> Create a table by using slices or embed one created with a third-party service

Let me know if that works for you, and if you have any other questions.

Sam

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [September 24, 2020, 4:50pm UTC](https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859/8 "2020-09-24T16:50:43Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 5:20pm UTC](https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859/9 "2021-12-09T17:20:12Z")

</div>



---

<div class="post-metadata">

**Author:** ![joel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/joel/32/3910_2.png) [@joel](https://community.prismic.io/u/joel)\
**Post date:** [February 11, 2022, 4:47pm UTC](https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859/10 "2022-02-11T16:47:33Z")

</div>

Hello,

Thank you for this explanation.  
What would be the best option to create a header for a multiple columns Table? In this case I imagine that each Row would be in the Repeatable zone but the header item shouldn't be.

My use case is to create a Table slice to be used in different contexts, so the Header for each table must be available for change from Prismic.

My current solution would be to create a boolean value, like **1stRowIsHeader** where the 1st row set on the Repeatable Zone will be rendered as the Table Header, and this way the content editor will be able to define if that table as an header or not, and correctly set its values if it does.

Is there a better solution for my problem?

Thank you. 🙂

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [February 17, 2022, 1:24am UTC](https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859/14 "2022-02-17T01:24:16Z")

</div>

Hey @joel, I believe your approach is the best one. Because the repeatable zone of a Slice allows you to add as many rows as you need, then, each Slice works as a column.

---

<div class="post-metadata">

**Author:** ![joel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/joel/32/3910_2.png) [@joel](https://community.prismic.io/u/joel)\
**Post date:** [February 17, 2022, 10:52am UTC](https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859/15 "2022-02-17T10:52:33Z")

</div>

Hello @Pau. Thank you for your message.

Still, while implementing I've found out that is not a good approach, because the Header row must all be text types while the body rows must be of types that are better applied to your use-case, might it be links, text, numbers, etc.

I've ended on having text fields for all the header and a group of items for the rows.

What do you mean with "each Slice works as a column" ? Can you give me an example?

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [February 17, 2022, 12:27pm UTC](https://community.prismic.io/t/how-to-create-a-table-in-a-rich-text-field/1859/16 "2022-02-17T12:27:32Z")

</div>

By that, I meant that the JSON of each Slice can be treated as a column within a multi-level menu. Here's an example of how a megamenu can work, for example, each section represents a Slice: Getting Started, Pro Features, etc...

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/1/140e8c033cc2c5fcaf580b39696f35633f6697b5.jpeg)
