Tableaux dans les articles

Ajouter un tableau dans un article permet de présenter des informations de façon synthétique. Sur OverBlog Kiwi, les tableaux sont disponibles (en mode HTML).

Mise en forme des tableaux

Il est possible de choisir le nombre de colonnes et de lignes, l'en-tête, l'alignement, etc.
Le déplacement entre les cellules se fait avec la touche tabulation.

Ce qui peut donner un tableau comme celui-ci :

Tableau avant mise en forme

Tableau avant mise en forme

On peut obtenir le même tableau sur Eklablog ou la précédente version d'overblog avec le bouton "tableau" de la barre d'outils.

Mise en forme

Pour le mettre en forme (centrer le texte par exemple), l'erreur serait d'utiliser les boutons de la barre d'outils. Passer par la feuille de style permet de faciliter la mise en forme, de l'uniformiser et d'avoir un code qui s'adapte mieux aux différents supports.

Dans le CSS du thème, nous ajoutons quelques lignes.

Pour les cellules du tableau, on choisit un alignement, une marge, une couleur, etc :

td, th {text-align:left;padding:3px 6px 3px 4px;color:#183152;border: thin solid #6495ed;} /*cellules*/

Pour le tableau en entier, on limite la largeur (pour que ça ne dépasse pas de l'article*), on ajoute une marge, et si nécessaire un fond.

table{max-width: 100%;margin:15px auto 15px auto;background-color:#FFFAF4;} /*tableau*/

*Dans la fenêtre de création du tableau, il ne faut pas spécifier de largeur (champ vide).

Deux lignes personnalisables qui permettent d'avoir un joli tableau :

Tableau après ajout des lignes de CSS

Tableau après ajout des lignes de CSS

Mais cela peut encore être amélioré. Il est possible par exemple de différencier en-tête et autres cellules :

th{color:#371F57;} /*cellules en-tête*/
td{color:#006D80;} /*autres cellules*/

Mise en forme du titre :

table caption{margin-bottom:16px;text-align:center;font-size:115%;color:red;}
Tableau mis en forme

Tableau mis en forme

Tous les tableaux auront cette mise en forme. Lors de la rédaction d'un article et la création d'un tableau, nous n'avons plus à nous préoccuper de la mise en forme. Si à l'avenir, nous voulons changer le style de tous les tableaux, il suffira de modifier quelques lignes de CSS.

Le code n'est plus surchargé en attributs style, ce qui est mieux à tout point de vue.