web-dev-qa-db-fra.com

Aligner le texte dans un en-tête de tableau

Il semble que align ne fonctionne pas pour l’élément th . Voici mon HTML:

<div style="width: 100%; height: 175px; overflow: auto;">
  <table class="grid" id="table">
    <thead>
      <tr>
        <th class="not_mapped_style" style="display: none;" align="center">id</th>
        <th class="not_mapped_style" align="center">DisplayName</th>
        <th align="center">PrimaryEmail</th>
        <th align="center">Age</th>
        <th align="center">Phone</th>
      </tr>
    </thead>
    <caption>Contacts</caption>
    <tbody>
      <tr>
        <td style="display: none;" property_value="0" property_name="id" align="center">0</td>
        <td property_value="rpcuser" property_name="DisplayName" align="center">rpcuser</td>
        <td property_value="[email protected]" property_name="PrimaryEmail" align="center">[email protected]</td>
        <td property_value="69" property_name="Age" align="center">69</td>
        <td property_value="+722616807" property_name="Hand_Phone" align="center">+18007</td>
      </tr>
    </tbody>
  </table>
</div>

L'alignement du texte fonctionne parfaitement pour les éléments td mais échoue pour les th. Pourquoi?

htmlhtml-table
45
Michael Z

Essayer:

text-align: center;

Vous connaissez peut-être l'attribut HTML align (qui n'est plus disponible depuis HTML 5). L’attribut align peut être utilisé avec des tags tels que 

<table>, <td>, and <img>

spécifier l'alignement de ces éléments. Cet attribut vous a permis d’aligner des éléments horizontalement. HTML avait/avait aussi un attribut valign pour aligner les éléments verticalement. Cela a également été interrompu de HTML5.

Ces attributs ont été abandonnés au profit de l'utilisation de CSS pour définir l'alignement des éléments HTML.

Il n'y a pas réellement de propriété CSS align ou CSS valign. CSS a plutôt le texte-align qui s'applique au contenu incorporé d'éléments de niveau bloc et la propriété vertical-align qui s'applique aux cellules de niveau et de tableau incorporés.

73
topcat3

Essayez d'utiliser le style pour

th {text-align:center}
18
vusan

Essayez d'utiliser l'attribut style-aligner dans le style pour aligner le centre.

<th class="not_mapped_style" style="text-align:center">DisplayName</th>
13
SaidbakR

Si vous voulez centrer le th de toutes les tables:
table th{ text-align: center; }

Si vous voulez seulement centrer le th d'une table avec un identifiant déterminé:
table#tableId th{ text-align: center; }

2
Lewis86

HTML: 

<tr>
    <th>Language</th>
    <th>Skill Level</th>
    <th>&nbsp;</th>
</tr>

CSS: 

tr, th {
    padding: 10px;
    text-align: center;
}
1
Gene

Dans HTML5 , le moyen le plus simple et le plus rapide de centrer votre <th>THcontent</th> consiste à ajouter une colspan comme ceci:

<th colspan="3">Thcontent</th>

Cela fonctionnera si votre table est composée de trois colonnes. Donc, si vous avez un tableau à quatre colonnes, ajoutez une colspan de 4, etc.

Vous pouvez également gérer l'emplacement dans le fichier CSS lorsque vous avez mis votre colspan en HTML, comme je l'ai dit.

th { 
    text-align: center; /* Or right or left */
}
0
peterManesis

Votre code fonctionne, mais il utilise des méthodes obsolètes. Pour ce faire, vous devez utiliser la propriété CSS text-align plutôt que la propriété align. Même dans ce cas, il doit s'agir de votre navigateur ou de quelque chose qui le concerne. Essayez cette démo dans Chrome (je devais désactiver normalize.css pour le rendre).

0
Joseph Marikle