Bonjour !

Je crois que tout est dans le titre, je cherche le meilleur moyen de coder un tableau comme on en voit pour les tournois de tennis. J'ai tenté d'utiliser canvas, ce qui marche très bien, mais finalement c'est pas hyper responsive... 

A votre avis, comment faire ça ? avec quel outil ? Quel langage ?

Merci !

Salut, je ne suis pas un specialiste du tennis mais tu parle d'un tableau comme ça ou comme ça ?

Bonjour,

si c'est le premier cas, quelqu'un avait déjà posé la question, pour du football. Ça doit pouvoir se retrouver en cherchant sur le forum.

J'avais du temps à perdre est j'aime bien faire des petits trucs dans ce style alors tiens cadeau si c'est celui là

https://codepen.io/anon/pen/BJLrjd

noopy360 a écrit:

J'avais du temps à perdre est j'aime bien faire des petits trucs dans ce style alors tiens cadeau si c'est celui là

https://codepen.io/anon/pen/BJLrjd

Sauf que là, tu n'es pas du tout responsive, donc tu ne répond pas à la demande de l'auteur.

Bonsoir,

C'est bien de la 2e solution dont je parlais. Mais je suis subjugué par le "j'avais rien à faire alors je t'ai fait ça". Ah ça me plairait d'avoir ce niveau de codage...

Bonjour !

aucune idée alors ? Meme en ce jour de NOËL ?

Erf, j'avais inversé les deux cas. Celui que tu cherches a bien été traité par quelqu'un qui voulait décrire un tournoi de foot. Cherche sur le forum, tu tomberas sur son sujet.

Merci ! j'ai déjà cherche cela dit, mais j'avoue ne pas trop savoir par où commencer... et la recherche m'amène à des résultats Google. Bon je vais farfouiller encore plus !

Le mec qui veut faire un site et qui sait meme pas chercher sur un forum.........

Oui, la recherche du forum utilise Google pour le moment, mais les résultats sont bien internes au forum, pas d'inquiétude

(tu peux aussi rechercher avec ton moteur favori si tu ne veux pas donner tes infos à Big G, et tu précises "site:openclassrooms.com" dans la requête pour filtrer uniquement ici)

Salut le plus simple je pense serai de faire le background pour le tableau est de le remplir via HTML car faire le tableau en HTML & CSS pure ça me paraît pas évident à faire...

Aller tiens cadeau comme ça j'ai fait les 2 versions (sans images)

https://codepen.io/anon/pen/OzWMJz

Après j'ai fait un truc hyper simple tu peut faire un truc plus complexe avec couleur est tout

-
Edité par noopy360 26 décembre 2017 à 9:50:46

Salut ! C'est impec ton truc ! Par contre je pige pas la phrase "le plus simple je pense serai de faire le background pour le tableau est de le remplir via HTML car faire le tableau en HTML & CSS pure ça me paraît pas évident à faire"

C'est ce que tu as fait pourtant non ?

Merci en tout cas

Oui dans le code j'ai effectuer la deuxième solution car j'ai eu un éclair de génie, après ça fait quand même un peut brouillon (trait pas parfaitement centré, design simpliste, ...) j'ai fait ça a la va vite !

Ca me donne quand même un petit éclairage et je te remercie vivement pour avoir pris de ton temps pour ça !

J'avais une petite question subsidiaire :

Admettons une div de height et de width de 100px.

Admettons que cette div est un border de 1px.

Quel sera la "vrai" taille de la div ? 102 sur 102 ?

Encore merci et bonne année !

monsieur marcadet : ça dépend™.

Par défaut, sur les navigateurs récents, la largeur totale d'un élément, c'est border + padding + width (éventuellement + padding + border s'il y en a des deux côtés). Donc ici ça ferait 102px.

Ensuite, ce qui se fait de plus en plus (entre autres parce que c'est quand même logique), c'est de redéfinir le box-sizing à "border-box". Le box-sizing permet de choisir comment est calculée la largeur (et la hauteur). À lire : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing . Et choisir "border-box" permet de dire au navigateur "la largeur que j'ai précisée en CSS est absolue : tu te dém- débrouilles avec les bordures et les paddings mais tu touches pas à cette largeur".

Merci ! Réponse parfaite !