HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでテーブルセルのテキストを中央揃えにする方法【CSSのtext-align活用】

HTMLのテーブルセル内にあるテキストを中央揃えにするには、CSSのtext-alignプロパティを使用します。

かつては<table>タグや<td>タグにalign属性を指定して配置を調整していましたが、この属性はHTML5で廃止（非推奨）されました。そのため、現在はCSSを使ってテキストの位置を揃えるのが標準的な方法です。ここでは、<td>タグに対してtext-alignプロパティを適用します。

style属性を使った中央揃えの指定方法

CSSを適用する方法のひとつが、style属性によるインラインスタイルの指定です。style属性は要素に直接スタイルを記述できる属性で、<td>タグと組み合わせてtext-alignプロパティを指定することで、セル内のテキストを簡単に中央揃えできます。

なお、style属性で指定したスタイルは優先度が高く、<style>タグや外部スタイルシートで設定されたグローバルなスタイルを上書きすることに注意してください。意図しないデザイン崩れを防ぐためにも、この仕様は理解しておきましょう。

text-alignで指定できる主な値

text-alignプロパティには、以下のような値を設定できます。

  • left：左揃え（初期値）
  • right：右揃え
  • center：中央揃え

テーブルセルのテキストを中央に表示したい場合は、「center」を指定します。

コード例

次のコードを実行すると、HTMLのテーブルセル内のテキストを中央揃えで表示できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, td, th {
            border: 1px solid black;
            width: 300px;
         }
      </style>
   </head>
   <body>
      <h1>Our Technologies</h1>
      <table>
         <tr>
            <th>IDE</th>
            <th>Database</th>
         </tr>
         <tr>
            <td style="text-align:center">NetBeans</td>
            <td style="text-align:center">MySQL</td>
         </tr>
      </table>
   </body>
</html>

この例では、2つの<td>タグそれぞれに「style="text-align:center"」を指定しています。これにより、「NetBeans」と「MySQL」のテキストがセルの中央に配置されます。

実行結果

ブラウザで表示すると、テーブルセル内のテキストが中央揃えになっていることが確認できます。

HTMLでテーブルセルのテキストを中央揃えにする方法【CSSのtext-align活用】

まとめ

HTML5ではalign属性が廃止されているため、テーブルセルのテキスト配置はCSSのtext-alignプロパティで制御しましょう。インラインスタイル以外にも、<style>タグや外部CSSファイルで一括指定すれば、複数のセルのスタイルを効率的に管理できます。

  1. HTMLでテキストを右から左（RTL）に表示する方法【CSSのdirectionプロパティ】

    HTMLでテキストを右から左（Right-to-Left：RTL）に表示するには、CSSのdirectionプロパティを使用します。style属性と組み合わせることで、特定の要素に対してインラインスタイルとして文字の方向を指定できます。 directionプロパティに指定できる値 directionプロパティでは、以下の3つの値を設定できます。 No.値と説明 1ltr左から右へ記述する（デフォルトの方向） 2rtl右から左へ記述する 3initial初期値に戻す style属性を使った指定方法 テキストを右から左に表示する場合は、style属性でCSSのdirectionプロパテ

  2. HTMLでテキストの方向を設定する方法【directionプロパティの使い方】

    HTMLでテキストの表示方向を設定するには、style属性を使用します。style属性は要素にインラインスタイルを指定するための属性で、CSSのdirectionプロパティと組み合わせることで、テキストの流れる方向（左から右／右から左）を制御できます。 ただし、style属性で指定したスタイルはインラインスタイルとして扱われるため、<style>タグや外部スタイルシートで定義されたグローバルなスタイルよりも優先される点に注意してください。 directionプロパティに指定できる値 番号値と説明 1ltr左から右へ記述する（left to right）。日本語や英語など、ほ