HTML_table タグ追記。

「tbody」や「scope」「data-th」が記述してあるが、これはいったい何なのか。

 

thead  tbody  tfoot

<thead><tbody><tfoot>を記載することで、
ヘッダとフッタを固定表示したまま、ボディ部分をスクロールさせることが可能。

 table は ヘッダ・ボディ・フッタに分けられる。
表のヘッダ・ボディ・フッタを定義しておくことで、
正式に対応したブラウザでは、ヘッダとフッタを固定表示したまま
ボディ部分のみをスクロールさせることが可能。

ヘッダとフッタを先読みして表示するために
<thead>と<tfoot>を頭部に記述し、<tbody>をその後ろに記述する。
しかし、ブラウザ対応していないと、フッタをボディより上に表示してしまう。

 

 scope

scope は 非視覚系つまり音声ブラウザなどで役立てられる
見出しを指定
非視覚を考慮しないなら、書かなくとも問題ない。

行に対しての見出しならば、<th scope="row">
列に対しての見出しならば、<th scope="col">

 

colspan と rowspan

セルの結合。td 要素や th 要素に追加する。
colspan="3":水平方向に 3 つ分セルを結合する。列を結合。
rowspan="4":垂直方向に 4 つ分セルを結合する。行を結合。

 

data- ( カスタム属性 )

<要素 data-xxx="value">

HTML5 で新たに追加された仕様。
data- から始まるに任意の属性名を用いて、要素に対して独自の値を
設定することができる。

要素はなんでもOK 。th でも li でも。
JavaScript JQueryCSS から
カスタムデータ属性へアクセスすることができる
つまり、とあるサイトで見かけた「data-th」はカスタム属性だった。

ex)

<table>
<thead>
    <tr>
        <th>果物</th>
        <th>値段</th>
    </tr>
</thead>
<tbod>
    <tr>
        <td data-th="果物">モモ</td>
        <td data-th="値段">4,000</td>
    </tr>
    <tr>
        <td data-th="果物">枇杷</td>
        <td data-th="値段">9,000</td>
    </tr>
</tbody>
</table>

 

 こちらから
http://www.htmq.com/html/tbody.shtml
http://webworkersclip.com/1434/
http://www.tagindex.com/html_tag/table/th_scope.html
http://www.tagindex.com/html_tag/table/td_span.html
http://coding-factory.com/cm/cm88.html
http://dresscording.com/blog/html5/custom_data_attribute.html

 

以上。

---Memo--
行見出しの table

A a a'
B b

b'