Wikia <div> issues

Question

Okay, so I'm working on a template on Wikia, but I'm having a weird issue with my last <div> tag that surrounds the Stat Table. Link to the page is here (Note that it can change).

The code is as follows:

<div style="background-color: #222; width: 98%; border: .1em solid #4372AA;">
{| border="1" class="article-table" style="margin: 1% auto 1% auto; width:98%;"
! colspan="5" style="text-align:center;"|Level 1
! colspan="4" style="text-align:center;"|Level 40
|-
!
|AP || DP || HP || TP || AP || DP || HP || TP
|-
! [[file:Common.png|center|]]
|<small>{{{CAP1}}} || <small>{{{CDP}}} || <small>{{{CHP1}}} || <small>{{{CTP1}}}
|<small>{{{CAP40}}} || <small>{{{CDP}}} || <small>{{{CHP40}}} || <small>{{{CTP40}}}
|-
![[file:Uncommon.png|center|]]
|<small>{{{UAP1}}} || <small>{{{UDP}}} || <small>{{{UHP1}}} || <small>{{{UTP1}}}
|<small>{{{UAP40}}} || <small>{{{UDP}}} || <small>{{{UHP40}}} || <small>{{{UTP40}}}
|-
![[file:Rare.png|center|]]
|<small>{{{RAP1}}} || <small>{{{RDP}}} || <small>{{{RHP1}}} || <small>{{{RTP1}}}
|<small>{{{RAP40}}} || <small>{{{RDP}}} || <small>{{{RHP40}}} || <small>{{{RTP40}}}
|}
</div>

If you visit the page, you'll notice that the closing </div> tag displays as text instead of closing off the div. (The stat table SHOULD have the same div format as the Fixed Options table. The div is essentially copied and pasted for each block, with only the margins edited, but for some reason, it doesn't work around the stat table.)

EDIT: The link no longer contains the erroneous table. Here is how your table looks like:

Answer 1

I don't see any issues. all tables are closed.

Answer 2

From your table code, you used one div tag, surrounding your wikitable that contains headers placed after ordinary rows as well as containing multiple unclosed <small> tags.

<div style="...">[wikitable]</div>

Much like HTML, <div> specifies a division of source code to be styled. In this case, the text of the whole table is to be styled as it is within the only opening and closing <div>...</div> bracket.

Delete all <small> tags, which removes the trailing </div> being displayed, except that the text isn't small anymore. To make them small again, surround each text in the table entries with <small>{{{...}}}</small>:

<div style="background-color: #222; width: 98%; border: .1em solid #4372AA;">
{| border="1" class="article-table" style="margin: 1% auto 1% auto; width:98%;"
! colspan="5" style="text-align:center;"|Level 1
! colspan="4" style="text-align:center;"|Level 40
|-
!
|AP || DP || HP || TP || AP || DP || HP || TP
|-
! [[file:Common.png|center|]]
|<small>{{{CAP1}}}</small> || <small>{{{CDP}}}</small> || <small>{{{CHP1}}}</small> || <small>{{{CTP1}}}</small>
|<small>{{{CAP40}}}</small> || <small>{{{CDP}}}</small> || <small>{{{CHP40}}}</small> || <small>{{{CTP40}}}</small>
|-
![[file:Uncommon.png|center|]]
|<small>{{{UAP1}}}</small> || <small>{{{UDP}}}</small> || <small>{{{UHP1}}}</small> || <small>{{{UTP1}}}</small>
|<small>{{{UAP40}}}</small> || <small>{{{UDP}}}</small> || <small>{{{UHP40}}}</small> || <small>{{{UTP40}}}</small>
|-
![[file:Rare.png|center|]]
|<small>{{{RAP1}}}</small> || <small>{{{RDP}}}</small> || <small>{{{RHP1}}}</small> || <small>{{{RTP1}}}</small>
|<small>{{{RAP40}}}</small> || <small>{{{RDP}}}</small> || <small>{{{RHP40}}}</small> || <small>{{{RTP40}}}</small>
|}
</div>

The end result would not have the trailing </div> shown, and the entries in <small> tags remain smaller than normal-sized text.