Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus arcu a eros varius, semper vehicula dui volutpat. Suspendisse efficitur risus sed ornare ultrices. Integer egestas molestie est, eu egestas orci egestas vel. Donec vel pulvinar nunc. Cras euismod efficitur erat quis bibendum. Nam congue, risus non fringilla ornare, sapien.

Image de bloc 1

Image de bloc 2

• Créer un tableau <table> et son corps <tbody>
• Dans l'élément tbody, créer un <tr>, par ligne (tr = table row)
• Créer au moins une fausse ligne, avec x éléments, où x est votre nombre de cellules par ligne. Chaque élément doit avoir comme attribut de style width:100 divisé par x
  • Ici par exemple, j'ai des lignes avec 3 cellules par ligne, où à chaque fois une case prend deux cellules et l'autre une seule.
  • Pour ce faire, j'ai une première ligne avec trois cellules de taille 33% (soit 100/3).
  • Une fois ceci fait, pour chaque case <td> appliquer :
    • Pour une grande case : colpsan=x-1
    • Pour une petite case : rien du tout !
    • Si vous souhaitez faire plus de 2 cases par ligne (attention à rester lisibles !!), vous pouvez bien sûr faire une case de 3 cellules et deux autre de 2 cellules par exemple, libre à vous de choisir la combinaison qui vous plaît !
  • Bonus :
    • Je vous invite fortement à ajouter un attribut de style padding:1em aux cases qui contiennent uniquement du texte.
    • Vous pouvez utiliser la propriété border pour délimiter vos cases.