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

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

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

テーブル作成に使う3つの基本タグ

  • <tr>タグ：テーブルの「行（Table Row）」を定義します。行ごとにこのタグで囲みます。
  • <th>タグ：テーブルの「見出しセル（Table Header）」を定義します。通常、列のタイトルなどに使用され、文字が太字・中央揃えで表示されます。
  • <td>タグ：テーブルの「データセル（Table Data）」を定義します。実際のデータ内容はこのタグ内に記述します。

注意点：非推奨の属性は使用しない

align、bgcolor、border、cellpadding、cellspacingなどのテーブル属性は、HTML5では廃止（非推奨）となっており、サポートされていません。これらの属性は使用せず、代わりにCSSでスタイルを指定しましょう。

サンプルコード

以下のコードを実行すると、HTMLでテーブルを作成できます。あわせて<style>タグを使い、テーブルの枠線（ボーダー）のスタイルも指定しています。

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

    <body>
        <h1>Programming Languages</h1>
        <table>
            <tr>
                <th>Language</th>
                <th>Release Year</th>
            </tr>
            <tr>
                <td>Java</td>
                <td>1995</td>
            </tr>
            <tr>
                <td>Pascal</td>
                <td>1970</td>
            </tr>
        </table>
    </body>
</html>

表示結果

上記のコードをブラウザで開くと、「Language（言語名）」と「Release Year（リリース年）」を見出しとする2列のテーブルが表示されます。各行にはJava（1995年）やPascal（1970年）といったプログラミング言語の情報が格納されています。

CSSのborderプロパティによって、テーブル全体・見出しセル・データセルすべてに黒色の1px枠線が適用されているため、罫線のある見やすい表として表示されます。

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

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

  2. HTMLテーブル（表）の作り方｜table・tr・th・tdタグの基本をわかりやすく解説

    Webページ上で表を作成するには、HTMLの<table>タグを使用します。テーブルは、行を表す<tr>タグ、見出しセルを表す<th>タグ、そしてデータセルを表す<td>タグを組み合わせて構成されます。 HTMLテーブルの基本構造 テーブルは以下の要素で構成されています。 <table>：テーブル全体を定義するコンテナ要素 <tr>（Table Row）：テーブルの1行を定義します <th>（Table Header）：見出しとなるセルを定義します。多くのブラウザでは太字かつ中央揃えで表示されます <t