Dev Faq
8
votes

Pour une colonne au lieu de la ligne?

Considérez le HTML suivant: 

<table>
    <tr>
        <td>Born</td>
        <td><time datetime="1986-11-05">5<sup>th</sup> November 1986</time></td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Sports</td>
        <td>Football<br />Tennis</td>
    </tr>
    <tr>
        <td>Teams</td>
        <td>Liverpool FC<br />Spain FC</td>
    </tr>
</table>

2 commentaires

Audacieux est juste une question de CSS. est un élément avec un sens sémantique spécifique.

@Mattball, son usage proposé de semble approprié dans ce cas.

3 Réponses :

14
votes

Oui, vous pouvez utiliser code> pour les cellules des rangées ou des colonnes. 

<table>
    <tr>
        <th>Born</th>
        <td><time datetime="1986-11-05">5<sup>th</sup> November 1986</time></td>
    </tr>
    <tr>
        <th>Gender</th>
        <td>Male</td>
    </tr>
...

0 commentaires
0
votes

ou vous pouvez ajouter que CSS à gras uniquement la première colonne 

table tr td:first-child{font-weight:bold;}

1 commentaires

C'est ce qu'est ce qu'un est pour cependant. Aucun point réinventant la roue. Merci pour l'effort, cependant.

11
votes

La spécification dit clairement qu'un TH peut fournir des informations d'en-tête pour une colonne ou une ligne (ou un groupe de colonnes ou de lignes). L'attribut étendue = ligne peut être utilisé pour dire explicitement que la cellule d'en-tête est une en-tête de rangée.

Utiliser TH vs. code> td a quelques implications. L'implication fonctionnelle est que les agents utilisateur peuvent traiter th de manière particulière, donnant à l'utilisateur l'accès aux cellules de données par des informations d'en-tête correspondantes. Cela s'applique principalement aux agents de la parole. Pour que cela soit significatif, la cellule TH doit vraiment fournir des informations d'identification pour la ligne de données ou la colonne de données. Dans ce cas, la condition est satisfaite. Donc, vous pouvez et devriez utiliser th au lieu de td , assez indépendamment du rendu souhaité.

Les autres implications sont que par défaut, TH Le contenu de l'élément est rendu en gras et centré horizontalement. Si cela n'est pas considéré comme approprié, vous pouvez facilement le remplacer dans CSS (ou même en HTML). Dans votre cas, si vous voulez que le contenu soit audacieux, mais à gauche aligné, utilisez {text-align: à gauche; } . (Un autre, peut-être meilleur, le style consiste à aligner de droite en-têtes de rangée: th {text-align: droite;} . Le centrage peut sembler étrange.)

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor