cman.jpWEBページ作成
広告
<table> 「表」[読み方：テーブル]
広告
<table> の仕様
<table> の属性
【構文】
<table>
<caption>～表題～</caption>
～
<thead>
<tr><th>～見出し～</th></tr>
</thead>
<tbody>
<tr><td>～内容～</td></tr>
</tbody>
<tfoot>
<tr><td>～フッタ内容～</td></tr>
</tfoot>
～
</table>
<caption>～表題～</caption>
～
<thead>
<tr><th>～見出し～</th></tr>
</thead>
<tbody>
<tr><td>～内容～</td></tr>
</tbody>
<tfoot>
<tr><td>～フッタ内容～</td></tr>
</tfoot>
～
</table>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| border="値" | セルに枠線を引く ※HTML5以降に廃止。指定不可。 | ""、"1"のいずれか |
| sortable="値" | テーブルに対してソートインターフェースを 有効にするく ※HTML5以降に廃止。指定不可。 | - |
| 廃止された属性 | ||
| グローバル属性 |
| |
| イベント属性 |
| |
<table>タグのサンプル
<table>
<caption>秋の中間テスト結果</caption>
<thead>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
</thead>
<tbody>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
<tfoot>
<tr><th>平均</th><td>83</td><td>66</td><td>66</td></tr>
</tfoot>
</table>
<caption>秋の中間テスト結果</caption>
<thead>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
</thead>
<tbody>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
<tfoot>
<tr><th>平均</th><td>83</td><td>66</td><td>66</td></tr>
</tfoot>
</table>
| 氏名 | 国語 | 理科 | 社会 |
|---|---|---|---|
| 山田 太郎 | 98 | 62 | 87 |
| 鈴木 花子 | 85 | 71 | 58 |
| 斉藤 一郎 | 66 | 65 | 52 |
| 平均 | 83 | 66 | 66 |
スタイルシート(CSS)を使用し見た目を変えるサンプル
<head>
<style>
<!--
#css-s1 {background-color: #0066ff;border-spacing: 1px;border: 0px;}
#css-s1 caption {background-color: #0066ff;color: #fff;}
#css-s1 th {background-color: #d0f0ff;text-align: center;padding:3px;}
#css-s1 td {background-color: #fff;text-align: center;padding:3px;}
-->
</style>
</head>
～
<table id="css-s1">
<caption>秋の中間テスト結果</caption>
<thead>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
</thead>
<tbody>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
<tfoot>
<tr><th>平均</th><td>83</td><td>66</td><td>66</td></tr>
</tfoot>
</table>
<style>
<!--
#css-s1 {background-color: #0066ff;border-spacing: 1px;border: 0px;}
#css-s1 caption {background-color: #0066ff;color: #fff;}
#css-s1 th {background-color: #d0f0ff;text-align: center;padding:3px;}
#css-s1 td {background-color: #fff;text-align: center;padding:3px;}
-->
</style>
</head>
～
<table id="css-s1">
<caption>秋の中間テスト結果</caption>
<thead>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
</thead>
<tbody>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
<tfoot>
<tr><th>平均</th><td>83</td><td>66</td><td>66</td></tr>
</tfoot>
</table>
| 氏名 | 国語 | 理科 | 社会 |
|---|---|---|---|
| 山田 太郎 | 98 | 62 | 87 |
| 鈴木 花子 | 85 | 71 | 58 |
| 斉藤 一郎 | 66 | 65 | 52 |
| 平均 | 83 | 66 | 66 |
留意事項
| 関連するCSS(STYLE) | |
|---|---|
| border-collapse | テーブルの罫線の表示方法 |
| border-spacing | テーブルの罫線の間隔 |
| empty-cells | 空セルの表示 |
| table-layout | テーブルの表示方法 |
広告