表の行を定義するtr要素
<tr>……</tr>
trは「table row」の略で、表の行を定義する際に使います。table要素の直接の子要素として存在できます。td要素、もしくはth要素を1つ以上内包する必要があります。
例
| 野菜 | 値段 | 産地 |
|---|---|---|
| 野菜 | 値段 | 産地 |
| キャベツ | 100円 | 長野 |
| 長ネギ | 50円 | 埼玉 |
<html>
<head>
<title>tr要素のサンプル</title>
</head>
<body>
<table>
<thead>
<tr>
<th>野菜</th><th>値段</th><th>産地</th>
</tr>
</thead>
<tfoot>
<tr>
<th>野菜</th><th>値段</th><th>産地</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>キャベツ</td><td>100円</td><td>長野</td>
</tr>
<tr>
<td>長ネギ</td><td>50円</td><td>埼玉</td>
</tr>
</tbody>
</table>
</body>
</html>
DOMでの参照方法
[window.]document.getElementById("【ID属性値名】")
オプション属性
| 属性 | 値 | 機能 | 入力例 | DOM参照 |
|---|---|---|---|---|
| align (非推奨属性) |
"left""center" "right" "justify" "char" |
水平方向の 整列方法を 指定 |
<tr align="center">……</tr> |
[window.]document.getElementById("【ID属性値名】").align |
| bgcolor (非推奨属性) |
頭に「#」を 付けた16進数値 か、あらかじめ 定義されている 色名を指定 |
背景色を 指定 |
<tr bgcolor="red">……</tr> |
[window.]document.getElementById("【ID属性値名】").bgColor |
| char | テキスト | align属性の 値で"char"を 指定した際に 、そろえる軸 となる文字 を指定 |
<tr align="char" char=".">……</tr> |
− |
| charoff | ピクセル値、 または%値 |
char属性 で指定した、 そろえる軸 となる文字 までの距離 を指定 |
<tr align="char" char="." charoff="2">……</tr> |
− |
| valign | "top" "middle" "bottom" "baseline" |
垂直方向の 位置を指定 |
<tr valign="middle">……</tr> |
[window.]document.getElementById("【ID属性値名】").vAlign |
追加が可能なイベントハンドラ属性
onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup
有限会社タグパンダ
喜安 亮介
| 7/11 |
| INDEX | ||
| Web標準HTMLタグリファレンス(4) アクセシビリティも考慮して表組みするための10のタグ テーブル |
||
| table 表(テーブル)を定義するtable要素 | ||
| caption 表題を定義するcaption要素 | ||
| thead 表のヘッダ部分を定義するthead要素 | ||
| tfoot 表のフッタ部分を定義するtfoot要素 | ||
| tbody 表のメイン部分を表すtbody要素 | ||
| tr 表の行を定義するtr要素 | ||
| td 表内の最小単位の枠(セル)を表すtd要素 | ||
| th td要素に見出しの意味合いを付加するth要素 | ||
| colgroup 表の列を構造的にグループ分けするcolgroup要素 | ||
| col 列のスタイルをまとめて調節するcol要素 | ||
TechTargetジャパン
リッチクライアント & 帳票 フォーラム 新着記事
- 次のモバイルアプリはどのフレームワークで作る? (2012/5/24)
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する - 「LESS&専用エディター」でCSSをシンプルに書こう (2012/5/23)
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう - 学校が世界一のデジタル環境になったら (2012/5/18)
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない - 1000万ドル調達も夢じゃないクラウドファウンディング (2012/5/15)
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ
|
|
@IT 新着記事
キャリアアップ
スポンサーからのお知らせ
- - PR -
イベントカレンダー
お勧め求人情報
転職/派遣情報を探す
**先週の人気講座ランキング**
〜 Android編 〜
ホワイトペーパー(TechTargetジャパン)
ソリューションFLASH
