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

HTML5でテーブルを使って複数カラムのレイアウトを作成する方法

Webページを複数の列（カラム）に分割してコンテンツを配置すると、訪問者にとって見やすく、情報が整理されたレイアウトを実現できます。HTMLでは<table>要素を活用することで、誰でも簡単に複数列レイアウトを組み立てることが可能です。

3カラムレイアウトの基本構成

一般的な3カラムレイアウトでは、画面を左右と中央の3つの領域に分け、それぞれに次のような役割を持たせます。

  • 左列：メインメニューやナビゲーションリンクなどを配置
  • 中央列：記事本文など、ページのメインとなるコンテンツを配置
  • 右列：広告バナーや関連情報などの補足コンテンツを配置

この構成により、重要なコンテンツを中央に据えつつ、操作性の高いメニューと収益化につながる広告スペースを両立できます。

実装コード例

以下は、<table>タグを使って3カラムレイアウトを実装したシンプルな例です。

<!DOCTYPE html>
<html>
   <head>
      <title>Three Column HTML Layout</title>
   </head>
   <body>
      <table width = "100%" border = "0">
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>

            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technical and Managerial Tutorials
            </td>

            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
      <table>
   </body>
</html>

コードのポイント

  • <td>タグのwidth属性で各列の幅の比率を指定しています（左20％・中央60％・右20％）。
  • bgcolor属性を使うと、列ごとに背景色を変えて視覚的に領域を区別できます。
  • valign="top"を指定することで、各セルの内容が上揃えになり、列間で高さが異なる場合でも見た目が崩れません。

補足：モダンなWeb制作における注意点

テーブルレイアウトは手軽で理解しやすい一方、現在のHTML5の標準では、レイアウト目的での<table>使用は推奨されていません。<table>は本来、表形式のデータを表示するための要素だからです。実際のサイト構築では、CSS FlexboxやCSS Gridといったモダンなレイアウト手法を採用するのがベストプラクティスとされています。ただし、HTMLの基礎を学ぶ段階や簡易的なページを作る際には、テーブルレイアウトは仕組みを把握するための良い教材になります。

  1. HTMLでテーブルを作成する方法を解説！基本タグとサンプルコード

    HTMLでテーブル（表）を作成するには、<table>タグを使用します。テーブルは行と列で構成されており、<tr>、<th>、<td>の各要素を組み合わせて定義します。 テーブル作成に使う3つの基本タグ <tr>タグ：テーブルの「行（Table Row）」を定義します。行ごとにこのタグで囲みます。 <th>タグ：テーブルの「見出しセル（Table Header）」を定義します。通常、列のタイトルなどに使用され、文字が太字・中央揃えで表示されます。 <td>タグ：テーブルの「データセル（Table Data）」

  2. JavaFXでポリゴン（多角形）を作成する方法を徹底解説

    JavaFXにおけるポリゴンとはポリゴン（多角形）とは、同一平面上に存在する複数の線分によって形成される閉じた図形のことです。JavaFXでは、このポリゴンは javafx.scene.shape.Polygon クラスによって表現されます。JavaFXでポリゴンを作成するには、以下の手順が必要です。Polygonクラスのインスタンスを生成する。ポリゴンを構成する各線分の始点と終点のXY座標を、コンストラクタの引数として渡すか、getPoints() メソッドを使って設定する。polygon.getPoints().addAll(new Double[]{ カンマ区切りのXY座標のリスト })