HTMLテーブルの例
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
HTMLテーブルを定義する
HTMLテーブルは<table> タグで定義されます。
各テーブル行は<tr> タグで定義されます.
テーブルヘッダは<th> タグで定義されます。デフォルトでは、表の見出しは太字で中央揃えです。テーブルデータ/セルは
<td> タグで定義されます。
例文
<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
ノート: <td> 要素がテーブルのデータコンテナです。
それらはあらゆる種類のHTML要素を含むことができます。テキスト、画像、リスト、その他の表など
HTMLテーブル – 枠線を追加する
テーブルの枠線を指定しないと、枠線なしで表示されます。
枠はCSS border プロパティを使用して設定されます。:
例文
table, th, td
{
border: 1px solid black;
}
テーブルセルとテーブルセルの両方に境界線を定義することを忘れないでください。
HTMLテーブル – 折りたたみ罫線
枠線を1つの枠線に折りたたむ場合は、CSS プロパティを追加します。
:
例文
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTMLテーブル – セルのパディングを追加する
セルパディングは、セルコンテンツとその境界線の間のスペースを指定します。
パディングを指定しないと、テーブルセルはパディングなしで表示されます。
パディングを設定するには、CSS padding ロパティを使用します。:
例文
th, td {
padding: 15px;
}
HTMLテーブル – 左揃えの見出し
デフォルトでは、表の見出しは太字で中央揃えです。
テーブルの見出しを左揃えにするには、CSS text-align プロパティを使用します。:
例文
th {
text-align: left;
}
HTMLテーブル – ボーダースペースの追加
境界線の間隔は、セル間の間隔を指定します
テーブルの境界線の間隔を設定するには CSS border-spacing プロパティを使用します:
例文
table {
border-spacing: 5px;
}
ノート: テーブルの枠線が折りたたまれている場合, border-spacing 効果はありません
HTMLテーブル – 多数の列にわたるセル
セルを複数の列にまたがるようにするには colspan 属性を使用します:
例文
<table style=”width:100%”>
<tr>
<th>Name</th>
<th colspan=”2″>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTMLテーブル – 多数の行にわたるセル
セルを複数行にまたがるようにするには、次のrowspan 属性を使用します:
例文
<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</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>Age</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つのテーブルを一意に定義する
HTML テーブルタグ
| Tag | 説明 |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
さらにタグについてもっと知るには HTML Tag 辞典を参照して下さい