cman.jpWEBページ作成
広告
<td> 「表のデータセル」[読み方：ティディ]
広告
<td> の属性
【構文】
<table>
<caption>～表題～</caption>
～
<thead>
<tr><th id="h1">～見出し～</th></tr>
</thead>
<tbody>
<tr><th;>～小見出し～</th></tr>
<tr><td headers="h1">～内容～</td></tr>
</tbody>
<tfoot>
<tr><td>～フッタ内容～</td></tr>
</tfoot>
～
</table>
<caption>～表題～</caption>
～
<thead>
<tr><th id="h1">～見出し～</th></tr>
</thead>
<tbody>
<tr><th;>～小見出し～</th></tr>
<tr><td headers="h1">～内容～</td></tr>
</tbody>
<tfoot>
<tr><td>～フッタ内容～</td></tr>
</tfoot>
～
</table>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| colspan="値" | セルが跨ぐ列数を指定 | 1以上の整数のみ指定可 |
| rowspan="値" | セルが跨ぐ行数を指定 | 0以上の整数のみ指定可 （0指定は当該セルの行グループの最後までの指定） |
| headers="id" | 対応する<th>（見出しセル）のidを指定 | |
| 廃止された属性 | ||
| グローバル属性 |
| |
| イベント属性 |
| |
<td>タグのサンプル
header属性指定のサンプル
<head>
<style type="text/css">
<!--
#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 id="h1">順位</th><th id="h2">氏名</th><th id="h3">国語</th>
<th id="h4">理科</th><th id="h5">社会</th><th id="h6">個人平均</th></tr>
</thead>
<tbody>
<tr><th headers="h1">1位</th><td headers="h2">山田 太郎</td>
<td headers="h3">98</td><td headers="h4">62</td><td headers="h5">87</td>
<td headers="h6">82</td></tr>
<tr><th headers="h1">2位</th><td headers="h2">鈴木 花子</td>
<td headers="h3">85</td><td headers="h4">71</td><td headers="h5">58</td>
<td headers="h6">71</td></tr>
<tr><th headers="h1">3位</th><td headers="h2">斉藤 一郎</td>
<td headers="h3">66</td><td headers="h4">65</td><td headers="h5">52</td>
<td headers="h6">61</td></tr>
</tbody>
<tfoot>
<tr><th colspan=2>科目平均</th><td headers="h3">83</td>
<td headers="h4">66</td><td headers="h5">66</td></tr>
<tr><th colspan=5>全平均</th><td>72</td></tr>
</tfoot>
</table>
<style type="text/css">
<!--
#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 id="h1">順位</th><th id="h2">氏名</th><th id="h3">国語</th>
<th id="h4">理科</th><th id="h5">社会</th><th id="h6">個人平均</th></tr>
</thead>
<tbody>
<tr><th headers="h1">1位</th><td headers="h2">山田 太郎</td>
<td headers="h3">98</td><td headers="h4">62</td><td headers="h5">87</td>
<td headers="h6">82</td></tr>
<tr><th headers="h1">2位</th><td headers="h2">鈴木 花子</td>
<td headers="h3">85</td><td headers="h4">71</td><td headers="h5">58</td>
<td headers="h6">71</td></tr>
<tr><th headers="h1">3位</th><td headers="h2">斉藤 一郎</td>
<td headers="h3">66</td><td headers="h4">65</td><td headers="h5">52</td>
<td headers="h6">61</td></tr>
</tbody>
<tfoot>
<tr><th colspan=2>科目平均</th><td headers="h3">83</td>
<td headers="h4">66</td><td headers="h5">66</td></tr>
<tr><th colspan=5>全平均</th><td>72</td></tr>
</tfoot>
</table>
| 順位 | 氏名 | 国語 | 理科 | 社会 | 個人平均 |
|---|---|---|---|---|---|
| 1位 | 山田 太郎 | 98 | 62 | 87 | 82 |
| 2位 | 鈴木 花子 | 85 | 71 | 58 | 71 |
| 3位 | 斉藤 一郎 | 66 | 65 | 52 | 61 |
| 科目平均 | 83 | 66 | 66 | - | |
| 全平均 | 72 | ||||
留意事項
ページTOP| 関連するHTMLタグ | |
|---|---|
| tr | 表の行 |
| 関連するCSS(STYLE) | |
|---|---|
| column-count | マルチカラムのカラムの数 |
| columns | マルチカラムのカラムの数と横幅 |
| column-width | マルチカラムのカラムの横幅 |
| empty-cells | 空セルの表示 |
| text-align | 横（水平）方向の文字位置 |
| vertical-align | 縦（垂直）方向の文字位置 |
広告