0
448
ViewsHTML coloca 4 tablas con diferentes tamaños una al lado de la otra
No puedo usar div ya que esto es para correos electrónicos HTML. Quiero poner varias mesas con diferentes alturas una al lado de la otra, pero la mesa de abajo no ocupa el espacio libre de arriba. Estoy tratando de lograr esto usando <table> : 
Pero estoy recibiendo esto en su lugar:
Este es actualmente mi código:
<style> .textCenter { text-align: center; } </style> <body> <table width="48.5%" style="float:left"> <tr> <td id="td1" class="textCenter"> </td> </tr> </table> <table width="3%" height="20px" style="float:left"> <tr width="100%"> <td width="100%"></td> </tr> </table> <table width="48.5%"> <tr> <td id="td2" class="textCenter"> </td> </tr> </table> <table width="48.5%" style="float:left; top:20%"> <tr> <td id="td3" class="textCenter"> </td> </tr> </table> <table width="3%" height="20px" style="float:left"> <tr width="100%"> <td width="100%"></td> </tr> </table> <table width="48.5%" style="float:left"> <tr> <td id="t4" width="44%" class="textCenter"> </td> </tr> </table> </body>
·
Juan Pablo Isaza
2 answers
Answer question0
Sólo se acercan las tablas. Los flotadores se consideran malas prácticas en la mayoría de los casos en estos días. Además, simplemente son complicados para trabajar.
.textCenter { text-align: center; } .wrapper table {border: solid 2px red;} <table class="wrapper"> <tr> <td style="width: 50%; vertical-align: top;"> <table> <tr> <td id="td1" class="textCenter"> Table 1 </td> </tr> </table> <table> <tr> <td id="td3" class="textCenter"> Table 3 </td> </tr> </table> </td> <td style="width: 50%; vertical-align: top;"> <table> <tr> <td id="td2" class="textCenter"> Table 2 <br /> Table 2 <br /> Table 2 <br />Table 2 <br /> </td> </tr> </table> <table> <tr> <td id="t4" width="44%" class="textCenter"> Table 4 </td> </tr> </table> </td> </tr> </table>
·
Juan Pablo Isaza
Report
0
Le sugiero que separe la lógica de estilo de su código html. Le recomiendo encarecidamente que use flexbox css en lugar de float properties . aquí está, por ejemplo, la lógica que aplico a su código.
div { display: flex; flex-wrap: wrap; } table { width: 40%; border: 2px solid red; margin: 2px; } table tr td { text-align: center; } table.table1 { height: 12rem; } table.table2 { height: 21rem; } table.table3 { height: 16rem; position: relative; top: -9rem; } table.table4 { height: 7rem; } <body> <div> <table class="table1"> <tr> <td id="td1" class="textCenter"> table 1 </td> </tr> </table> <table class="table2"> <tr> <td id="td2" class="textCenter"> table 2 </td> </tr> </table> <table class="table3"> <tr> <td id="td3" class="textCenter"> table 3 </td> </tr> </table> <table class="table4"> <tr> <td id="td4" class="textCenter"> table 4 </td> </tr> </table> </div> </body>
·
Juan Pablo Isaza
Report
Answer question