tr要素とは
<tr>
要素は、
- 意味・役割
- 表(テーブル)の行を表す要素
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
- コンテンツ・カテゴリ
-
なし
(HTML5より前:なし) - コンテンツ・モデル(梱包できる要素)
-
0個以上の
<th>
要素または、<td>
要素 - この要素を配置できる親要素
-
<table>
要素、<thead>
要素、<tbody>
要素、<tfoot>
要素
tr要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
align属性 XHTML1.1で廃止
属性は、行内のセルに対してテキストの揃え方を指定する属性です。この属性を指定しない場合、一般的なブラウザは<th>
要素を、"center"
<td>
要素を、"left" として表示します。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、<th>
、
<td>
に、CSSの:text-align
プロパティで行うようにしましょう。
<tr align="テキスト揃え方">
- 属性値
-
- "left": 左揃え
- "center": 中央揃え
- "right": 右揃え
- "justify": 両端揃え (均等配置)
- "char":
char
属性で指定した文字で揃える
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
<tr align="center">
valign属性 XHTML1.1で廃止
属性は、<th>
、
<td>
に、CSSの:vertical-align
プロパティで行うようにしましょう。
<tr valign="垂直方向の揃え方">
- 属性値
-
- "top": 上揃え
- "middle": 中央揃え
- "bottom": 下揃え
- "baseline": ベースラインで揃える (1行目のみ)
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
<tr valign="top">
char属性 XHTML1.1で廃止
属性は、align
属性で、"char" を指定した際、テキストを揃える文字を指定する属性です。
基本的には、小数点などを揃える為に使用する為、 "." (ピリオド)を指定します。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSS3の:text-align
プロパティで char
の指定で行うようにしましょう。
<tr char="テキストを揃える文字" align="char">
- 属性値
- テキストを揃える文字
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
<tr char="." align="char">
charoff属性 XHTML1.1で廃止
属性は、char
属性が指定された場合において、その文字の
オフセット (ずらす量)を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。
<tr charoff="オフセットする文字数" char="テキストを揃える文字" align="char">
- 属性値
-
- 整数: 画像の横幅(px)
- パーセンテージ: 画像の割合
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
<tr align="char" char="." charoff="40">
bgcolor属性 XHTML1.1で廃止
属性は、background-color
プロパティで行うようにしましょう。
<tr bgcolor="背景色">
- 属性値
-
- "16進数RGB値"
- "カラーネーム"
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
<tr bgcolor="#330000">
tr要素のサンプル
基本的な表の例
<table>
<tr>
<th>名前</th>
<th>性別</th>
</tr>
<tr>
<td>ボブ</td>
<td>男</td>
</tr>
<tr>
<td>ムカミ</td>
<td>男</td>
</tr>
<tr>
<td>メアリー</td>
<td>女</td>
</tr>
</table>
RERUN
thead要素、tbody要素の中で使う例
<table border="1">
<caption>2017年1月のカレンダー</caption>
<thead>
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
RERUN
仕様
- HTML5.1
- 4.9.8. The tr element
- HTML5
- 4.9.8 The tr element
- HTML4.01
- 11.2.5 Table rows: The TR element