Comment puis-je mettre en gras HTML spécifique de lignes et de colonnes en CSS ou HTML?

Je veux mettre en gras la première ligne et la première colonne (ligne 0 et la colonne 0) de mon tableau HTML. Comment cela peut être fait soit avec le langage HTML ou CSS?

La table:

<table border="1">
    <tbody>
        <tr>
            <td></td>
            <td>translate.com AND https://translate.google.com/</td>
            <td>http://www.bing.com/translator/</td>
        </tr>
        <tr>
            <td>I eat tacos</td>
            <td>Yo como tacos</td>
            <td>Comer tacos</td>
        </tr>
    . . .
    </tbody>
</table>

...et CSS:

body {
    font-family: "Segoe UI", "Calibri", "Candara", "Bookman Old Style", "Consolas", sans-serif;
    font-size: 1.2em;
    color: navy;
}

...sont assez basique.

La table est ici: http://jsfiddle.net/clayshannon/LU7qm/7/

jsfiddle.net/LU7qm/8 (ou utilisez l'élément th sur les cellules que vous souhaitez être en gras)

OriginalL'auteur B. Clay Shannon | 2014-06-11

  1. 8

    Pour mettre en gras la première ligne et la première colonne avec les CSS, à l'aide de votre balisage HTML, utilisez la :first-child pseudo-classe, qui correspond à tout élément qui est le premier enfant (le premier sous-élément) de son parent:

    tr:first-child, td:first-child { font-weight: bold }

    Toutefois, si ces cellules sont censés être des cellules d'en-tête (pour les autres cellules de la même colonne ou la même ligne), il serait plus logique d'utiliser la ème élément pour eux et pour conclure la première ligne dans une thead élément:

    <table border="1">
    <thead>
        <tr>
            <th></th>
            <th>translate.com AND https://translate.google.com/</th>
            <th>http://www.bing.com/translator/</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>I eat tacos</th>
            <td>Yo como tacos</td>
            <td>Comer tacos</td>
        </tr>
    <!-- other rows here -->
    </tbody>
</table>

    La th éléments apparaissent en gras par défaut (mais vous pouvez toujours utiliser les CSS pour le dire explicitement). Ils seront également centré par défaut; si vous ne le souhaitez pas, vous pouvez facilement remplacer le CSS, par exemple th { text-align: left }.

    Dans ce cas, la première ligne ressemble beaucoup à une ligne d'en-tête, donc je voudrais faire un thead avec th. Cela pourrait être utile, par exemple, parce que de nombreux navigateurs puis répétez cette ligne au début d'une nouvelle page si la page est imprimée et le tableau est divisé en deux pages ou plus. Comme pour les premières cellules de chaque ligne, ils sont peut-être les mieux gardés comme td et juste style audacieux, si vous le souhaitez.

    comment faire pour modifier la dernière ligne en Gras (Noir) avec le Jaune couleur d'arrière-plan.
    Vecteur JX hier, vous pouvez le faire avec tr:last-child { font-weight: bold; background-color: yellow } à condition que la table a seulement un tbody élément, comme il le fait habituellement. Si il y en a plusieurs, vous avez besoin d'un plus compliqué sélecteur: tbody:last-child tr:last-child.

    OriginalL'auteur Jukka K. Korpela

  2. 5

    Sélecteur CSS :

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

    Explications:

    :first-child est utilisé pour sélectionner le premier enfant d'un ensemble d'éléments. Par exemple:

    <ul>
    <li>First</li>
    <li>Second/li>
    <li>Third</li>
    <li>Fourth</li>
</li>

    li:first-child {} portera sur la première <li>.

    Pour atteindre ce que vous avez demandé, j'ai fait deux choses, depuis une table est un ensemble de lignes.

    1. tr:first-child td (première ligne du tableau, tous td)
    2. tr td:first-child (toutes les lignes, premier td)

    Remarque: les Deux règles n ° 1 et n ° 2 portera sur la première ligne, première td; mais il ne devrait pas être un problème.

    Cette réponse pourrait être amélioré avec un peu d'explication de ce que les sélecteurs sont destinés à la cible.

    OriginalL'auteur Mathieu Bour