# I want to style a table in my note editor

**URL:** <https://forums.ankiweb.net/t/i-want-to-style-a-table-in-my-note-editor/66952>\
**Category:** Help\
**Created:** [October 9, 2025, 7:16pm UTC](https://forums.ankiweb.net/t/i-want-to-style-a-table-in-my-note-editor/66952 "2025-10-09T19:16:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mason](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mason](https://forums.ankiweb.net/u/mason)\
**Post date:** [October 9, 2025, 7:16pm UTC](https://forums.ankiweb.net/t/i-want-to-style-a-table-in-my-note-editor/66952/1 "2025-10-09T19:16:59Z")

</div>

I was making cards that used a table. I finally got it looking the way I wanted it (styling the table inline with a `<style>` element) and decided to start making more cards of the same format. However, this was problematic because the styles were just getting copied - if I wanted to change them, I would have to change them on every individual card. Then I remembered that notes have their own style section, so I made a note type specifically for this table, and put the styles in there. This fixed the problem, but created a new one - now the styles are not applied when I’m editing the card, and I get a very ugly table that has no borders or padding. Is there any way to get the styles in the editor while also sharing them?

---

<div class="post-metadata">

**Author:** ![Anon\_0000](https://avatars.discourse-cdn.com/v4/letter/a/c67d28/32.png) [@Anon\_0000](https://forums.ankiweb.net/u/Anon_0000)\
**Post date:** [October 9, 2025, 7:25pm UTC](https://forums.ankiweb.net/t/i-want-to-style-a-table-in-my-note-editor/66952/2 "2025-10-09T19:25:28Z")

</div>

I don’t think you can edit the css of the fields that you find in e.g. the _Add Cards_ Dialog. But you may use an addon that shows a preview, e.g. [https://ankiweb.net/shared/info/1960039667](https://ankiweb.net/shared/info/1960039667).

I do not use such an addon myself but judging by the images on the addon page, it should give you a proper preview based on your styles.

---

<div class="post-metadata">

**Author:** ![mason](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mason](https://forums.ankiweb.net/u/mason)\
**Post date:** [October 9, 2025, 7:46pm UTC](https://forums.ankiweb.net/t/i-want-to-style-a-table-in-my-note-editor/66952/3 "2025-10-09T19:46:50Z")

</div>

What I did just now was abstract out the values of the table into fields, and build the entire table within the template instead. While I still don’t get to see the nice table while editing, at least it’s not as messy as before, and now not only do I get to share the table styles, but I get to share the table structure as well. This feels like the right solution to me.

---

<div class="post-metadata">

**Author:** ![ZornHadNoChoice](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/zornhadnochoice/32/28874_2.png) [@ZornHadNoChoice](https://forums.ankiweb.net/u/ZornHadNoChoice)\
**Post date:** [October 9, 2025, 8:43pm UTC](https://forums.ankiweb.net/t/i-want-to-style-a-table-in-my-note-editor/66952/4 "2025-10-09T20:43:15Z")

</div>

```html
<div id="front"></div>

<script>
var front = document.getElementById("front");
var result = "";

var tables = `{{Front}}`.replaceAll('\n', '').split('<br><br>');

for (var i=0; i<tables.length; i++) {
  result += '<table>';
  var rows = tables[i].split('<br>');
  for (var j=0; j<rows.length; j++) {
    result += '<tr>';
    var cols = rows[j].split('|');
    for (var k=0; k<cols.length; k++) { 
      result += '<td>' + cols[k] + '</td>';
    }
    result += '</tr>';
  }
  result += '</table>';
}

front.innerHTML = result;
</script>

```

I used this code to make a table note type for kana. Here is what the front field might look like (new lines (`<br>`) to separate rows and pipes (`|`) to separate columns):

```auto
A | B | C
D | E | F
G | H | I

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [November 8, 2025, 8:43pm UTC](https://forums.ankiweb.net/t/i-want-to-style-a-table-in-my-note-editor/66952/5 "2025-11-08T20:43:19Z")

</div>

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