I have a table that indicates the code of Argentine provinces, and when I do the rowspan for each one, it stays in the middle of the cell and it looks ugly... So I'm playing a bit with the styles to see how it would look better...
What I want is for the two cells on the left (the ones that say "Region" and "Code") to be almost glued to the top edge of the cell... almost touching it.
I tried doing margin: 0;
padding: 0;
but did not achieve any result. Also with cellspacing: 0;
and cellpadding=0
.
Let's imagine I have this table:
table{
text-align: center;
width: 100%;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
border-collapse: collapse;
}
td{
border: 1px solid black;
}
<div style="margin-top: 10px; text-align: center;">
<table>
<tbody>
<tr>
<td rowspan="26" style="text-align: left; font">Región</td>
<td rowspan="26" style="text-align: left">Código</td>
</tr>
<tr>
<td>00</td>
<td>Capital Federal</td>
</tr>
<tr>
<td>01</td>
<td>Buenos Aires</td>
</tr>
<tr>
<td>02</td>
<td>Catamarca</td>
</tr>
<tr>
<td>03</td>
<td>Córdoba</td>
</tr>
<tr>
<td>04</td>
<td>Corrientes</td>
</tr>
</tbody>
</table>
</div>
You can use vertical-align:top; here is a link with more information: https://www.delftstack.com/es/howto/html/html-table-align-top/