5549 sujets

Sémantique web et HTML

Bonjour à vous tous,

J'essaye de construire un tableau en utilisant les balises <colgroup> et <col> et j'ai compris que ces deux balises s'utilisent de concert. La première sert à cibler un ensemble de colonnes et la seconde sert à spécifier des propriétés aux colonnes. Ainsi, dans l'exemple que je vous soumets, j'indique dans la balise <col> que les colonnes 1 et 2 (span="2") doivent toutes avoir un fond de couleur rouge et la colonne restante doit avoir un fond vert. Pour les têtières et les cellules dans le tableau, j'interviens individuellement en leur imposant une couleur de fond et une couleur de caractères.

Mais je ne comprends pas deux choses. La première c'est pourquoi la première colonne prend autant de place en largeur alors que je n'ai même pas spécifié de largeur de colonne dans la feuille de style. Je comprends que par défaut tout le tableau occupe toute la largeur de la fenêtre du navigateur (étant donné que je le lui ait demandé avec width; 100%;) mais pourquoi le navigateur décide-t-il d'attribuer à la première colonne une si grande largeur au détriment des deux autres ? Ensuite, pourquoi les deux classes "marge_interieur" et "typo_blanc", attribuées aux deux balises <col> ne sont pas prises en compte ?

Pouvez-vous m'aider en m'expliquant le pourquoi du comment ?
Merci à vous

Voici le résultat :
upload/1684066299-62242-capturedancran2023-05-1414104.jpg
Voici le code HTML :
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Tableau</title>
</head>

<body>
    <table>
        <colgroup>
            <col span="2" class="rouge marge_interieure">
            <col class="vert typo_blanc">
        </colgroup>
        <tr class="noir typo_blanc">
            <th>Majuscules</th>
            <th>Minuscules</th>
            <th>Chiffres</th>
        </tr>
        <tr>
            <td>A</td>
            <td>a</td>
            <td>1</td>
        </tr>
        <tr>
            <td>B</td>
            <td>b</td>
            <td>2</td>
        </tr>
        <tr>
            <td>C</td>
            <td class="jaune">c</td>
            <td>3</td>
        </tr>
        <tr>
            <td>D</td>
            <td>d</td>
            <td class="bleu">4</td>
        </tr>
    </table>
</body>

</html>

Voici le code CSS :
table{
    border-collapse: collapse;
  }
  
  td, th {
    width: 100%;
    border: 1px solid black;
  }

  .rouge{
    background-color: red;
  }

  .vert{
    background-color: green;
  }

  .noir{
    background-color: black;
  }

  .typo_blanc{
    color: white;
  }

  .jaune{
    background-color: yellow;
  }

  .bleu{
    background-color: blue;
  }

  .marge_interieure{
    padding: 1rem;
  }

Modifié par ObiJuanKenobi (14 May 2023 - 14:15)
J'ai fait des recherches et j'ai découvert que la balise <col> n'accepte pas l'attribut html "class". C'est en posant la question à Chatgpt que j'ai eu cette réponse. Cependant, en cherchant sur Google, je ne trouve aucune information concernant cela. De plus, quand je vais sur MDN, à la rubrique <col>, j'ai un exemple de code HTML et CSS que je teste sur Visual Studio Code et cela ne fonctionne pas, les propriétés appliqués dans la feuille CSS ne sont pas prises en compte dans la class attribuée à la balise <col>. Quelqu'un est au courant de cette affirmation ?

Voici la réponse de Chatgpt :
upload/1684396046-62242-capturedancran2023-05-1809394.jpg

Voici le lien MDN de l'exemple de code avec la balise <col> :
https://developer.mozilla.org/fr/docs/Web/HTML/Element/col

Pour finir, je ne sais toujours pas pourquoi quand on utilise la propriété "width: 100%; "dans le tableau (pour que celui-ci occupe toute la largeur de la fenêtre du navigateur), la première colonne prend une largeur très importante vis-à-vis des deux autres colonnes (voir la capture écran en haut).
Voici une autre réponse de Chatgpt au sujet de la non prise en compte de l'attribut class dans la balise <col> :
upload/1684396569-62242-capturedancran2023-05-1809544.jpg
Modifié par ObiJuanKenobi (18 May 2023 - 09:56)
Modérateur
Bonjour,

Pour comprendre comment un tableau s'affiche, je te propose de lire cette page (et tester les exemples) : https://developer.mozilla.org/fr/docs/Web/CSS/table-layout

Pour le tableau : les généralités et attributs dépréciés => https://developer.mozilla.org/fr/docs/Web/HTML/Element/table

Pour <colgroup> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/colgroup

et <col> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/col

définition du W3C https://html.spec.whatwg.org/multipage/tables.html#the-col-element qui prend les globals attributes https://html.spec.whatwg.org/multipage/dom.html#global-attributes

Si l'attribut class ne fait pas partis des attributs globaux, les navigateurs sont capables de le lire et de l'appliqué. Cependant , <col> c'est un élément 'invisible' et il n'y a quasiment aucun styles applicable en dehors de width et background avec quelques subtilités:
- si une largeur est appliquée à col et a une cellule, c'est la plus grandes des deux qui sera appliquée , à moins que le table-layout soit repassé en fixed, alors c'est la valeur width attribuée à <col> qui prévaut.
- pour le background de col, il s'affiche sous les cellules et sera caché si une cellule à un background de défini .

HORS sujet et avis très personnel : Pour le Chat-gépété , je te conseil de rester très critique sur ce qu'il peut te servir, amuse toi à lui poser des questions sur des sujets que tu maitrises et tu vas rapidement prendre du recul. C'est amusant et corrige assez bien les fautes d'orthographe.
Il suffit aussi de poser la question différemment pour avoir deux réponses différentes, après une question mal posée ...
Si les réseaux sociaux servent et ont déjà servis à trop de dérives , ça , ça va faire aussi très mal , les gourous ont-ils trouver plus fort qu'eux !?

Modifié par gcyrillus (18 May 2023 - 19:54)
Je viens de comprendre pour quelle raison l'attribut "class" ne fonctionnait pas dans la balise <col>. Contrairement à ce que prétendait Chatgpt, la balise <col> prend bien en charge l'attribut HTML "class" mais pas avec toutes les propriétés !

Si on définit une classe contenant un changement de couleur de fond, cette propriété sera appliquée mais si on affecte la propriété de changement de taille de caractère ou de positionnement du contenu de la cellule, ces valeurs ne seront pas appliquées.

La balise <col> est une balise particulière utilisée dans les tableaux HTML pour spécifier uniquement des propriétés de style de largeur (width), de couleur de fond (background), de bordure (border) et de visibilité (visibility) https://www.w3.org/TR/CSS21/tables.html#columns

Cette balise est utilisée comme enfant de la balise <colgroup> et, contrairement aux autres balises HTML, elle n'a pas été conçue pour contenir du contenu textuel ou des éléments de contenu, comme pour les balises <br>, <wbr>, <img>, etc. qui sont dites de type void (sans valeur) https://developer.mozilla.org/fr/docs/Glossary/Void_element

La balise <col> prend donc en charge l'attribut "class" mais seulement pour les 4 propriétés citées au dessus. Si on tente de changer la taille de caractère, la police, la couleur de caractère, etc., au moyen de l'attribut "class", ces propriétés ne seront pas prises en compte.

Voilà une chose de réglée !

Il ne me reste plus qu'à savoir pourquoi la largeur de la première colonne est plus grande par rapport aux autres colonnes quand on spécifie dans la feuille CSS "width; 100%". L'un de vous sait pourquoi ?
Modérateur
ObiJuanKenobi a écrit :


Il ne me reste plus qu'à savoir pourquoi la largeur de la première colonne est plus grande par rapport aux autres colonnes quand on spécifie dans la feuille CSS "width; 100%". L'un de vous sait pourquoi ?


As tu lu le premier lien de mon précédents post ? Smiley cligne (j'y ai remis un peu de couleur pour facilité la lecture Smiley cligne )

Pour border et visibility(visible et collapse okay, hidden non), as tu bien vérifier?

Cdt
Modifié par gcyrillus (18 May 2023 - 19:58)
Oui, merci gcyrillus, j'ai consulté ton lien et testé
table-layout: fixed;
width: 100%;
Mais je ne comprends toujours pas pourquoi le navigateur décide de son propre chef, quand on ne précise aucune largeur de colonne, de placer une grande largeur à la première colonne au détriment des autres. Quelle est sa logique ? Normalement, lorsqu'on créé un tableau, et qu'on ne donne aucune largeur, le navigateur devrait attribuer la même largeur à toutes les colonnes, si on décide qu'il occupe toute la largeur de la fenêtre du navigateur. De plus, pourquoi décide-t-il d'élargir la première colonne et non la seconde ou la troisième ?
Modifié par ObiJuanKenobi (20 May 2023 - 07:43)
Modérateur
ObiJuanKenobi a écrit :
Oui, merci gcyrillus, j'ai consulté ton lien et testé
table-layout: fixed;
width: 100%;
Mais je ne comprends toujours pas pourquoi le navigateur décide de son propre chef, quand on ne précise aucune largeur de colonne, de placer une grande largeur à la première colonne au détriment des autres. Quelle est sa logique ? Normalement, lorsqu'on créé un tableau, et qu'on ne donne aucune largeur, le navigateur devrait attribuer la même largeur à toutes les colonnes, si on décide qu'il occupe toute la largeur de la fenêtre du navigateur. De plus, pourquoi décide-t-il d'élargir la première colonne et non la seconde ou la troisième ?


Un tableau s'adapte au contenu qu'il contient par défaut.

Lorsque tu donnes une largeur à un tableau il va répartir les largeurs de colonnes en fonction de leurs contenus si tu ne donne pas de largeurs explicite à celles-ci . Sans table-layout fixed, le navigateur étalé la balise table sur toute la largeur disponible et ne calculé rien d'autre, le reste du tableau se construit et s'affiche au fur et à de la lecture du code, il trouve une cellule, du contenu, puis éventuellement une autre, etc. Une fois la balise table refermée, il ne recalcule pas les dimensions du tableau . La largeur des colonnes paraît alors aléatoire.

Note, que si tu donnes des largeurs, ces largeurs sont à priori à considérées comme des largeurs minimales, un tableau s'adapte à son contenu et il peut s'étaler au delà des 100% initialement indiqué.

En passant le table-layout à fixed, alors les largeurs appliquées deviennent .. fixes , les contenus peuvent débordés. Si aucune largeurs ne sont données aux colonnes, alors celles-ci sont réparties équitablement. Le table-layout:fixed utilise un autre algorithme pour afficher le tableau et oblige le navigateur à le calculer avant de le remplir.

exemples visuels : https://codepen.io/gc-nomade/pen/yLRQRZP

Cdt
Modifié par gcyrillus (21 May 2023 - 10:27)