HTML5に対応した表の作成方法
表は何らかのデータを比較したり、一覧で表示したり、項目ごとに分けて表示する際に役立ちます。
以前は表自体がホームページの枠組みの役目をしていたのですが、HTML5になり検索エンジンロボットでも分かり易いHTML表記が望まれるようになり、ホームページ内のレイアウト用に表の多用は避けられるようになっています。
私もこの表の枠としての利用を多用していた一人なのですが、レイアウトを決めるうえで簡単に形作ることが出来るため、とても重宝していました。
表の中に表を作成、またその表の中に表を挿入と3重、4重の利用方法でしたので、検索エンジンロボットも理解不能となったことでしょう(笑)。
このような表の利用方法は検索エンジンロボットから評価の低いサイトとしてレッテルを張られ検索結果の表示順位に影響したり、最悪は全く表示されなくなるということもあるようなので気を付けたいと思います。
基本的な表の構造
table要素を使用
以下のタグで構成されています。
<table>
<tr>～</tr> /*表の行を囲む*/
<th>見出しセル</th> /*見出しセル（太字）*/
<td>データセル</td> /*データーセル*/
</table>
見出しセル、データセルを続けて横に記述することで列が作成できます。
見出しセル、データセルを続けて下に記述することで行が作成できます。
3行3列の表で一番上が見出しセルの表
HTML
<table>
<tr><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th></tr>
<tr><td>データセル</td><td>データセル</td><td>データセル</td></tr>
<tr><td>データセル</td><td>データセル</td><td>データセル</td></tr>
</table>
このHTMLにデザインを構成する属性タグを付加して表を装飾していきます。
今までのHTML4.1で作成された表のHTML
HTML
<table cellspacing="0" cellpadding="2" width="100%" border="0" bgcolor="#cccccc" class="hpb-cnt-tb1" id="_HPB_TABLE_1_A_001">
<tbody>
<tr align="left">
<th valign="center" width="20%" class="hpb-cnt-tb-th1">見出しセル</th>
<th valign="center" width="20%" class="hpb-cnt-tb-th1"> </th>
<th valign="center" width="20%" class="hpb-cnt-tb-th1"> </th>
<th valign="center" width="20%" class="hpb-cnt-tb-th1"> </th>
</tr>
<tr>
<td class="hpb-cnt-tb-cell1">データ セル</td>
<td class="hpb-cnt-tb-cell2">データ セル</td>
<td class="hpb-cnt-tb-cell2"> </td>
<td class="hpb-cnt-tb-cell2"> </td>
</tr>
<tr>
<td class="hpb-cnt-tb-cell1"> </td>
<td class="hpb-cnt-tb-cell2"> </td>
<td class="hpb-cnt-tb-cell2"> </td>
<td class="hpb-cnt-tb-cell2"> </td>
</tr>
<tr>
<td class="hpb-cnt-tb-cell1"> </td>
<td class="hpb-cnt-tb-cell2"> </td>
<td class="hpb-cnt-tb-cell2"> </td>
<td class="hpb-cnt-tb-cell2"> </td>
</tr>
</tbody>
</table>
上記のコードでHTML5では廃止された要素の属性を下記の図の赤枠で示しています。この属性をCSSに移し替えていきます。
HTML5で作成された表のHTMLとCSS
既存のスタイルシートstyle.cssに以下のコードを追加します。
CSS
.style_table_00 {
background-color: #ffffff;
border-color: #6666bf #6666bf #6666bf #6666bf;
border-style: solid solid solid solid;
border-width: 1px 0px 0px 1px;
border-top: auto;
border-right: auto;
border-bottom: auto;
border-left: auto;
width: 100%;
}
.style_table_01 {
background-color: #cccccc;
border-color: #6666bf;
border-style: solid;
border-width: 0px;
padding-top: auto;
padding-right: auto;
padding-bottom: auto;
padding-left: 2px;
}
.style_table-th1 {
background-color: #6666bf;
border-color: #6666bf #6666bf #6666bf #6666bf;
border-style: solid solid solid solid;
border-width: auto;
padding-top: auto;
padding-right: auto;
padding-bottom: auto;
padding-left: auto;
width: 20%;
}
.style_table_cl1 {
}
.style_table_cl2 {
color: #666666;
background-color: #eeeeee;
font-size : 95%;
width: 20%;
}
HTML
<table class="style_table_00" id="_HPB_TABLE_1_A_001">
<tbody>
<tr class="style_table_01">
<th class="style_table-th1">見出しセル</th>
<th class="style_table-th1"> </th>
<th class="style_table-th1"> </th>
<th class="style_table-th1"> </th>
</tr>
<tr>
<td class="style_table_cl1">データ セル</td>
<td class="style_table_cl2">データ セル</td>
<td class="style_table_cl2"> </td>
<td class="style_table_cl2"> </td>
</tr>
<tr>
<td class="style_table_cl1"> </td>
<td class="style_table_cl2"> </td>
<td class="style_table_cl2"> </td>
<td class="style_table_cl2"> </td>
</tr>
<tr>
<td class="style_table_cl1"> </td>
<td class="style_table_cl2"> </td>
<td class="style_table_cl2"> </td>
<td class="style_table_cl2"> </td>
</tr>
</tbody>
</table>
上記の表のコードをブラウザで表示してみたのが下記の画像です。
何とか形ができました(笑)。まだまだ満足できないところがあるのですが取り敢えず良しとします。
