Bonjour à toutes et à tous,

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

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.. Smiley murf

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. Smiley cligne
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)
Modérateur
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…
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)
:) évitons un troll sur les goûts et couleurs

Je suis juste en train de tester des design "geeks", c'est le courant "brutalism design", avec par exemple craigslist, hacker news, etc.

Merci pour les revues.
Modérateur
:) 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 ?