States that you want to achieve

  1. 1 column must be the same height as 2 other columns
  2. 1 column should be 40% of the width, and 2 others should be 30% each.
  3. Rows in the last 2 columns must be the same height.
  4. The first 2 lines should be at 40% of the height, and the last line should be 20%

Help please, tortured already align.
I attach a photo for clarity

layout

thank

1 answer 1

c <table>

 <style> body, html { width:100%; height:100%; padding:0px; margin:0px; } #mytable { width:100%; height:100%; border-spacing:0px; } #mytable td { text-align:center; vertical-aligh:middle; } #myrow1 { height:40%; } #myrow2 { height:20%; } .c-red { background-color:red; } .c-blue { background-color:blue; } .c-lblue { background-color:lightBlue; } .c-gray { background-color:gray; } .c-yellow { background-color:yellow; } </style> <table id="mytable"> <col width="40%"><col width="30%"><col width="30%"> <tr id="myrow1"><td rowspan=3 class="c-red">1</td><td class="c-blue">2</td><td class="c-yellow">3</td></tr> <tr id="myrow1"><td class="c-gray">4</td><td class="c-lblue">5</td></tr> <tr id="myrow2"><td class="c-yellow">6</td><td class="c-red">7</td></tr> </table>

with divas (inline styles - for short)

 <style> body, html, #fs { width:100%; height:100%; margin:0; padding:0; } #i1-table { display:table; width:100%; height:100%; } #i1-trow { display:table-row; width:100%; height:100%; } #i1-rowspan { display: table-cell; height:100%; width:40%; background-color:red; text-align:center; vertical-align:middle; } #i1-rowcont { display: table-cell; height:100%; width:60%; } #i1-table-in { display:table; width:100%; height:100%; } .i1-rowcont-row1 { display: table-row; height:40%; width:100%; } .i1-rowcont-row2 { display: table-row; height:20%; width:100%; } .i1-cell1 { display: table-cell; width:50%; text-align:center; vertical-align:middle; } .i1-cell2 { display: table-cell; width:50%; text-align:center; vertical-align:middle; } </style> <div id="fs"> <div id="i1-table"> <div id="i1-trow"> <div id="i1-rowspan"> 1 </div> <div id="i1-rowcont"> <div id="i1-table-in"> <div class="i1-rowcont-row1"> <div class="i1-cell1" style="background-color:blue"> 2 </div> <div class="i1-cell1" style="background-color:yellow"> 3 </div> </div> <div class="i1-rowcont-row1"> <div class="i1-cell1" style="background-color:gray"> 4 </div> <div class="i1-cell1" style="background-color:cyan"> 5 </div> </div> <div class="i1-rowcont-row2"> <div class="i1-cell2" style="background-color:magenta"> 6 </div> <div class="i1-cell2" style="background-color:green"> 7 </div> </div> </div> </div> </div> </div> </div>

  • Thanks a lot :) - Denis Evceev
  • Please ... according to the Great Hippie Teachings, labor is invented by man for pleasure and not torment ;-) - Eugene Bartosh
  • You do not know how to make it so that when you click on one of the squares (2 or 3 -> they merge into one line?) Or when you click on 4 or 5, they merge into one with the same size. For some reason, I have interconnected squares, i.e. if I combine 2 squares in a row. Although it will be a string, they will be the size of 1 square. - Denis Evceev