I want to style a table in my note editor

[mason]

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?

[Anon_0000]

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.

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.

[mason]

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.

[ZornHadNoChoice]

<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):

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