I am trying to reproduce the following table in HTML
I have reached the following structure with the following code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
.vertical-text {
transform: rotate(270deg);
transform-origin: left top 0;
}
</style>
</head>
<body>
<table>
<caption>Stadializarea nefropatiei diabetice</caption>
<thead>
<tr>
<td rowspan="11">60</td>
<th colspan="4"></th>
<th colspan="4">Persistent albuminuria categories<br>Description and range
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4">Stadializarea CKD in functie<br> de filtrarea glomerulara si albuminurie</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
</tbody>
</table>
</html>
But I can not:
- merge the nine cells of the first column (with the 60s) with the nine cells of the second column (and eliminate their left and upper border);
- merge the cells 10-15 of the first column, so I can enter some vertical text in there;
without altering the current layout. I appreciate any suggestion. Is there an easier way than a html table to implement this?
Here's the starting HTML you need:
table, td {
border:1px solid #999;
}
td {
width: 50px;
height: 20px;
}
<table>
<tr>
<td colspan="4" rowspan="4"></td>
<td colspan="3"></td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="6"></td>
<td>G1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G3a</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G3b</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Related
Curious how to make a TD cell bigger without adjusting the height of the entire row?
I know I can do do inline styling with "rowspan= 7", but that centers the data in the middle of the cell.
I am trying to build a table like this image and don't know how to size "Some Data" and "Other Data" cells like so..
table {
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: 30vw;
border: 1px solid black;
}
<table>
<tr>
<td></td>
<td>Heading</td>
<td>Heading 2</td>
</tr>
<tr>
<td rowspan="8">Some Data</td>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td rowspan="8">Other Data</td>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
</table>
Simply add a class to the table cells with rowspan. I used the class: .rowspan. Then use css to declare: vertical-align: top; and the issue is solved.
table {
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: 30vw;
border: 1px solid black;
}
.rowspan {
vertical-align: top;
}
<table>
<tr>
<td></td>
<td>Heading</td>
<td>Heading 2</td>
</tr>
<tr>
<td rowspan="8" class="rowspan">Some Data</td>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td rowspan="8" class="rowspan">Other Data</td>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
</table>
I've spent some time figuring out how to do this, and I figured out I'm really not good at html tables..
Need help how to actually do this.
Here is my base code I'm stuck with, No need for the table header
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="3">
Physical Accomplishment
</td>
<td>Projected</td>
<td>Weekly Cumulative</td>
</tr>
<tr>
<td>Actual</td>
<td>Weekly Cumulative</td>
</tr>
<tr>
<td>Slippage</td>
<td>Weekly Cumulative</td>
</tr>
</tbody>
</table>
Here's what I'm aiming for:
Use rowspan 6 for the first column and rowspan 2 for the second and third column
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="6">
Physical Accomplishment
</td>
<td rowspan="2">Projected</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Actual</td>
<td rowspan="2">Weekly Cumulative</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Slippage</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I use LibreOffice to draw out the table, then export the HTML to produce this:
<table border="1" width="100%" height="300px">
<tr>
<td rowspan=6>Physical Accomplishment</td>
<td rowspan=2>Projected</td>
<td rowspan=2>Weekly cumulative</td>
<td>0.15%</td>
<td>0.15%</td>
<td>0.15%</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td rowspan=2>Actual</td>
<td rowspan=2>Weekly cumulative</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>I</td>
</tr>
<tr>
<td rowspan=2>Slippage</td>
<td rowspan=2>Weekly cumulative</td>
<td>0.15%</td>
<td>0.15%</td>
<td>0.15%</td>
</tr>
<tr>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</table>
You need to learn these 2 important attributes in HTML table, rowspan= and colspan=.
Please find this link for tutorial Tutorial link.
For now this what you need...
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="6">
Physical Accomplishment
</td>
<td rowspan="2">Projected</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Actual</td>
<td rowspan="2">Weekly Cumulative</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Slippage</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
How can I merge row and column as the figure blow in HTML?
After trying many times, I found the solution.
<table border="1">
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Province</td>
<td colspan="2">Level</td>
<td>Other</td>
</tr>
<tr>
<td colspan="2">XL</td>
<td></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td></td>
</tr>
<tr>
<td>001</td>
<td>Province #1</td>
<td>5</td>
<td>9</td>
<td></td>
</tr>
<tr>
<td>002</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Pardon me for the title, i couldn't find more accurate description for it.
I'm breaking a long rows in a table into several pages.
Everything is ok with page-break-after for TR.
My only problem is, it starts at very beginning and ends at very bottom of a page making my header & footer covered with table data.
I tried putting margin and padding everywhere but none seems to work.
Below is my CSS,
#media print {
html, body {
width: 210mm;
height: 297mm;
background:#fff;
}
.page-layout {
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
table.report { page-break-after:auto }
table.report tr { page-break-inside:avoid; page-break-after:auto }
table.report td { page-break-inside:avoid; page-break-after:auto }
table.report thead { display:table-header-group; margin-top:50px; }
table.report tfoot { display:table-footer-group }
.header {
display:block;
position:fixed;
top: 0px;
font-weight:bold;
font-size:14px;
text-align:right;
right:0px;
}
.footer {
z-index: 1;
position: fixed;
left: 0;
bottom: 0;
text-align: left;
left: 0;
width:100%;
display:block;
}
}
Below is my HTML
<div class="header">MY HEADER</div>
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>
<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<?php for ($x=1; $x<100; $x++) {//loop ?>
<tr>
<td align="center"><?=$x?></td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<?php } //endloop ?>
</tbody>
</table>
</div>
<div class="footer">MY FOOTER</div>
Here is what it looks like when printing,
After intensive research on the net, i found that there is no proper way to do it.
There is a discussion about #page rule that likely what i intended to achieve. Unfortunately it didn't work. I learned that this feature have not been implemented on most browser yet. I don't know which browser support it.
Finally, i have came across some trick. THEAD and TFOOT are designed to repeat on print. So i put a blank row on the thead top, leaving an empty space every time it was repeated, just enough for the header to show up. And also an empty row below tfoot for footer area.
Unfortunately, tfoot didn't repeat itself on chrome. IE and Firefox are ok.
If you have this kind of problems when after and before table start needs some extra space for other page footer, like this:
you can fix it this way:
<style>
#media print {
.table-breaked {
page-break-before: auto;
}
.no-border{
border: none !important;
}
.footer-repeat {
display: table-footer-group;
}
}
</style>
<div class="table-breaked">
<table class="pt-20">
<thead>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<!-- add extra space for printing -->
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<!-- add extra space for printing -->
<tr>
<th class="text-center">Value 1<br/>№ Date</th>
<th class="text-center">Value 2</th>
<th class="text-center">Value 3</th>
<th class="text-center">Value 4</th>
<th class="text-center">Value 5</th>
</tr>
</thead>
<tbody>
<!-- more trs here -->
<tr>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
</tr>
</tbody>
<tfoot class="footer-repeat">
<!-- add repeated tfoot for extra space -->
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
</tfoot>
</table>
</div>
Here is a result:
You can use
#page{
size: A4;
margin-top: 50px;
margin-bottom: 50px;
}
Adding page-break-inside:avoid to the cells worked for me:
table td, table th {
page-break-inside: avoid;
}
I've been able to solve this for my use case by setting position: relative; top: 100px; on the top-most element.
Try this
#media print {
html, body {
width: 210mm;
height: 297mm;
background:#fff;
}
.page-layout {
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
table.report { page-break-after:auto }
table.report tr { page-break-inside:avoid; page-break-after:auto }
table.report td { page-break-inside:avoid; page-break-after:auto }
table.report thead { display:table-header-group; margin-top:50px; }
table.report tfoot { display:table-footer-group }
.header {
display:block;
position:fixed;
top: 0px;
font-weight:bold;
font-size:14px;
text-align:right;
right:0px;
}
.footer {
z-index: 1;
position: fixed;
left: 0;
bottom: 0;
text-align: left;
left: 0;
width:100%;
display:block;
}
}
<div class="header">MY HEADER</div>
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>
<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">2</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">3</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">4</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">5</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">6</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">7</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">8</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">9</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">10</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">11</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">12</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">13</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">14</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">15</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">16</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">17</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">18</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">19</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">20</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">21</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">22</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">23</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">24</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">25</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">26</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">27</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">28</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">29</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">30</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">31</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">32</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">33</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">34</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">35</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">36</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">37</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">38</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">39</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">40</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">41</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">42</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">43</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">44</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">45</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">46</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">47</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">48</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">49</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">50</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">51</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">52</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">53</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">54</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">55</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">56</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">57</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">58</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">59</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">60</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">61</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">62</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">63</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">64</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">65</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">66</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">67</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">68</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">69</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">70</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">71</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">72</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">73</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">74</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">75</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">76</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">77</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">78</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">79</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">80</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">81</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">82</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">83</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">84</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">85</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">86</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">87</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">88</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">89</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">90</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">91</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">92</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">93</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">94</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">95</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">96</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">97</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">98</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">99</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="footer">MY FOOTER</div>
https://jsfiddle.net/tn7rd9sq/
I need create the table of this image:
<table border='1'>
<tr>
<th rowspan="3">text</th>
<th colspan="2">text</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>other text</td>
<td>2</td>
<td>2</td>
</tr>
</table>
I do not know how to do the part when there are 3 together
td {
width: 20px;
height: 20px;
}
td.wider {
width: 60px;
}
tr.taller {
height: 40px;
}
<table border='1'>
<tr class="taller">
<td class="wider" rowspan="3"></td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>