I'm trying to create a html table to populate with some data that looks like the image below. I'm able to rotate the text with simple css but having trouble figuring out how to organize the sub rows/columns. Is this possible with html/css tables or at least grid?
I was able to solve this b treating each tag as it's own row and building the data on them individually.
<table>
<tr>
<td rowspan="4" class="rotate">Header Text</td>
<td class="rotate pole">SubHeader Text 1</td>
<td>
<ul>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
</ul>
</td>
<td>
<ul class="no-ul-style">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</td>
<td>
6
</td>
</tr>
<tr>
<td class="rotate pole">SubHeader Text 2</td>
<td>
<ul>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
</ul>
</td>
<td>
<ul class="no-ul-style">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</td>
<td>
6
</td>
</tr>
<tr>
<td class="rotate pole">SubHeader Text 3</td>
<td>
<ul>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
</ul>
</td>
<td>
<ul class="no-ul-style">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</td>
<td>
6
</td>
</tr>
<tr>
<td class="rotate pole">SubHeader Text 4</td>
<td>
<ul>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
</ul>
</td>
<td>
<ul class="no-ul-style">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</td>
<td>
6
</td>
</tr>
</table>