• 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">&nbsp;</p>

    <p id="cs2">&nbsp;</p>

    <p id="cs3">&nbsp;</p>

    <p id="cs4">&nbsp;</p>

    <p id="cs5">&nbsp;</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.