How to fix Table is upside down - html

Question

I made a table in my .html file but after checking the page my table was upside down ex my first row is the last row.
#class-container {
position: relative;
width: 80%;
top: 5%;
margin: auto;
background: white;
padding-top: 100px;
clear: both;
}
<div id="class-container">
<table cellpadding="10px" width="100%">
<tr>
<th>
<h1>
Avantaje
</h1>
</th>
<th>
<h1>
Dezavantaje
</h1>
</th>
</tr>
<tr>
<ul type="square">
<li>
<h2>
Consumul redus
</h2>
</li>
<li>
<h2>
Poluarea aproape de zero in afara productiei
</h2>
</li>
<li>
<h2>
Eficienta/randament foarte mare
</h2>
</li>
<li>
<h2>
Accelerare instanta
</h2>
</li>
</ul>
</tr>
</table>
</div>
And the funny thing is that I have another table in another .html file whith the same div and I don't have a problem with that table
I browsed the web but I couldn't find an answer.

Answer 1

You should wrap your ul in a td which should put the headers up back where you expect them.
#class-container {
position: relative;
width: 80%;
top: 5%;
margin: auto;
background: white;
padding-top: 100px;
}
<div id="class-container">
<table cellpadding="10px" width="100%">
<tr>
<th>
<h1>
Avantaje
</h1>
</th>
<th>
<h1>
Dezavantaje
</h1>
</th>
</tr>
<tr>
<td>
<ul type="square">
<li>
<h2>
Consumul redus
</h2>
</li>
<li>
<h2>
Poluarea aproape de zero in afara productiei
</h2>
</li>
<li>
<h2>
Eficienta/randament foarte mare
</h2>
</li>
<li>
<h2>
Accelerare instanta
</h2>
</li>
</ul>
</td>
<td></td>
</tr>
</table>
</div>