Afficher une liste HTML sous forme de tableau par CSS

Comment modifier l’affichage de vos listes HTML pour les rendre un peu plus sexy en modifiant uniquement ses feuilles de styles CSS ?

Les listes, vous le savez, sont très efficaces pour hiérarchiser les données. Elles optimisent votre référencement en simplifiant le code HTML superflu. Elles permettent d’augmenter le ratio contenu par rapport au code. C’est un bon cas pratique pour un atelier sur la séparation HTML / CSS.

Cas HTML / CSS pratiques

Liste HTML basique

Voyons quelques exemples de modifications basiques en CSS en prenant comme point de départ une liste de jours (type orderer list <ol>) contenant une liste d’horaires sur le modèle suivant :

<ol>
    <li><span class="Day">Lundi</span>
        <ol>
             <li><span class="Time">10h00-12h30</span>
	     Formation Référencement Marseille Salle 13
	 </li> 
	 <li><span class="Time">15h00-17h00</span>
	     Audit accessibilité Marseille 1er Cycle
	 </li>
            <li><span class="Time">17h30-19h00</span>
	     Entretien Kiwano référenceur Aix en Provence
	</li>
        </ol>
     </li>
    <li><span class="Day">Mardi</span>
        <ol>
             <li><span class="Time">10h00-12h30</span>
	    RDV Marseille Plage du Prophète
	</li> 
	<li><span class="Time">14h00-17h30</span>
	     Développement XHTML CSS
	</li>
            <li><span class="Time">17h30-19h00</span>
	     Conférence Kiwano référencement
             naturel sur site (Vitrolles)
	</li>
        </ol>
   </li>
</ol>

Ce qui nous donne un affichage du type :
Liste HTML de base

Liste HTML améliorée par CSS

On peut rendre cette liste un peu plus sympa en utilisant une feuille de style « Planning.css ».
Pour cela il suffit de la lier à la page HTML en insérant entre les balises <head> la déclaration de la feuille de style en cascade.

<link href="Planning.css" rel="stylesheet" type="text/css" />

On peut créer ainsi une feuille de style très simple pour colorer et mettre en forme notre exemple.

ol 
{
	list-style-type: none;
}

ol ol
{
	border-top: solid 1px #555;
}

ol li li
{
	background-color: #eeefe0;
	color: #000;
	border: solid 1px #555;
	border-top: none;
} 

.Day
{
	width: 100%;
	padding: 5px 0px;
	font-weight: bold;
	color: #f16025;
}

.Time
{
	padding: 0 20px;
	background-color: #97be3d;
	border-right: solid 1px #555;
	color: #fff;
}

On obtient alors une liste mise en forme comme sur cette copie d’écran :
Liste HTML mise en forme

Liste HTML sous forme de tableau

Rien n’empêche d’aller plus loin et de représenter maintenant ces données sous forme de tableau.

Pour cela on transforme les éléments de type inline en type block en modifiant la propriété display et on les rend flottants en utilisant la propriété float.

li, ol
{
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}

ol li
{
	width: 10em;
	margin: 0em 1em 0em 0em;
	line-height: 1.5em;
	border: solid 1px #f16025;
}
 
ol li li
{
	width: 100%;
	height: 7em;
	font-size: 0.8em;
	color: #666;
	border: none;
	background-color: #eeefe0
}
 
span.Day
{
	display: block;
	width: 8em;
	padding: 0em 1em 0em 1em;
	font-weight: bold;
	color: #f16025;
 }
 
span.Time
{
	display: block;
	padding: 0em 0em 0em 1em;
	border-bottom: solid 4px #f16025;
	border-top: solid 1px #f16025;
	font-size: 1.1em;
	font-weight: bold;
	background-color: #97be3d;
	color: #fff;
}

Notez que les dimensions de ce tableau sont en valeur « em », qui sont des dimensions relatives. En clair : vous pouvez user et abuser de la modification de la taille d’affichage (même sous IE6) en conservant un rendu cohérent. Très utile pour les utilisateurs mal voyants.

Liste HTML en tableau

Liste HTML et CSS 3

Voici, en partant de l’exemple précédent, une utilisation des fonctionnalités CSS 3 et CSS étendues sous Mozilla Firefox : sélecteurs, dégradés de couleurs et bordures arrondies.

li, ol
{
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}

ol li 
{
	width: 10em;
	margin: 0em 1em 0em 0em;
	line-height: 1.5em;
	border: solid 4px #f16025;
	margin-top: 20px;
        /* Bordures arrondies dans les coins */
	-moz-border-radius: 40px 10px 0 0;
}

ol li li
{
	width: 100%;
	height: 7em;
	font-size: 0.8em;
	color: #666;
	border: none;
	background-color: #eeefe0;
	margin: 0;
	-moz-border-radius: 0;
}

span.Day
{
	display: block;
	width: 8em;
	padding: 0em 1em 0em 1em;
	font-weight: bold;
	color: #f16025;
}

ol li li:last-child
{
	border-bottom-width: 8px;
	border-bottom-style: solid;
	/* Dégradé sur dernier élément liste imbriquée*/
	-moz-border-bottom-colors: #fd5601 #f15f16 
        #f17537 #f1905f #f0a782 #efc1a4 #efccb3 #eee0cd
        #eeefe0;
}

span.Time
{
	display: block;
	padding: 0em 0em 0em 1em;
	border-bottom: solid 1px #f16025;
	border-top: dotted 5px #f16025;
	font-size: 1.1em;
	font-weight: bold;
	background-color: #97be3d;
	color: #fff;
}

Qui nous offre le rendu suivant :
Liste HTML en tableau et CSS3

Conclusion

Comme le montre ce petit exemple, on a souvent (quand c’est justifié) intérêt à utiliser des listes plutôt que des tableaux.
Si on avait utilisé des balises <table>, les possibilités de modification de style aurait été bien moindres.
Une liste bien conçue est évolutive.
Notre cas permet d’afficher facilement les jours sur plusieurs lignes dans une page redimensionnable ce qui peut s’avérer précieux dans le cas d’une portabilité sur les petits écrans des téléphones mobiles par exemple.
Le référencement enfin est optimisé car le code HTML est plus simple.

8 réflexions au sujet de « Afficher une liste HTML sous forme de tableau par CSS »

  1. petite question : quand l’utilisation du tableau se justifie, son contenu n’est-il pas plus accessible (pour les navigateurs à reconnaissance vocale, par exemple) que si on l’organise en liste ?
    Je pense par exemple à la balise <caption>, ou aux balises <th> , titres de colonnes, qui donnent des informations importantes…
    mais je trouve ton approche très intéressante !

    1. Bonsoir reek,

      Il faut parfois arbitrer entre l’utilisation de tableaux ou de listes et ce n’est pas toujours forcément évident.
      Les tableaux peuvent être accessibles si ils sont bien codés c’est à dire considérés comme tels. Comme tu le fais remarquer avec l’utilisation d’une balise <caption>, des sections <thead>, <tfoot> et <tbody> séparées, …, tout devient alors plus clair pour les lecteurs.
      Vous devez définir également les propriétés scope pour indiquer le sens de lecture par exemple. Nous en parlerons un peu plus lors de notre article en préparation sur les bases d’un site HTML.
      Les listes ont l’avantage d’être plus souples (affichage fluide, code plus simple) mais dès que les données sont définies sur deux axes de lecture : les tableaux sont fait pour cela.

    1. Bonsoir,

      Concernant votre page, tout dépend de ce que vous visez. Le page rank de 4 est bon, ce qui montre que votre site à un bon indice de confiance pour Google. Cependant votre code n’est pas du tout accessible ni conforme aux standards. Vous devriez penser également à externaliser vos feuilles de style.

      Vous pourrez trouver une liste des améliorations à apporter dans les articles de Kiwano passés et à venir (doctype valide, suppressions des tableaux de mise en forme) en vous aidant du validateur W3C

      Vous y gagneriez en visibilité et référencement en diminuant la masse de code de rendu ainsi que les temps de chargement en supprimant des tableaux.
      De plus au niveau ergonomique vous ne devriez pas utiliser le bleu traditionnel des liens (#0000ff) pour le texte simple.

      Vous trouverez ci-dessous une bonne base de code pour votre liste.

      Exemple de code HTML :
      <ol id= »MainList »>
      <li><span class= »ville »>ville 1</span><span class= »canton »>Canton A</span>
      <ol class= »list2″>
      <li>lien 1</li>
      <li>lien 2</li>
      <li>lien …</li>
      </ol>
      <li>
      <li><span class= »ville »>ville 2</span><span class= »canton »>Canton B</span>
      <ol class= »list2″>
      <li>lien 1</li>
      <li>lien 2</li>
      <li>lien …</li>
      </ol>
      <li>
      </ol>

      Exemple de CSS :
      /* Mise en forme */
      ol
      {
      list-style-type: none;
      }

      ol#MainList
      {
      width: 400px;
      padding: 10px;
      }

      ol#MainList span.ville
      {
      display: block;
      float: left;
      }

      ol#MainList span.canton
      {
      display: block;
      float: right;
      }

      /* Mise en couleur */
      .ville
      {
      font-weight: bold;
      color: #000;
      }

      .canton
      {
      font-weight: bold;
      color: #c0c0c0;
      }

      ol.list2 li
      {
      color: #ff0000;
      }

      ol#MainList
      {
      border: solid 2px #000;
      }

  2. Horreur !
    L’exemple événement (jour, heure) sont des données.

    Est-ce l’usage d’une liste dans ce cas n’est pas contraire au principe du web sémantique qui voudrait que l’on utilise l’élément ?
    N’est-ce pas détourner les balises listes pour faire de la présentation en liste comme les tableaux ont été détournés pour faire de la présentation en ligne/colonne ?

    Mais présenter un tableau sous forme de liste me semble impossible via CSS.

  3. bonjour, excellent article que j’aimerais bien adapter a mon projet pour afficher une liste d’elements dans des « boites »

    votre exemple s’adapte a la largeur du conteneur (1,2 ou 3 lignes selon les besoins) et c’est le comportement qui m’interesse mais je voudrais que les boites soient centrees dans le conteneur.

    en enlevant float:left pour un margin:auto, le centrage fonctionne mais mes boites ne s’alignent plus horizontalement quand elles contiennent un nombre de lignes different.

    je ne sais pas trop d’ou vient ce comportement etrange mais auriez vous une idee ???

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *