Re: Help with setting up tables

#1
Hi there.

After some long hours of blood, sweat and tears, I've managed to make a stat table that looks good enough.
Here's a picture of what I have so far.

https%3A%2F%2Fi.imgur.com%2F3VFPFtX.png

There are a few things still bothering me:

1. The rows I wanted to use to separate the different stat groups, and as a border. Is there a way to reduce their size? No matter what I try, the editor doesn't seem to let me go below a certain value, including editing the html.

2. Is there a way to get rid of the thin borders I've marked with an X, WITHOUT getting rid of the rest of them? Everything I've tried seems to get rid of all borders altogether, and then the table goes back to being horrible.

Re: Help with setting up tables

#2
Hi there,
I was able to get it to more or less do what you are looking for.
I found the solution to be adding a border of the same color as the background to cover it up.
I'll be posting some of the html code, sounds like you are able to play with it. If you have problems let me know.

I would recommend, transposing the HTML into an excel file and just build some formulas to put everything where you need it and update the table. That way you can easily update the excel file and just copy + paste the html code to resolve it.
https%3A%2F%2Fi.imgur.com%2F2ctdj7m.png


Quote:<table style="width: 400px !important; height: 286px; border-collapse: collapse;" border="1">
<tbody>
<tr style="height: 2px;">
<td style="width: 674px; height: 2px; text-align: center; border: 0px !important;" colspan="6">&nbsp;</td>
</tr>
<tr style="height: 20px;">
<td style="width: 674px; height: 20px; text-align: center; color: #000000; background-color: #ffd966;" colspan="6"><strong>Main Character</strong></td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #ffe699;"><strong>Image Stone</strong></td>
<td style="width: 524px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;" colspan="5">Rough Sapphire</td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #ffe699;"><strong>Class Image</strong></td>
<td style="width: 524px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;" colspan="5">Mage</td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #ffe699;"><strong>Level</strong></td>
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">15</td>
<td style="width: 64px; height: 20px; text-align: center; color: #000000; background-color: #ffe699;" colspan="2"><strong>Next Level</strong></td>
<td style="width: 299px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;" colspan="2">725 / 2743</td>
</tr>
<tr style="height: 20px;">
<td style="width: 674px; height: 2px; text-align: center; border: 1px solid #00436e !important;" colspan="5">&nbsp;</td>
</tr>
<tr style="height: 20px;">
<td style="width: 289px; height: 20px; text-align: center; color: #000000; background-color: #ffd966;" colspan="2"><strong>Attributes (130/130)</strong></td>
<td style="width: 63px; height: 20px; text-align: center; color: #000000; border: 0px !important;">&nbsp;</td>
<td style="width: 300px; height: 20px; text-align: center; color: #000000; background-color: #ffd966;" colspan="3"><strong>Shards</strong></td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #ffe699;">HP</td>
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #ffe699;">856 / 856</td>
<td style="width: 63px; height: 20px; text-align: center; color: #000000; border: 0px !important;">&nbsp;</td>
<td style="width: 300px; height: 20px; text-align: center; color: #000000; background-color: #ffa0a0;" colspan="3"><strong>-</strong></td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #ffe699;">SP</td>
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #ffe699;">603 / 603</td>
<td style="width: 63px; height: 20px; text-align: center; color: #000000; border: 0px !important;">&nbsp;</td>
<td style="width: 300px; height: 20px; text-align: center; color: #000000; background-color: #ffa0a0;" colspan="3"><strong>-</strong></td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #ffe699;">MP</td>
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #ffe699;">1160 / 1160</td>
<td style="width: 63px; height: 20px; text-align: center; color: #000000; border: 0px !important;">&nbsp;</td>
<td style="width: 300px; height: 20px; text-align: center; color: #000000; background-color: #a0ffa0;" colspan="3"><strong>-</strong></td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">Strength</td>
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">104</td>
<td style="width: 63px; height: 20px; text-align: center; color: #000000; border: 0px !important;">&nbsp;</td>
<td style="width: 300px; height: 20px; text-align: center; color: #000000; background-color: #a0ffa0;" colspan="3"><strong>-</strong></td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">Endurance</td>
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">126</td>
<td style="width: 63px; height: 20px; text-align: center; color: #000000; border: 0px !important;">&nbsp;</td>
<td style="width: 300px; height: 20px; text-align: center; color: #000000; background-color: #a0a0ff;" colspan="3"><strong>-</strong></td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">Agility</td>
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">141</td>
<td style="width: 63px; height: 20px; text-align: center; color: #000000; border: 0px !important;">&nbsp;</td>
<td style="width: 300px; height: 20px; text-align: center; color: #000000; background-color: #a0a0ff;" colspan="3"><strong>-</strong></td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">Willpower</td>
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">209</td>
<td style="width: 63px; height: 20px; text-align: center; color: #000000; border: 0px !important;">&nbsp;</td>
<td style="width: 300px; height: 20px; text-align: center; color: #000000; border: 0px !important;" colspan="3">&nbsp;</td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">Resilience</td>
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">236</td>
<td style="width: 63px; height: 20px; text-align: center; color: #000000; border: 0px !important;">&nbsp;</td>
<td style="width: 300px; height: 20px; text-align: center; color: #000000; background-color: #ffd966;" colspan="3"><strong>Essence</strong></td>
</tr>
<tr style="height: 20px;">
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">Acuitity</td>
<td style="width: 139px; height: 20px; text-align: center; color: #000000; background-color: #fff2cc;">242</td>
<td style="width: 63px; height: 20px; text-align: center; color: #000000; border: 1px solid #00436e !important;">&nbsp;</td>
<td style="width: 300px; height: 20px; text-align: center; color: #ffffff; background-color: #000000;" colspan="3"><strong>246</strong></td>
</tr>
<tr style="height: 2px;">
<td style="width: 674px; height: 2px; text-align: center; border: 0px !important;" colspan="6">&nbsp;</td>
</tr>
</tbody>
</table>