HTMLのテーブルのvalign属性の使い方

HTMLのテーブルのvalign属性の使い方
- HTMLファイル (test-table.html)
- CSSファイル (test-style.css)

HTMLのテーブルでvalign属性は、テーブルセル内のコンテンツを垂直方向に配置するために使用されます。
valign属性は、top、middle、bottomの3つの値を取ることができ、それぞれの意味は次の通りです。

1. top - テーブルセルの上部にコンテンツを配置します。
2. middle - テーブルセルの中央にコンテンツを配置します。
3. bottom - テーブルセルの下部にコンテンツを配置します。

ただし、HTML5ではvalign属性は非推奨とされており、CSSのvertical-alignプロパティを使用することが推奨されています。
vertical-alignプロパティは、テーブルセル内のコンテンツの垂直位置を指定するために使用されます。

以下に、valign属性とCSSのvertical-alignプロパティを使った具体的な例を示します。
例はHTMLとCSSを別々のファイルで提供し、クラス名やID名はtest-で始まるようにします。

HTMLファイル (test-table.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブルのvalign属性の例</title>
  <link rel="stylesheet" href="test-style.css">
</head>
<body>
  <table class="test-table">
    <tr>
      <td class="test-top" valign="top">上部に配置</td>
      <td class="test-middle" valign="middle">中央に配置</td>
      <td class="test-bottom" valign="bottom">下部に配置</td>
    </tr>
    <tr>
      <td class="test-vertical-top">上部に配置 (CSS)</td>
      <td class="test-vertical-middle">中央に配置 (CSS)</td>
      <td class="test-vertical-bottom">下部に配置 (CSS)</td>
    </tr>
  </table>
</body>
</html>

CSSファイル (test-style.css)

.test-table {
  width: 100%;
  border-collapse: collapse;
}

.test-table td {
  border: 1px solid #000;
  padding: 10px;
}

.test-top {
  vertical-align: top;
}

.test-middle {
  vertical-align: middle;
}

.test-bottom {
  vertical-align: bottom;
}

.test-vertical-top {
  vertical-align: top;
}

.test-vertical-middle {
  vertical-align: middle;
}

.test-vertical-bottom {
  vertical-align: bottom;
}

この例では、最初の行のテーブルセルにはvalign属性が使われており、次の行のセルにはCSSのvertical-alignプロパティが使われています。
valign属性を使った古い方法と、CSSを使った推奨される方法の両方を示しています。

valign属性はHTML4までの仕様であり、HTML5ではCSSのvertical-alignプロパティに置き換えられました。
これにより、スタイルの適用がより柔軟になり、デザインの一貫性を保つことが容易になります。