Insérer un tableau dans un article

De temps en temps, il peut arriver que l'on ait besoin d'afficher quelque chose sur deux colonnes (ou plus). A ce moment là, le plus facile est d'insérer dans le code HTML un petit tableau.

Le code HTML est on ne peut plus simple. Le tableau est délimité par un <table> et un </table>, puis chaque ligne par un <tr> et un </tr>, et enfin à l'intérieur de chaque ligne chaque cellule (chaque colonne) est délimitée par un <td> et un </td>.

Par défaut la largeur de chaque colonne est défini par l'élément le plus grand. Et le texte est centré verticalement à l'intérieur d'une ligne.

Pour que les colonnes soient visibles, on va rajouter une bordure sur le côté droit de chaque cellule. On va également attribuer une largeur aux deux 1ères colonnes (pour éviter que la bordure ne soit collée au texte) et aligner verticalement sur le haut le texte de la 2ème ligne.

Résultat recherché :

1e ligne 1e colonne	1e ligne 2e colonne : le texte est plus long	1e ligne 3e colonne
2e ligne 1e colonne : texte de la cellule	2e ligne 2e colonne	colonne 3, ligne 2

Le texte de la 1ère ligne est centré verticalement, celui de la 2ème ligne est aligné sur le haut. La largeur des deux 1ères colonnes est fixe, celle de la 3e colonne est définie par la longueur du texte (et la bordure est collée au texte).

Code HTML correspondant :

<table>
<tr>
<td style="border-right: solid 1px red; width: 130px;">1e ligne 1e colonne</td>
<td style="border-right: solid 1px blue; width: 180px;">1e ligne 2e colonne : le texte est plus long</td>
<td style="border-right: solid 1px red;">1e ligne 3e colonne</td>
</tr>
<tr style="vertical-align: top;">
<td style="border-right: solid 1px blue;" >2e ligne 1e colonne : texte de la cellule</td>
<td style="border-right: solid 1px red;" >2e ligne 2e colonne</td>

<td style="border-right: solid 1px blue;"> colonn 3, ligne 2</td>
</tr>

</table>

► Pour en savoir plus sur l'habillage d'un tableau avec les propriétés de style : css.mammouthland.net (tutoriels débutants)

(tous mes tutoriels sont dans l'index "informatique")