HTMLテーブル：ステップバイステップガイド

HTMLテーブルは、行と列に表示されるデータのセットです。 HTMLテーブルを作成するには、を使用します

要素。使用できます行を作成するには

列を作成し、

テーブルヘッダーを作成します。

表は、行と列を使用してデータをわかりやすく表示するために使用されます。バスがいつ到着するかを示すバスの時刻表から、私たちが食べる食べ物の材料のテーブルまで、私たちは毎日テーブルに遭遇します。

HTMLでは、データを表示する方法としてテーブルが使用されます。このチュートリアルでは、例を使用して、HTMLテーブルの基本、複数の列と行にまたがるセル、およびテーブルのスタイル設定方法について説明します。このチュートリアルを終えると、HTMLでテーブルを作成して操作するエキスパートになります。

HTMLテーブルの作成

テーブルは、行と列に表示されるデータのセットです。テーブルを使用すると、データセット内の一連の値の間の関係を簡単に確認できます。

HTMLでは、テーブルは

を使用して定義されますエレメント。

内要素、使用できます：

行を作成する

列を作成する

テーブルヘッダーを作成します。

上記のように、コーヒーショップで販売されているコーヒーとその価格を一覧表示するテーブルを作成するとします。このテーブルには、コーヒーと価格の2つの列と、3つの行が必要です。次のコードを使用して、このテーブルをHTMLで定義できます。

<table>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

表の結果は次のとおりです。

この例では、1行の見出し、2列、および3行のテーブルデータを含むテーブルを作成しました。コードを分解してみましょう。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

まず、

を使用しましたテーブルを作成するようにWebページに指示するHTMLタグ。次に、を使用しました行を作成するためのタグ、およびを使用しましたタグを使用して、テーブルのデータセルにコーヒーの名前と価格を表示する3つのテーブル行をそれぞれ作成します。これらの各タグにはタグは、テーブルの見出しを定義するために使用されますタグは、テーブルの内容とを定義するために使用されますタグは、テーブルのフッターを定義するために使用されます。

これがどのように機能するかを説明するために、最初の例から表を見てみましょう。コーヒーショップで販売されているすべてのコーヒーを一覧表示するテーブルを作成しているとします。コードを読みやすくするために、テーブルのヘッダー、本文、フッターを分離します。このコードを使用してこれを行うことができます：

<table>
	<thead>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Last Updated</th>
			<td>January 9th, 2020</td>
		</tr>
	</tfoot>
</table>

この表では、

を使用しています。、、およびテーブルのヘッダー、本文、フッターをそれぞれ定義するタグ。

タグは、 Coffeeを含むヘッダー行を区別するために使用されますおよび価格 表の見出し。タグは、テーブルのメインデータ（コーヒーの価格）を含む行を格納するために使用されます。

タグは、テーブルが最後に更新された日時を示す行を格納するために使用されます。このデータは、コーヒーとその価格のリストのエントリではないため、フッタータグに配置しました。

これらのタグはオプションですが、HTMLでテーブルをより適切に構成するのに役立ちます。

HTMLのテーブルキャプション

<キャプション> タグは、タイトルを追加するために使用されます。これは、 captionとも呼ばれます。、テーブルに。

<キャプション> タグは、開始

テーブルの列ヘッダーを定義するタグ。この場合、列ヘッダーは Coffeeです。および価格 。

次に、さらに3つの

が含まれていますタグ。テーブルの列セルを表すために使用されます。たとえば、td要素は Espressoを表すために使用されますおよび$2.00 最初のコーヒーエントリーで。

テーブルスタイリング

HTMLで表のスタイルを設定する方法はいくつかあります。

境界線

HTMLでは、テーブルにはデフォルトで境界線がありません。つまり、テーブルに境界線を表示する場合は、CSSを使用する必要があります。 CSS border属性は、HTMLテーブルに境界線を追加するために使用されます。

以前のテーブルの周りに黒一色の境界線を追加したいとします。このコードを使用してこれを行うことができます：

table, th, td {
	border: 1px solid black;
}

テーブルコードでこのスタイルを使用すると、テーブルが変更され、各セルとテーブル自体の周囲に境界線が含まれるようになります。改訂された表は次のとおりです：

これで、テーブルに境界線ができ、テーブル内のデータを読みやすくなりました。ただし、上記で作成したスタイルは、すべてのセルの周囲に境界線を配置し、各境界線を分離します。各境界線を1つに折りたたむ場合は、border-collapseプロパティを使用できます。このタスクを実行するために使用するコードは次のとおりです。

table {
	border-collapse: collapse
}

新しいテーブルは次のようになります：

ご覧のとおり、テーブルには、各セルとテーブル自体の周囲に1つの境界線ではなく、1つの境界線があります。

見出しを揃える

デフォルトでは、見出しはセルの中心に揃えられます。見出しをセルの左または右に揃える場合は、text-alignプロパティを

に指定できます。テーブル内のタグ（

を思い出してください）タグは見出しを指定するために使用されます。

使用するコードは次のとおりです。

th {
	text-align: left;
}

このスタイルを上からテーブルに適用すると、次のテーブルが作成されます。

上記の表は、列見出しを表の左側に揃えています。

HTMLテーブルに適用できるスタイルは他にもたくさんありますが、このチュートリアルでは、テーブルの境界線と折りたたまれた境界線に焦点を当てています。今後は、チュートリアルのこの部分で定義したスタイルを使用して、データを読みやすくします。

複数の行と列のスパン

テーブルを操作するときは、セルを複数の行または列にまたがらせたい場合があります。

たとえば、以前の価格列を2つの列にまたがらせたいとします。そこで、colspan属性とrowspan属性が登場します。Rowspanはテーブル内の複数の行にまたがるのに使用され、colspanはテーブル内の複数の列にまたがるのに使用されます。

これは、colspanを使用して Priceにまたがるテーブルの例です。 2列にわたる列：

<table>
    <tr>
        <th>Coffee</th>
        <th colspan="2">Price</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>$2.00 (new)</td>
        <td>$2.00 (old)</td>
    </tr>
</table>

表は次のように表示されます：

ご覧のとおり、価格列は2行にまたがっています。さらに、同じ方法で行スパンを使用して、複数の行にまたがるセルを作成できます。

メニューの特定のコーヒーに関する詳細を格納するテーブルがあるとします。

毎月最終日にコーヒーを購入するように顧客を誘導するために適用されるコーヒーの割引価格と、同じ見出し Priceの下に表示される通常価格に関する情報が必要です。、価格を区別するためのラベル付き。次のコードを使用して、このタスクを実行できます。

<table>
        <tr>
            <th>Coffee</th>
            <td>Espresso</td>
        </tr>
        <tr>
            <th rowspan="2">Price</th>
            <td>$2.00 (regular)</td>
        </tr>
        <tr>
            <td>$1.80 (discounted)</td>
        </tr>
</table>

表の出力は次のとおりです。

この例では、 Price ラベルは2行にまたがっています。

テーブルヘッダー、本文、およびフッターの定義

テーブルを操作する場合、データをより適切に構造化するために使用される3つのタグがあります。

の直後に配置する必要がありますテーブルのタグ。これが