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

HTMLでテーブルの行と列を作成する方法｜table・tr・tdタグの使い方を解説

HTMLでテーブルを作成する基本のタグ

HTMLでテーブル（表）の行と列を作成するには、<table>タグを使用します。テーブルは行と列で構成されており、1つ以上の<tr>・<th>・<td>要素を組み合わせて定義します。各タグの役割は次のとおりです。

  • <table>：テーブル全体を定義するコンテナ要素
  • <tr>：テーブルの「行」を定義する（Table Row）
  • <th>：見出しとなるヘッダーセルを定義する（太字・中央揃えで表示）
  • <td>：通常のデータセルを定義する（Table Data）

HTML5で使用できない属性に注意

align、bgcolor、border、cellpadding、cellspacingなど、かつて使われていた多くのテーブル属性はHTML5では廃止されており、サポートされていません。これらは使用せず、代わりにstyle属性やCSSでスタイルを指定しましょう。本記事のサンプルでは、<style>タグ内にCSSを記述してテーブルの枠線を設定しています。

HTMLでテーブルの行と列を作成する方法｜table・tr・tdタグの使い方を解説

コード例

以下のコードを実行すると、HTMLでテーブルの行と列を作成できます。<tr>タグで行を定義し、その中に<th>または<td>タグでセルを配置するのが基本的な構造です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>

   <body>
      <h2>Understanding Tables</h2>
      <table>
         <tr>
            <th>Header: This is row1 column1</th>
            <th>Header: This is row1 column2</th>
         </tr>
         <tr>
            <td>This is row2 column1</td>
            <td>This is row2 column2</td>
         </tr>
      </table>
   </body>
</html>

出力結果

上記のコードをブラウザで表示すると、1行目にヘッダーセル（<th>）、2行目にデータセル（<td>）を持つ2行×2列のテーブルが表示されます。

HTMLでテーブルの行と列を作成する方法｜table・tr・tdタグの使い方を解説

  1. HTMLで非表示のコメントを作成する方法

    HTMLで非表示のコメントを作成するには、<!-- を記述してコメントを開始し、--> で閉じます。このタグの間に書かれた内容はすべてブラウザ上では非表示になります。コメント機能は、後からコードを見直したり修正したりする必要がある開発者にとって非常に便利です。適切なコメントを残しておくことで、コードの意図や構造を簡単に理解できるようになります。コメントは「自分自身へのメモ」と捉えることもできます。同時に、HTMLコードを一時的に無効化したい場合にも活用でき、コメントアウトされた部分はブラウザに一切表示されません。サンプルコード以下のコードを実行して、HTMLにおける非表示コメントの

  2. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト