How can I put the tables vertically? HTML5 Hello, the help I need is that I don't know how to make the 3 tables remain horizontal as in the second image, I attach photos to make my question clearer as well as the code for any questions, thanks in advance.
And I take care that they stay like this
And this is the code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Laboratorio</title>
<style>
body {
background-color: white;
}
table{
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 20px;
}
th{
border: 1px solid black;
text-align: center;
padding: 20px;
}
td{
border: 1px solid black;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th style="background-color: rgba(191,191,191,255);">Paises</th>
<th style="background-color: rgba(191,191,191,255);">Medallas</th>
</tr>
<tr>
<td>USA</td>
<td>13</td>
</tr>
<tr>
<td>China</td>
<td>25</td>
</tr>
<tr>
<td>España</td>
<td>6</td>
</tr>
<tr>
<td>Francia</td>
<td>3</td>
</tr>
</table>
<table>
<tr>
<td colspan="2" style="background-color: lightblue;">A</td>
<td style="background-color: rgb(236,212,100);">B</td>
<td style="background-color: rgb(171,206,142);">C</td>
</tr>
<tr>
<td rowspan="3" style="background-color: rgba(174,170,169,255);">D</td>
<td colspan="2" style="background-color: rgba(237,125,49,255);">E</td>
<td style="background-color: rgba(67,112,206,255);">F</td>
</tr>
<tr>
<td style="background-color: rgba(112,173,70,255);">G</td>
<td colspan="2" style="background-color: rgba(201,201,201,255);">H</td>
</tr>
<tr>
<td style="background-color: rgba(46,116,182,255);">I</td>
<td style="background-color: rgba(194,89,19,255);">J</td>
<td style="background-color: rgba(191,143,0,255);">K</td>
</tr>
</table>
<table>
<tr>
<td colspan="2" rowspan="2" style="background-color: rgba(189,215,238,255);">A</td>
<td style="background-color: rgb(236,212,100);">B</td>
<td style="background-color: rgb(171,206,142);">C</td>
</tr>
<tr>
<td colspan="2" style="background-color: rgba(68,115,197,255);">D</td>
</tr>
<tr>
<td colspan="4" style="background-color: rgba(112,173,70,255);">E</td>
</tr>
<tr>
<td style="background-color: rgba(174,170,169,255);">F</td>
<td style="background-color: rgba(47,116,179,255);">G</td>
<td colspan="2" style="background-color: rgba(197,89,17,255);">H</td>
</tr>
</table>
</body>
</html>
Thanks for the answers so far, here is the code, hopefully it can help me, that doubt has stuck to me and I suppose it is simple because it is to pass them from being vertical to being horizontal. By the way, I am working on the code in visual studio code.
What I did was enclose all your tables inside a
div
with a class called.contenido
, to this class I applied the following property:Then, to have a better result, I applied the property
margin
to your tables so that they have a gap on the sides:Your end result would look like this: