Comment afficher une table

Bonjour à toutes et à tous,

Pour mon premier post, je tiens à dire que je suis développeur, pas designer, mais que j'aime ça

J'aimerais afficher sur mon site web une table de données avec un style "postgresql-like" (ou mysql d'ailleurs) :

    name    | height | first_man 
------------+--------+-----------
 everest    |   8848 | hillary
 mont blanc |   4810 | balmat

Les cells et rows doivent être clickable, draggable et droppable, notamment pour l'édition des données.

Dans un deuxième temps je devrai faire des sous-totaux et des totaux, mais une chose après l'autre.

A votre avis, comment m'y prendre : un table html avec du css ? que des div ? que du texte ?

Edit: j'ai mis en place un codepen : http://codepen.io/bixente57/pen/JKQjpg
J'ai découvert le css ::after pour les '|'
Il faut maintenant trouver un css pour faire des dashes ('-') et des '+' aux croisements
Modifié par bixente57 (24 Aug 2016 - 11:15)

Salut,

Moi j'aurai fait en trois colonnes si j'ai besoin que de trois colonnes pour mon tableau, et avec comme css des bordures (border-left, border-right) pour la colonne du milieu..

pour tes - et tes +, dudit la séparation entre la partie haute et les données en dessous, tu peux le faire en ciblant des éléments avec les selecteurs (nth-of-type, nth-child, etc.) ou avec une classe tout simplement. Mettre des images peut marcher aussi.

J'ai avancé sur mon sujet : https://codepen.io/bixente57/pen/JKQjpg

Je vais générer les lignes horizontales de séparation côté serveur.

J'ai encore un détail : comment aligner les - et les + ? On voit qu'ils sont un peu décalés, il faudrait que toutes les barres horizontales soient alignées.

text-align: center; ou en rajoutant du padding

.line td::after {
padding:0 0 0 5px;
}

pour le décalage avec le | , je décalerai soit le + soit le | d'un pixel
Modifié par blond1n (24 Aug 2016 - 15:37)

Et voilà, mon tableau est prêt : http://codepen.io/bixente57/pen/JKQjpg

Dernière question : que pensez-vous du code, est-il améliorable/factorisable ? (je ne connais pas bien les best practices css)

kustolovic a écrit :
J'ai de la peine à comprendre l'intérêt de styliser un tableau HTML comme un tableau en mode texte/console, mais sans ça il n'y a pas grand chose à redire…

à partir du moment où c'est un "style" que le mec veut adopter, c'est normal que cela ne plaise pas à tout le monde.
Les goûts et les couleurs....

Après pour rentrer un peu plus en profondeur, je parlerais d'autosatisfaction, si la personne veut faire tel ou tel design, c'est premièrement parce que ça lui plait physiquement.
Ensuite c'est peut être pour coller avec le thème de sa page.. ou autre..

Moi non plus je vois pas l’intérêt de ton commentaire
Modifié par JENCAL (24 Aug 2016 - 17:10)

:) Pas de problèmes, vous pouvez bien faire ce que vous voulez!

Par contre, niveau bonnes pratiques, l'ajout d'une ligne avec des caractères décoratifs: '-' et l'ajout de contenu par css n'est pas exceptionnel, cela augmente les coûts de maintenance, de développement (recalculer les caractères pour chaque affichage, changement dans la table), et est assez ennuyeux pour l'accessibilité (pour les lecteurs d'écran). Il est certes possible d'améliorer ce dernier point mais cela rajoute en complexité là où un tableau propre ne poserait aucun problèmes.

Après ce n'est pas la fin du monde non plus, on peut très bien accepter ces petits tracas. C'est la question de mettre en balance la valeur ajoutée de ce visuel par rapport au inconvénients qu'il ajoute. La réponse c'est à vous de la trouver.

Je suis d'accord.
Ajouter les - et + côté serveur n'est pas très gourmand.
Pour les '|', je ne souhaite pas les ajouter côté serveur car la largeur des colonnes doit être dynamique car l'utilisateur pourra éditer une valeur.
Ce que je peux faire, c'est une fonction javascript qui les ajoute, mais est-ce plus performant que l'ajout en CSS ?