web-dev-qa-db-fra.com

Centrer le texte dans la cellule du tableau

Je n'arrive pas à trouver la réponse à mon problème. J'ai un tableau avec deux lignes et deux colonnes (comme le code ci-dessous), comment centrer le texte dans des cellules spécifiques. Je voudrais centrer le texte dans une ou deux des cellules - pas toutes les cellules.

<div style="text-align: center;">
    <table style="margin: 0px auto;" border="0">
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</div>
htmlhtml-tablealignmentcenter
35
Jack Stevens

Je recommanderais d'utiliser CSS pour cela. Vous devez créer une règle CSS pour appliquer le centrage, par exemple:

.ui-helper-center {
    text-align: center;
}

Et puis ajoutez le ui-helper-center classe aux cellules de la table pour lesquelles vous souhaitez contrôler l'alignement:

<td class="ui-helper-center">Content</td>

[~ # ~] modifier [~ # ~] : Cette réponse étant acceptée, je me suis senti obligé de supprimer les parties qui ont provoqué une guerre des flammes. dans les commentaires, et de ne pas promouvoir des pratiques pauvres et dépassées.

Voir réponse de Gabe pour savoir comment inclure la règle CSS dans votre page.

51
Cᴏʀʏ

Que diriez-vous simplement (Veuillez noter, proposez un meilleur nom pour le nom de la classe, ceci est simplement un exemple):

.centerText{
   text-align: center;
}


<div>
   <table style="width:100%">
   <tbody>
   <tr>
      <td class="centerText">Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td class="centerText">Cell 3</td>
      <td>Cell 4</td>
    </tr>
    </tbody>
    </table>
</div>

Exemple ici

Vous pouvez placer le css dans un fichier séparé, ce qui est recommandé. Dans mon exemple, j'ai créé un fichier nommé styles.css et a placé mes règles css en elle. Ensuite, incluez-le dans le document HTML dans le fichier <head> section comme suit:

<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>

L'alternative, ne pas créer un fichier css séparé, pas du tout recommandé ... Create <style> bloc dans votre <head> dans le document html. Ensuite, placez simplement vos règles ici.

<head>
 <style type="text/css">
   .centerText{
       text-align: center;
    }
 </style>
</head>
6
Gabe