Tableaux ou tables

Par Mikuru le 17 Septembre 2011 à 18:24

qu'est-ce que c'est ?

J'ai vu que suite à ce tutoriel, la question du "Comment on en met deux sur une même ligne" revenait à plusieurs reprises. Et comme vous devez vous en doutez, si j'en parle ici, c'est que ce tutoriel vous permettra d'aligner deux DIV sur une même ligne. Allez, on démarre, un petit exemple pour la route !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. Nulla et turpis fringilla justo elementum venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi. Ut tellus ligula, aliquam a pretium eu, consequat non est. Proin varius semper lorem nec venenatis. Aenean sodales est semper enim condimentum et faucibus neque euismod. Suspendisse potenti.

comment faire ?

Pour ce tutoriel j'ai pas trop envie de vous enfoncer dans le HTML donc on va utiliser une fonction proposée par Eklablog pour effectuer une première partie du tutoriel. Commençons !

Créez un nouvel article (Oui ce sera quand même plus facile pour avancer.) et, en mode Expert, cliquez sur le bouton Insérer un nouveau tableau, c'est la sixième icone de la dernière ligne en commençant par la gauche.
Remplissez uniquement le nombre de lignes et de colonnes, pour l'exemple du haut j'ai mis 2 colonnes et 1 ligne.

Enregistrez et maintenant vous devriez avoir des petits pointillés qui forment deux petites cellules.
Vous pouvez y placer du texte, des images, des animations, etc. Et pour nous, ce sera des DIV.
Des DIV que vous aurez fait au préalable à l'aide de ce tutoriel bien sur.

Bref, ouvrez la fenêtre d’édition HTML en cliquant sur le bouton qui correspond.
Vous avez un truc du genre

Et pour placer vos DIV, vous insérez leur code à la place des  .
Ce qui donne quelque chose comme

<table border="0">
<tbody>
<tr>
<td>
<div style="color: #979696; width: 250px; min-height: 150px; margin: 10px; background-color: #e9eae8; border: 6px solid #232d2f; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #232d2f; background: url('http://data0.ek.la/portfolio/mod_article3736532_8.png?6556') no-repeat;"> </span><span style="color: #800000;">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. <span style="color: #800000;">Nulla</span> et turpis fringilla justo elementum venenatis. <span style="color: #800000;">Pellentesque</span> habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <span style="color: #800000;">Morbi</span> tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi.<span style="color: #800000;"> Ut tellus</span> ligula, aliquam a pretium eu, consequat non est. <span style="color: #800000;">Proin</span> varius semper lorem nec venenatis. <span style="color: #800000;">Aenean</span> sodales est semper enim condimentum et faucibus neque euismod. <span style="color: #800000;">Suspendisse</span> potenti.</div>
</td>
<td>
<div style="color: #b1d4e2; width: 250px; min-height: 150px; margin: 10px; background-color: #488ba5; border: 6px solid #012b4e; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #b1d4e2; background: url('http://data0.ek.la/portfolio/mod_article3736532_6.png?1685') no-repeat;"> </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. Nulla et turpis fringilla justo elementum venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi. Ut tellus ligula, aliquam a pretium eu, consequat non est. Proin varius semper lorem nec venenatis. Aenean sodales est semper enim condimentum et faucibus neque euismod. Suspendisse potenti.</div>
</td>
</tr>
</tbody>
</table>

[code=php]<table border="0">
<tbody>
<tr>
<td>
<div style="color: #979696; width: 250px; min-height: 150px; margin: 10px; background-color: #e9eae8; border: 6px solid #232d2f; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #232d2f; background: url('http://data0.ek.la/portfolio/mod_article3736532_8.png?6556') no-repeat;"> </span><span style="color: #800000;">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. <span style="color: #800000;">Nulla</span> et turpis fringilla justo elementum venenatis. <span style="color: #800000;">Pellentesque</span> habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <span style="color: #800000;">Morbi</span> tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi.<span style="color: #800000;"> Ut tellus</span> ligula, aliquam a pretium eu, consequat non est. <span style="color: #800000;">Proin</span> varius semper lorem nec venenatis. <span style="color: #800000;">Aenean</span> sodales est semper enim condimentum et faucibus neque euismod. <span style="color: #800000;">Suspendisse</span> potenti.</div>
</td>
<td>
<div style="color: #b1d4e2; width: 250px; min-height: 150px; margin: 10px; background-color: #488ba5; border: 6px solid #012b4e; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #b1d4e2; background: url('http://data0.ek.la/portfolio/mod_article3736532_6.png?1685') no-repeat;"> </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. Nulla et turpis fringilla justo elementum venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi. Ut tellus ligula, aliquam a pretium eu, consequat non est. Proin varius semper lorem nec venenatis. Aenean sodales est semper enim condimentum et faucibus neque euismod. Suspendisse potenti.</div>
</td>
</tr>
</tbody>
</table>[/code]

Enregistrez et normalement vous avez deux DIV alignés. :)
La méthode du tableau peut être très utile pour toute sortes de choses.
Ici j'ai citer un cas précis suite à une demande pour faire d'une pierre deux coups mais cette méthode se généralise complètement, à vous de l'utiliser selon vos envies.

Je répondrai à toute question posée par commentaire sur ce tutoriel alors n'hésitez surtout pas !

12 commentaires