-
Art.07a.8.21
Faire l'équivalent d'un tableau en CSS se fait en plaçant chaque case où on les souhaite.
On peut dimensionner chaque case à son gré.
Les bordures peuent être placées à l'intérieur de chaque case, ce qui simplifie le positionnement.
<div style="width:1000px; height:400px; margin:20px auto; text-align:left;">
<p id="cs1"> </p>
<p id="cs2"> </p>
<p id="cs3"> </p>
<p id="cs4"> </p>
<p id="cs5"> </p>
<p id="cs6">vertical</p>
</div>
<style><!--
#cs1{position:absolute; box-sizing:border-box; box-sizing:border-box; width:200px; height:200px; border:4px ridge white; background:pink; transform:translate(20px,20px);}
#cs2{position:absolute; box-sizing:border-box; box-sizing:border-box; width:400px; height:400px; border:4px ridge white; background:red; transform:translate(220px,20px);}
#cs3{position:absolute; box-sizing:border-box; box-sizing:border-box; width:300px; height:150px; border:4px ridge white; background:green; transform:translate(620px,100px);}
#cs4{position:absolute; box-sizing:border-box; box-sizing:border-box; width:200px; height:150px; border:4px ridge white; background:yellow; transform:translate(20px,220px);}
#cs5{position:absolute; box-sizing:border-box; box-sizing:border-box; width:100px; height:250px; border:4px ridge white; background:lime; transform:translate(620px,150px);}
#cs6{position:absolute; box-sizing:border-box; box-sizing:border-box; width:200px; height:250px; border:4px ridge white; background:coral; transform:translate(720px,150px); text-align:center; line-height:250px;}
--></style>
vertical
Chaque case est dimensionnée et dimensionnée indépendamment des autres; on peut également donner des attributs pour positionnement intérieur à gauche, centré ou à droite de même que le positionnement vertical par line-height:250px dans ce cas.Cette page juste pour donner une idée des multiples possibilités de ces codes.