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

HTMLでテーブルのセル（td）を表示する方法｜属性一覧とサンプルコード

HTMLでテーブルのセルを表示するには、<td>タグを使用します。<td>タグは「table data」の略で、テーブル内の個々のセルやデータを定義するための要素です。

<td>タグで使用できる属性

<td>タグでは、以下のような属性をサポートしています。なお、「非推奨」とされている属性は、現在のHTML標準ではCSSによる指定が推奨されています。

属性値説明
abbr省略したテキスト非推奨 − セル内の内容の省略版を指定します。
alignright / left / center / justify / char非推奨 − セル内の視覚的な配置を指定します。
axisname非推奨 − セルのカテゴリ名を指定します。テーブルデータへの検索に利用できたり、音声読み上げブラウザで役立つことがあります。
bgcolorrgb(x,x,x) / #hexcode / カラー名非推奨 − セルの背景色を指定します。
char文字非推奨 – テキストを揃える基準となる文字を指定します。align="char" と組み合わせて使用します。
charoffピクセル または %非推奨 − char属性で指定した基準文字からのオフセット（ピクセルまたはパーセント）を指定します。
colspan数値現在のセルが横方向にまたがる列数を指定します。
headersidこのセルに関連する見出しセル（th）のidをスペース区切りで指定します。値は該当する見出しセルのid属性と一致する必要があります。スクリーンリーダーなどの非視覚系ブラウザで特に有用です。
heightピクセル非推奨 − セルの高さを指定します。
nowrapnowrap非推奨 − セル内のテキストの自動折り返しを禁止します。
rowspan数値現在のセルが縦方向にまたがる行数を指定します。
scopecol / colgroup / row / rowgroup非推奨 − 見出しセルに対して使用し、その見出し情報がどのセルに対応するかを指定します。
valigntop / middle / bottom / baseline非推奨 − セル内の垂直方向の配置を指定します。
widthピクセル または %非推奨 − セルの幅を指定します。

現代のWeb開発での注意点

上記のうち多くの属性（align、bgcolor、widthなど）はHTML5で廃止（非推奨）されています。現在の開発では、レイアウトや装飾はCSSで制御するのがベストプラクティスです。ただし、colspanとrowspan、およびheadersは引き続き有効な属性であり、複雑な表構造やアクセシビリティ向上のために活用できます。

サンプルコード

以下のコードを実行すると、HTMLでテーブルのセルを表示する動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>
   <body>
      <h3>実行結果</h3>
      <table>
         <th>点数</th>
         <th>学生</th>
         <tr>
            <td>600</td>
            <td>Amit</td>
         </tr>
         <tr>
            <td>400</td>
            <td>Anil</td>
         </tr>
      </table>
   </body>
</html>

  1. HTMLでテーブルの境界線を結合（collapse）する方法

    HTMLでテーブルの境界線を結合（collapse）して1本の線にまとめたい場合は、CSSの border-collapse プロパティを使用します。このプロパティは、テーブルのセル同士の境界線をどのように表示するかを制御するもので、主に以下の2つの値を指定できます。 プロパティの値説明 separate各セルの境界線が分離されて表示されます（初期値） collapse隣接するセルの境界線が1本に結合されて表示されます 実際の指定方法は以下のようになります。 例1：border-collapse: collapse を使った場合 次のコードでは、border-collapse:

  2. HTMLでテーブルの境界線を作成するにはどうすればよいですか？

    HTMLで表（テーブル）の境界線を作成するには、かつては border 属性が使用されていました。しかし、HTML5 の登場によりこの属性は非推奨となりました。現在では、CSS の border プロパティを使って境界線を設定するのが標準的な方法です。table 要素だけでなく、<th> や <td> にも個別に境界線を指定しましょう。 サンプルコード 以下のコードを実行すると、HTML の表に境界線を表示できます。ここでは <style> タグ内で CSS を定義しています。 <!DOCTYPE html> <html> &nbs