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?
Asked
Active
Viewed 232 times
-3
-
3have you tried anything? – corn on the cob Oct 20 '20 at 16:51
3 Answers
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>
Derek Wang
- 10,098
- 4
- 18
- 39
1
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>
Ballard
- 869
- 11
- 25
1
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
AlexH
- 828
- 7
- 26