HTMLテーブル

HTMLテーブルの例

数	ファーストネーム	苗字	点数
1	Eve	Jackson	94
2	John	Doe	80
3	Adam	Johnson	67
4	Jill	Smith	50

HTMLのテーブルの定義

例

<table style="width:100%">
<tr>
<td>Jill</td>
    <td>Smith</td>
    <td>50</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

»それを自分で試してみてください

例を説明します：

テーブルは、で定義され<table>タグ。

テーブルは、テーブルで行に分割され<tr>タグ。

表の行を有するテーブルデータに分割され<td>タグ。

表の行は、またして表の見出しに分割することができる<th>タグ。

テーブルデータ<td> 、テーブルのデータコンテナです。
彼らは、テキスト、画像、リスト、他のテーブルなどのようなHTML要素のすべての種類を含めることができます

BORDER属性を持つHTMLの表

あなたがテーブルの枠線を指定しない場合、それは国境なしで表示されます。

国境を使用して追加することができborder属性を：

例

<table border="1" style="width:100%">
<tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

»それを自分で試してみてください

border属性は、HTMLの規格のうち、その道を進んでいます！ CSSを使用することをお勧めします。

国境を追加するには、CSSのborderプロパティを使用します。

例

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

»それを自分で試してみてください

テーブルとテーブルセルの両方の境界を定義することを忘れないでください。

倒壊国境でのHTMLの表

あなたは国境が1つの境界に崩壊したい場合は、CSSの追加border-collapse ：

例

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

»それを自分で試してみてください

セルのパディングとHTMLの表

セルのパディングは、セルの内容とその境界の間のスペースを指定します。

あなたはパディングを指定しない場合、テーブルセルは、パディングなしで表示されます。

パディングを設定するには、使用するCSS paddingプロパティを：

例

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

»それを自分で試してみてください

HTML表見出し

表の見出しはで定義される<th>タグ。

デフォルトでは、すべての主要なブラウザは、大胆かつ中心として、テーブルの見出しを表示します。

例

<table style="width:100%">
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

»それを自分で試してみてください

表の見出しを左揃えにするには、使用するCSS text-alignプロパティを：

例

th {
text-align: left;
}

»それを自分で試してみてください

ボーダーの間隔でHTMLの表

ボーダーの間隔は、セル間のスペースを指定します。

表の境界線の間隔を設定するには、使用するCSS border-spacingプロパティを：

例

table {
border-spacing: 5px;
}

»それを自分で試してみてください

テーブルには国境が崩壊した場合、ボーダー間隔は効果がありません。

多くの列にまたがる表のセル

1列以上のセル範囲を作成するには、使用colspan属性：

例

<table style="width:100%">
<tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
</tr>
<tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
</tr>
</table>

»それを自分で試してみてください

多くの行にまたがる表のセル

1行以上のセル範囲を作成するには、使用rowspan属性を：

例

<table style="width:100%">
<tr>
    <th>Name:</th>
    <td>Bill Gates</td>
</tr>
<tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
</tr>
<tr>
    <td>555 77 855</td>
</tr>
</table>

»それを自分で試してみてください

キャプション付きHTMLの表

テーブルにキャプションを追加するには、使用<caption>タグを：

例

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
<tr>
    <td>February</td>
    <td>$50</td>
</tr>
</table>

»それを自分で試してみてください

<caption>タグは、直後に挿入する必要があり<table>タグ。

一つの表のための特別なスタイル

特別なテーブルのための特別なスタイルを定義するには、追加idテーブルに属性を：

例

<table id="t01">
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

今、あなたはこのテーブルのための特別なスタイルを定義することができます。

table#t01 {
width: 100%;
background-color: #f1f1c1;
}

»それを自分で試してみてください

そして、より多くのスタイルを追加します。

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

»それを自分で試してみてください

章のまとめ

HTMLを使用し<table>テーブルを定義するための要素を
HTML使用<tr>テーブルの行を定義する要素を
HTMLを使用し<td>テーブルのデータを定義するための要素を
HTMLを使用して<th>要素は、表の見出しを定義します
HTMLを使用し<caption>テーブルのキャプションを定義する要素を
CSSの使用border境界線を定義するプロパティを
CSSを使用しborder-collapseセルの枠線を崩壊する性質を
CSSの使用padding細胞にパディングを追加するには、プロパティを
CSSの使用text-alignセルのテキストを整列する性質を
CSSの使用border-spacingセル間の間隔を設定するには、プロパティを
使用colspanセルスパン多くの列を作るために属性を
使用rowspanセルスパン多くの行を作るために属性を
使用するid一意のテーブルを定義する属性を

練習で自分自身をテストします！

演習1» 運動2» 運動3» 運動4» 運動5» 運動6»