# How to create table in Rich Text content

**URL:** <https://community.prismic.io/t/how-to-create-table-in-rich-text-content/5958>\
**Category:** Developing with Prismic\
**Created:** [June 25, 2021, 2:56pm UTC](https://community.prismic.io/t/how-to-create-table-in-rich-text-content/5958 "2021-06-25T14:56:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![max.petrivskyi](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@max.petrivskyi](https://community.prismic.io/u/max.petrivskyi)\
**Post date:** [June 25, 2021, 2:56pm UTC](https://community.prismic.io/t/how-to-create-table-in-rich-text-content/5958/1 "2021-06-25T14:56:34Z")

</div>

Hello, Prismic Support Team~

I would like to add the table to the Rich Text of Prismic.  
Already I've read the previous topic related to this one, but I can't understand.

Could you explain this in more detail?

Thanks

---

<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:** [June 25, 2021, 4:00pm UTC](https://community.prismic.io/t/how-to-create-table-in-rich-text-content/5958/2 "2021-06-25T16:00:37Z")

</div>

Hello @max.petrivskyi, thanks for reaching out.

I imagine you're referring to this thread: [How to create a Table](https://community.prismic.io/t/how-to-create-a-table/5460).

In this publication, we propose three options to manage the tables within the documents.

The first one proposes modeling content in the Custom Types in a certain way so that the API response has an understandable structure for a table.

The second option suggests using an application or service external to Prismic to handle the table and then using an Embed link to connect it to your documents.

And the third option indicates that you can add the raw HTML code of a table directly into a field that accepts preformatted text. Which of these options would you like more information about?

---

<div class="post-metadata">

**Author:** ![max.petrivskyi](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@max.petrivskyi](https://community.prismic.io/u/max.petrivskyi)\
**Post date:** [June 25, 2021, 4:35pm UTC](https://community.prismic.io/t/how-to-create-table-in-rich-text-content/5958/4 "2021-06-25T16:35:22Z")

</div>

Could explain third option more detail?  
It would be fine, if you share the example.  
Thanks

---

<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:** [June 26, 2021, 12:48am UTC](https://community.prismic.io/t/how-to-create-table-in-rich-text-content/5958/5 "2021-06-26T00:48:01Z")

</div>

I'm using a [table example from W3schools](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro). You'll need to add a [Rich text field that allows preformatted text](https://prismic.io/docs/core-concepts/rich-text-title#elements-and-styles). Then, once you have the HTML for the table you want to build, paste the code in the preformatted tex of the Rich text field.

In your document, it should look like this:

 ![Screenshot 2021-06-25 at 19.47.32](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/6/6a32be0cdd4d918359a5745234b9cde5e8df6953.png)

---

<div class="post-metadata">

**Author:** ![max.petrivskyi](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@max.petrivskyi](https://community.prismic.io/u/max.petrivskyi)\
**Post date:** [June 26, 2021, 1:46am UTC](https://community.prismic.io/t/how-to-create-table-in-rich-text-content/5958/6 "2021-06-26T01:46:44Z")

</div>

Hey, @Pau

Could you share the code of the preformatted 'htmlSerializer' for Table?

Thanks

---

<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:** [July 8, 2021, 2:11pm UTC](https://community.prismic.io/t/how-to-create-table-in-rich-text-content/5958/12 "2021-07-08T14:11:29Z")

</div>

@max.petrivskyi, In this case, an HTML Serializer isn't necessary. Since you need to build a Rich Text Field or a Slice with a Rich Text Field alone, solely dedicated to preformatted text, you'll only need to render it properly depending on the technology you're using.

For example, if you're using Next or any other React-based framework, this is how your component would look like. Let's say your Slice has a Rich Text field called `table` in the non-repeatable zone:

```auto
import * as React from 'react'
// the styling for the table component
// import './styles.css';

export const ImageCaption = ({ slice }) => (
  <div
    className="preformatted"
    dangerouslySetInnerHTML={slice.primary.preformatted}
  />
)

```

And here's an example in Vue

```auto
<template>
  <div class="preformatted">
    <div v-html="slice.primary.preformatted"></div>
  </div>
</template>

<script>
export default {
  props: ["slice"],
  name: "preformatted",
};
</script>

<style >
  // the styling for the table component
</style>

```

---

<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:** [July 15, 2021, 7:51am UTC](https://community.prismic.io/t/how-to-create-table-in-rich-text-content/5958/13 "2021-07-15T07:51:50Z")

</div>

This thread has been closed due to inactivity. [Flag to reopen](https://community.prismic.io/t/re-open-a-thread/2175).

---

<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, 12:02pm UTC](https://community.prismic.io/t/how-to-create-table-in-rich-text-content/5958/14 "2021-12-09T12:02:58Z")

</div>