how to create this table with HTML or MARKDOWN only? [duplicate] - html

Question

This question already has answers here:
How do you use colspan and rowspan in HTML tables?
(11 answers)
Closed 2 years ago.
I need to create a document with the table below, it can be either in HTML or in MARKDOWN, but I simply cannot do it. The difficult is in splitting the LATAM and ITPT into multiple rows. Can someone help please?

Answer 1

You can make this using colspan and rowspan on html based on table.
<table border="1" width="100%">
<tr>
<td colspan="2">HCM</td>
<td>C88</td>
<td>C7Z</td>
<td>C6Z</td>
<td>CHR</td>
<td>CHR</td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5" style="writing-mode: vertical-rl; text-orientation: upright;">LATAM</td>
<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>
</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>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<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>
</tr>
</table>

Answer 2

td {
border: 2px solid black;
text-align: center
}
table {
border-collapse: collapse;
}
.break {
word-break: break-all;
width: 1em;
letter-spacing: 1em;
}
<table>
<tr>
<td colspan=2>HCM</td>
<td>C88</td>
<td>C7Z</td>
<td>C7H</td>
<td>C6Z</td>
<td>CHR</td>
</tr>
<tr>
<td colspan=2>BR</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan=5 class="break">LATAM</td>
<td>AR</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CL</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CO</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>MX</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>VE</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>ES</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>NA</td>
<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>
<tr>
<td rowspan=2 class="break">ITPT</td>
<td>IT</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>PT</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr></tr>
</table>
Relatively painstaking, but it works

Answer 3

Using colspan and rowspan you can manipulate how each td is displayed, for example to output the structure you have shown in your design containing LATAM, you are required to use rowspan=5. This will indicate that the said td element will 'stretch', for want of a better word, over 5 rows.
Note I understand you have asked for this to be done in HTML only, the height and border are for better visualization.
td {
border: 1px solid black;
height: 32px;
}
<table>
<tr>
<td colspan=2>
HCM
</td>
<td>
C88
</td>
<td>
C7Z
</td>
<td>
C7H
</td>
<td>
C6Z
</td>
<td>
CHR
</td>
</tr>
<tr>
<td colspan=2>
BR
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td rowspan=5 style=>
L<br>A<br>T<br>A<br>M
</td>
<td>
AR
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
CL
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
CO
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
MX
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
VE
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan=2>
ES
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan=2>
NA
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td rowspan=5 style=>
I<br>T<br>P<br>T
</td>
<td>
IT
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
PT
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>