# Simple Table inside Accordion

**URL:** https://community.elfsight.com/t/simple-table-inside-accordion/148661
**Category:** Platform Tips
**Tags:** squarespace
**Created:** [March 11, 2026, 3:32am UTC](https://community.elfsight.com/t/simple-table-inside-accordion/148661 "2026-03-11T03:32:35Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)
#### Post date: [March 11, 2026, 3:32am UTC](https://community.elfsight.com/t/simple-table-inside-accordion/148661/1 "2026-03-11T03:32:35Z")

</div>

You can follow these steps to add simple table inside Accordion Block.

In case you don’t want to use complex code, you can use **[this Table Plugin](https://www.will-myers.com/products/p/simple-tables?peachs_apc=tuan-phan)** (referral link)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/b/bbff2c66c81ac8caf620bc861d4227c851ea4c6e.png)

**#1.1.** First add text in Accordion Item, use format like this

```auto
##table

bold text - underline text

bold text - underline text

bold text - underline text

bold text - underline text

bold text - underline text

bold text - underline text

bold text - underline text

bold text - underline text

boldtext - underline text

##end-table

```

for example, this is bold text

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/0/20cb90f8a97756623e70f7ae1f3da7013c54bada.jpeg)

this is underline text

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/9/7995fb930dfee798948792a66ffe8bd641f9d563.png)

**#1.2.** Hover on top right of section \> Click Edit Section

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/b/3b717ca0e946c493be098c773e55387735f504f8.png)

at Anchor Link, enter: table-accordion

```auto
table-accordion

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/7/d7fefe15a87ecdedde2a7d3b7a1b0b0b7589aff1.jpeg)

**#1.3.** Hover on page where you use Accordion \> Click Gear icon

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/2/2235c83def91c9f791d9e2c24eacfc86328d0419.png)

Paste this code

```auto
<!-- 01.26c29v2 Simple Table inside Accordion -->
<style>
  .tp-acc-table {
    --border-color: rgba(0, 0, 0, 0.25);
    --header-bg: rgba(0, 0, 0, 0.06);
    --font-size: 14px;
    --cell-padding: 8px 10px;
    --col-left-width: 60%;
    --col-right-width: 40%;
  }
  .tp-acc-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--font-size)}.tp-acc-table td,.tp-acc-table th{border:1px solid var(--border-color);padding:var(--cell-padding);vertical-align:middle;text-align:left}.tp-acc-table thead th{background:var(--header-bg)}.tp-acc-table u{text-decoration:none}.tp-acc-table td:first-child,.tp-acc-table th:first-child{width:var(--col-left-width)}.tp-acc-table td:last-child,.tp-acc-table th:last-child{width:var(--col-right-width)}
</style>
<script>
(()=>{"use strict";const e='section[id*="table-accordion"]',t=e=>(e||"").replace(/\u00a0/g," ").replace(/\s+/g," ").trim(),n=(e,n)=>t(e.textContent).toLowerCase()===n,r=e=>{const n=e.querySelector("strong"),r=e.querySelector("u");let o=n?t(n.textContent):"",a=r?t(r.textContent):"";if(!o||!a){const n=t(e.textContent).match(/^(.+?)\s+([^\s].*)$/);!o&&n&&(o=t(n[1])),!a&&n&&(a=t(n[2]))}return o||a?{left:o,right:a}:null},o=e=>{if("1"===e.dataset.tpTableDone)return;const t=Array.from(e.querySelectorAll("p"));let o=-1,a=-1;for(let e=0;e<t.length;e++)if(n(t[e],"##table")&&(o=e),n(t[e],"##end-table")){a=e;break}if(-1===o||-1===a||a<=o)return;const c=t.slice(o+1,a).map(r).filter(Boolean);if(!c.length)return;const l=(e=>{const t=document.createElement("table");t.className="tp-acc-table";const n=document.createElement("thead"),r=document.createElement("tbody");return e.forEach(((e,t)=>{const o=document.createElement("tr");if(0===t){const t=document.createElement("th"),r=document.createElement("th");t.innerHTML=`<strong>${e.left}</strong>`,r.innerHTML=`<u>${e.right}</u>`,o.appendChild(t),o.appendChild(r),n.appendChild(o)}else{const t=document.createElement("td"),n=document.createElement("td");t.innerHTML=`<strong>${e.left}</strong>`,n.innerHTML=`<u>${e.right}</u>`,o.appendChild(t),o.appendChild(n),r.appendChild(o)}})),t.appendChild(n),t.appendChild(r),t})(c);t.slice(o,a+1).forEach((e=>{e.setAttribute("data-tp-marker","1")}));t[o].insertAdjacentElement("beforebegin",l),t.slice(o,a+1).forEach((e=>e.remove())),e.dataset.tpTableDone="1"},a=()=>{document.querySelectorAll(e).forEach((e=>{e.querySelectorAll(".accordion-item__description").forEach(o)}))},c=new WeakMap,l=()=>{a(),setTimeout(a,250),setTimeout(a,1200),document.querySelectorAll(e).forEach((e=>{if(c.has(e))return;const t=new MutationObserver((()=>a()));t.observe(e,{subtree:!0,childList:!0,characterData:!0}),c.set(e,t)}))};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",l):l(),window.addEventListener("load",l),document.addEventListener("mercury:load",l)})();
</script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/b/1b175f28d1d7a760e67f7b054fd92da54f07cfb0.jpeg)

**#2.1.** To remove bold in bold text, you can use this to Custom CSS

```auto
table.tp-acc-table tr td strong {
    font-weight: normal;
}

```

**#2.2.** To adjust first – second columns width, adjust these lines (line 08, line 09)

```auto
--col-left-width: 60%;
--col-right-width: 40%;

```

**#2.3.** To adjust text size, edit line 06

```auto
--font-size: 14px;

```

**#2.4.** To edit table header background, change line 05

```auto
--header-bg: rgba(0, 0, 0, 0.06);

```

**#2.5.** To adjust table line border, edit line 04

```auto
--border-color: rgba(0, 0, 0, 0.25);

```

**#2.6.** To apply code on **Personal/Basic Plan** , you can repeat step **#1.1** , **#1.2** , then add a **Markdown Block under Accordion** Block

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/1/b171e88423071482d4c7ae5c8119612e7d2b10ba.png)

and add this code into **Markdown Block**

```auto
<script src="https://code.beaverhero.com/accordion/0126c29v2simpletable.js"></script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/7/e780341177d15a7bd8c119b6f7712761e3ae5350.png)

and add this code to **Custom CSS box**

```auto
/* table in accordion */
.tp-acc-table {
    --border-color: rgba(0, 0, 0, 0.25);
    --header-bg: rgba(0, 0, 0, 0.06);
    --font-size: 14px;
    --cell-padding: 8px 10px;
    --col-left-width: 60%;
    --col-right-width: 40%;
  }
  .tp-acc-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--font-size)}.tp-acc-table td,.tp-acc-table th{border:1px solid var(--border-color);padding:var(--cell-padding);vertical-align:middle;text-align:left}.tp-acc-table thead th{background:var(--header-bg)}.tp-acc-table u{text-decoration:none}.tp-acc-table td:first-child,.tp-acc-table th:first-child{width:var(--col-left-width)}.tp-acc-table td:last-child,.tp-acc-table th:last-child{width:var(--col-right-width)}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/b/9b39b8afddbc6e2ab9dc9f6af6ce4cefbc1040f7.jpeg)