web-dev-qa-db-ja.com

表のセルの中央のテキスト

私の問題の答えが見つからないようです。 2行2列のテーブル（下のコードのように）がありますが、特定のセルでテキストを中央に揃えるにはどうすればよいですか。すべてのセルではなく、1つまたは2つのセルのテキストを中央揃えにします。

<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

これにはCSSを使用することをお勧めします。センタリングを強制するCSSルールを作成する必要があります。次に例を示します。

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

そして、ui-helper-centerクラスを、整列を制御するテーブルセルに設定します。

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

[〜＃〜] edit [〜＃〜]：この答えが受け入れられたので、私は炎戦争を引き起こした部分を編集する義務を感じましたコメントで、そして貧しくて時代遅れの慣行を促進しないこと。

CSSルールをページに含める方法については、 Gabeの答え を参照してください。

51
Cᴏʀʏ

どうでしょう（クラス名のより良い名前を考えてください、これは単なる例です）：

.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>

例 ここ

cssは別のファイルに配置できますが、これをお勧めします。この例では、styles.cssというファイルを作成し、cssルールをその中に配置しました。次に、次のように<head>セクションのHTMLドキュメントにそれを含めます。

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

別のCSSファイルを作成せず、まったくお勧めしません... HTMLドキュメントの<style>に<head>ブロックを作成します。次に、そこにルールを配置します。

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