【HTML Living Standard】td要素の使い方
td要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
tdオブジェクトは、HTMLのテーブル構造において、個々のデータセル（マス目）を表すオブジェクトです。ウェブページ上で情報を表形式で整理し表示する際に不可欠な要素であり、特に表の本体となるデータ内容を格納するために使用されます。
このtdオブジェクトは、必ず<tr>（テーブルの行）オブジェクトの子要素として配置されます。これにより、<table>（テーブル全体）の中に論理的な行が形成され、その各行の中に個々のデータセルが配置されるという、階層的なテーブル構造が構築されます。
tdオブジェクトの中には、テキストデータはもちろんのこと、画像、リンク、他のHTML要素（例えばリストや段落）など、あらゆる種類のコンテンツを含めることができます。これにより、複雑な情報を柔軟に表形式で表示することが可能です。
また、tdオブジェクトにはいくつかの重要な属性があります。例えば、colspan属性を使用すると、現在のセルを横方向に指定した数の列にまたがらせることができます。同様に、rowspan属性を使用すると、現在のセルを縦方向に指定した数の行にまたがらせることができ、表のレイアウトをより柔軟に制御できます。これらの属性は、ヘッダーセルを表す<th>オブジェクトでも同様に使用されます。
システムエンジニアを目指す初心者の方にとって、tdオブジェクトはデータの視覚的な整理と提示において非常に基本的ながら強力なツールです。表を作成する際には、まず<table>、<tr>を配置し、その中に具体的なデータを入れる箱としてこのtdオブジェクトを使う、という流れを理解することが重要です。これにより、Webサイト上で情報を体系的に、そして分かりやすく提供できるようになります。
構文(syntax)
1<td>セルデータ</td>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML td要素でテーブルのデータセルを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML td要素のサンプル</title> 7</head> 8<body> 9 <h1>商品リスト</h1> 10 11 <!-- td要素は、HTMLのテーブル（表）内でデータセルを定義します。 --> 12 <!-- これは、<table>要素と<tr>（テーブルの行）要素の子要素として使用されます。 --> 13 <!-- th要素がヘッダーセルであるのに対し、td要素は一般的なデータセルを表します。 --> 14 <table> 15 <thead> 16 <tr> 17 <th>商品名</th> 18 <th>価格</th> 19 <th>在庫数</th> 20 </tr> 21 </thead> 22 <tbody> 23 <tr> 24 <td>ノートパソコン</td> <!-- データセル1 --> 25 <td>120,000円</td> <!-- データセル2 --> 26 <td>15</td> <!-- データセル3 --> 27 </tr> 28 <tr> 29 <td>スマートフォン</td> <!-- データセル1 --> 30 <td>80,000円</td> <!-- データセル2 --> 31 <td>30</td> <!-- データセル3 --> 32 </tr> 33 <tr> 34 <td>ワイヤレスイヤホン</td> <!-- データセル1 --> 35 <td>15,000円</td> <!-- データセル2 --> 36 <td>50</td> <!-- データセル3 --> 37 </tr> 38 </tbody> 39 </table> 40</body> 41</html>
HTMLの<td>要素は、Living Standardで定義されている要素の一つで、ウェブページで表（テーブル）を作成する際に、具体的なデータを表示するための「データセル」を定義します。これは、表の本体部分に表示される個々の情報を格納するために使用されます。
<td>要素は、必ず<table>要素（表全体を定義する要素）の内部に配置され、さらに<tr>要素（テーブルの行を定義する要素）の直接の子要素として使用されます。テーブルの列見出しや行見出しを定義する<th>要素とは異なり、<td>要素は表の本文となる一般的なデータを示します。
この<td>要素は、特定の引数を受け取らず、また、処理結果として何らかの値を返す戻り値もありません。その役割は、純粋に指定されたコンテンツ（テキストや他のHTML要素など）をテーブルのデータセルとして表示することにあります。
提供されたサンプルコードでは、商品リストの各行において「ノートパソコン」「120,000円」「15」といった具体的な商品情報がそれぞれ<td>要素内に記述されています。これにより、商品名、価格、在庫数が整然とした表形式で表示され、ユーザーにとって分かりやすい情報提示が可能となっています。
<td>要素は、HTMLのテーブル（表）内でデータセルを定義します。この要素は必ず<tr>（テーブルの行）要素の子要素として使用し、<table>や<tbody>の直下に配置しないよう注意してください。
<th>要素がテーブルのヘッダーセル（見出し）を表すのに対し、<td>は具体的なデータセルを示します。表の内容に応じて、どちらの要素を使用すべきか正しく判断することが重要です。テーブルは表形式の情報を構造化するために用いるべきであり、ウェブページのレイアウト目的で利用することは避けてください。適切な要素の使い分けと正しい構造の記述は、コンテンツの理解しやすさやウェブアクセシビリティの向上に繋がります。
HTML td 中央寄せする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML td要素の中央寄せサンプル</title> 7 <style> 8 /* 9 * HTMLの推奨コーディングスタイルでは、要素のレイアウトや装飾はCSSで行います。 10 * ここでは、内部スタイルシートを使ってtd要素のテキストを中央寄せに設定します。 11 */ 12 13 /* テーブル全体の基本的なスタイル設定 */ 14 table { 15 width: 80%; /* テーブルの幅 */ 16 border-collapse: collapse; /* セルの境界線を結合 */ 17 margin: 20px auto; /* テーブルをページの中央に配置 */ 18 } 19 20 /* ヘッダーセル(th)とデータセル(td)の共通スタイル */ 21 th, td { 22 border: 1px solid #ccc; /* 境界線の色と太さ */ 23 padding: 8px; /* セル内の余白 */ 24 } 25 26 /* 27 * ここがtd要素の中央寄せに関する重要なスタイルです。 28 * text-alignプロパティをcenterに設定することで、td要素内のテキストが中央揃えになります。 29 */ 30 td { 31 text-align: center; 32 } 33 34 /* 参考: テーブルヘッダー(th)のスタイル */ 35 th { 36 background-color: #f2f2f2; /* 背景色 */ 37 text-align: center; /* ヘッダーも中央寄せに */ 38 } 39 </style> 40</head> 41<body> 42 <h1>td要素の中央寄せの例</h1> 43 44 <table> 45 <thead> 46 <tr> 47 <th>項目名</th> 48 <th>数量 (中央寄せ)</th> 49 <th>備考</th> 50 </tr> 51 </thead> 52 <tbody> 53 <tr> 54 <td>りんご</td> 55 <td>100個</td> <!-- このセルの内容が中央寄せになります --> 56 <td>新鮮です</td> 57 </tr> 58 <tr> 59 <td>バナナ</td> 60 <td>50本</td> <!-- このセルの内容が中央寄せになります --> 61 <td>輸入</td> 62 </tr> 63 <tr> 64 <td>みかん</td> 65 <td>200個</td> <!-- このセルの内容が中央寄せになります --> 66 <td>旬</td> 67 </tr> 68 </tbody> 69 </table> 70</body> 71</html>
td要素は、HTMLのテーブル内で個々のデータセル（表の各項目）を定義するために使用されます。例えば、商品名や数量といった具体的な情報を表示する際に利用される要素です。このtd要素自体には、特別な引数や戻り値はなく、単にテキストや他のHTML要素を格納するコンテナとして機能します。
テーブルのセル内容を中央寄せにする場合、HTMLの構造と表示を分離するというWeb標準の考え方に基づき、CSS（カスケーディングスタイルシート）を用いて行います。サンプルコードでは、<style>タグ内にCSSのルールを記述し、td要素のテキストを中央寄せに設定しています。具体的には、td { text-align: center; }というスタイルルールを設定することで、指定されたtd要素内のテキストコンテンツが中央揃えになります。
このアプローチにより、HTMLは情報の構造を、CSSはその情報の見た目を担当するという役割分担が明確になります。サンプルコードは、商品リストの数量表示を中央寄せにすることで、td要素の基本的な使い方と、その内容をCSSで視覚的に整える具体的な方法を示しています。
HTMLでtd要素内のコンテンツを中央寄せにする際は、HTMLタグに直接スタイルを指定するのではなく、CSS（Cascading Style Sheets）を使用するのが現在の標準的な方法です。サンプルコードのCSS部分にあるtd { text-align: center; }が、データセル内のテキストを中央揃えにする肝となる設定です。これにより、コンテンツ（HTML）とデザイン（CSS）が分離され、Webサイトの保守性や柔軟性が高まります。
かつて存在したHTMLのalign属性（例: <td align="center">）は非推奨となっており、使用すると将来的に予期せぬ表示崩れや互換性の問題を引き起こす可能性があるため、必ずCSSでスタイルを制御するようにしてください。この原則は、td要素に限らず、HTML要素のレイアウト全般に当てはまる重要な考え方です。