Can anyone tell how to do this as valid HTML?

Question

I am racking my brains trying to figure out the valid way to do this, here is a sample of the code which I have repeating:

<ul id="accordion">
    <li><div>20th August</div>
        <ul>
            <table class="releases-table">
                <tr>
                    <th>Game Title</th>
                    <th>Achievements</th>
                    <th>Points</th>
                </tr>
                <tr>
                    <td >Fastball 3 for iPad</td>
                    <td>12</td>
                    <td>330</td>
                </tr>
                 <tr>
                    <td >Caterpillar Kate</td>
                    <td>17</td>
                    <td>400</td>
                </tr>
            </table>
        </ul>
    </li>
</ul>

Inside the outer ul I have the li and table many times, now I know from doing some reading that I cant put a ul inside an li OR another ul, I have experimented with different variations, but I come here as I seeking the solution that will not only get my pages looking the same as they are now, but using HTML5 valid code.

Answer 1

I'm assuming the structure output here is required for your Javascript accordion widget to work.

It may be possible to specify the id/html of the accordion container through Javascript parameters. If not a library like jquery ui (http://jqueryui.com/accordion/) may be more useful if you are adamant you need valid HTML.

Alternatively just leave it as it is as most browsers would not have a problem parsing that HTML and displaying it as intended.