CSS

Mise en forme d'une table

Si on veut ajouter un espace entre les cellules d'une table, que ce soit verticalement ou horizontalement, il ne faut pas essayer de manipuler ni les cellules (td, th) ni les lignes (tr) mais la table (table).
Pour cela, on utilise les propriétés border-collapse et border-spacing que l'on applique directement à la table.

On doit utiliser ces mêmes propriétés lorsqu'on choisi un affichage en table d'autres éléments grace à la propriété display (voir les valeurs table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row et table-row-group disponibles depuis la version 2.1).

Alignement vertical

Si on veut aligner du texte et une image dans une cellule, il faut utiliser la propriété vertical-align.
Cependant, il faut faire attention de l'appliquer au bon élément. Instinctivement, on voudrait l'appliquer au contenant (la cellule), alors que c'est au contenu (le texte et l'image).

Voici les citations de ce message qui m'ont aidé à comprendre ce fonctionnement :

S'applique à : ceux des éléments de type en-ligne et à l'élément 'table-cell'.

Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en-ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne anonymes ; elles sont inopérantes autrement.
Note : la signification des valeurs pour cette propriété est légèrement différente dans le contexte des tables. Consulter le chapitre traitant des algorithmes pour la hauteur des tables pour le détail.

Positionnement dans une cellule

Le positionnement d'un élément dans une cellule n'est pas possible, que ce soit une cellule du DOM (td, th) ou une cellule CSS (table-cell). Il est toutefois possible d'encapsuler le contenu de la cellule dans un élément div et de placer le contenu par rapport à celui-ci.

Insérer un caractère unicode

/* En l'utilisant directement */
nav a:hover:after {
    content: "↓";
}
/* En utilisant sa valeur hexadécimale */
nav a:hover:after {
    content: "\2193";
}

Pour ajouter un espace après la valeur hexadécimale d'un caratère, il faut le doubler car le premier espace est consommé par le parseur CSS ¹²⁾.

¹²⁾

Syntax and basic data types