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 html 5 valid code.

Thank you.

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.

Answer 2

I think the only thing missing to make it technically valid is an LI tag surrounding your TABLE.