spiraea | cr chart thing!

Here's a handy-dandy, cleaned up code for a simple CR chart where you can establish a key of colors and simply assign to characters! You can add a line or two of text below names, but any more than that and the table will probably start getting wonky. This is for us who are super lazy and just want to pick colors...

The base code was by

pagans! I simply added the key and color bars and did some tweaking.

⭐️ LIVE PREVIEW ⭐️

❚ love ❚ family ❚ good friend ❚ friend ❚ acquaintance ❚ unsure ❚ dislike

TITLE
NAME info	NAME info	NAME info	NAME info
NAME info	NAME info	NAME info
base code by pagans

You can also see it in action here!

THE CODE

<center>
<!-- KEY, make sure there's a space after each keyword --!>
<p><font style="font-family: arial; text-transform: uppercase; letter-spacing: 3px; font-size: 8px">
<font style="font-size: 150%; color: #d07fdb;">❚</font> love 
<font style="font-size: 150%; color: #822FB0;">❚</font> family 
<font style="font-size: 150%; color: #5673ea;">❚</font> good friend 
<font style="font-size: 150%; color: #95EC00;">❚</font> friend 
<font style="font-size: 150%; color: #FFD100;">❚</font> acquaintance 
<font style="font-size: 150%; color: #ff8000;">❚</font> unsure 
<font style="font-size: 150%; color: #FF1800;">❚</font> dislike</font></p>

<raw-code><table style="font-family: Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;">

<!-- TITLE, DELETE IF NOT NEEDED --!>
<tr><td colspan="4" style="text-align: left; padding: 10px; font-weight: 100; text-transform: uppercase;"><span style="font-size: 2em; letter-spacing: 8pt;">TITLE</span></td></tr>
<!-- TITLE END --!>

<!--YOUR CHARACTERS COME IN AFTER THIS LINE--!>
<!--ROW START--!>
<tr>
<td style="text-align: left; padding:10px; width:100px;">
<div style="width: 100px; height: 100px; align: float; position: relative; background-position: center; background-repeat: no-repeat; border-radius: 50%;">
<div style="width: 100px; height: 100px; background: url(URL HERE); background-size: cover; background-color:#aaa; position: relative; border-radius: 50%;"></div></div>

<!-- change the color of the hr tag accordingly --!>
<hr style="border: solid 5px #d07fdb;">

<!-- change the color of the hr tag accordingly --!>
<hr style="border: solid 5px #822FB0;">

<!-- change the color of the hr tag accordingly --!>
<hr style="border: solid 5px #5673ea;">

<!-- change the color of the hr tag accordingly --!>
<hr style="border: solid 5px #95EC00;">

</tr>
<!--ROW END--!>

<!--ROW START--!>
<tr>
<td style="text-align: left; padding:10px; width:100px;">
<div style="width: 100px; height: 100px; align: float; position: relative; background-position: center; background-repeat: no-repeat; border-radius: 50%;">
<div style="width: 100px; height: 100px; background: url(URL HERE); background-size: cover; background-color:#aaa; position: relative; border-radius: 50%;"></div></div>

<!-- change the color of the hr tag accordingly --!>
<hr style="border: solid 5px #FFD100;">

<!-- change the color of the hr tag accordingly --!>
<hr style="border: solid 5px #ff8000;">

<!-- change the color of the hr tag accordingly --!>
<hr style="border: solid 5px #FF1800;">

</tr>
<!--ROW END--!>

NOTES
⭐️ Make sure you check the `Disable Auto-Formatting` option!
⭐️ Feel free to change the number of colors and their actual values obvs... Or really anything else about this code... Go wild...
⭐️ I like how it looks with 4 per row, but you can change this by simply adding more items between the `tr` tags. ⭐️ Hope this works for people! ;w;