Comment coder une liste tabulée ?

Bonjour,

J'ai dans l'idée de constituer un petit « site » personnel sans prétention qui récapitulerait le contenu de ma bibliothèque. Je pense commencer par établir une liste des livres, indiquant par exemple pour chacun titre / auteur / année / éditeur / n°ISBN (plus tard, si l'ampleur de la tâche ne me rebute pas, j'y ajouterai des liens vers des pages web concernant le livre, l'auteur, etc).

Il y a 15 ans, pour constituer cette page de recensement, j'aurais utilisé un tableau (table, tr, th, td). Mais il semble que ce balisage ne soit plus en odeur de sainteté depuis bien longtemps. D'accord. Mais quelle alternative pour effectuer des tabulations ?

Merci d'avance pour vos précieuses suggestions...

Bonjour,

ça peut être un tableau (+1) s'il a bien des entêtes TH (avec l'attribut scope="col" ou "row" c'est encore mieux)
ou une liste de définition DL / DT / DD (sa sémantique en HTML5 accepte bien plus de cas qu'avant)
ou une liste non ordonnée, ça va pas mal dépendre des informations que tu affiches pour chaque ouvrage.

edit: un tableau peut être très relou à rendre responsive mais c'est possible
Modifié par Felipe (19 Jan 2017 - 17:54)

Merci pour vos réponses.

Je retiens des tableaux, primo qu'il n'y a pas à en rougir, secundo que ça risque de poser des problèmes à rendre responsive.

La solution DL/DT/DD me semble assez élégante. Niveau description, pas plus lourde qu'un tableau. En gros (sans oublier la sémantique, bien sûr), la DT pourrait être le titre de l'ouvrage, et pourrait être suivie de 3 DD (auteur, année, éditeur). Pour obtenir des largeurs sur mesure, cela oblige à attribuer une classe à chaque DD, d'où une écriture un peu verbeuse. Mais je compte générer le code à partir d'un fichier EXCEL, donc pas de souci.

En revanche, la réduction de largeur d'écran fout la grouille dans la présentation... même si toutes les largeurs sont exprimées en pourcentage de la largeur de la DL !

Je crois que je vais me replier sur le tableau, dans la mesure où mon site restera interne à mon PC, dont l'écran aura plus tendance à s'élargir qu'à rétrécir...

Je me suis aussi amuser à voir ce que flex pourait donner avec une liste de définition avec quelques min-width et une mediaquerie : http://codepen.io/gc-nomade/pen/Qdpxza

Si la structure est régulière, x dd aprés une dt, flex devrait s'en tirer pas trop mal .

Disclaimer: Coté Design, je n'ai jamais eu la fibre, c'est juste des exemples de style sans class. hein !