fotodeo

皆が大好きtableタグのお話

個人的にこのテーブルタグをテーブルとして使用しないでレイアウトフレームとして使う、テーブルフレームと呼ばれる使用方法をされる方を多々見受けます。
pタグやhタグよりも使用頻度の高いtableとbrコードのページを見るとゾッとします。

使い方を考える

tableタグは表を作成するタグです。レイアウト用に使用するものではありません。このタグを使えばページ制作の際には分かりやすいのかもしれないです。
表示場所を区分けしやすいので人の見た目には全然問題はないのでしょう。
ですがtableタグを使うと検索エンジンはテーブル要素があると認識するだけで内容はあまり見ないで次のタグを見に行きます。

検索エンジンが認識しない

タイトルが強めですが、再度言いますとtableタグを使うと検索エンジンは表があると認識はしますが、テーブル内の内容にはあまり興味がありません。
という事はSEO的に考えるといくら内容をしっかり書いても検索エンジンがhit順位を下げます。google先生などはコードの綺麗なページ、内容の分かりやすいページ、軽いページ、人気のあるページを上位表示するようになっています。
話しがずれそうになりましたが、用途に沿った使い方をしないともったいないという話です。

テーブルの使い方

tableタグの基本的構造はtable～/tableの間にtr～/trを入れると横一列を作ります。そのtr～/trの中にtd～/tdで縦を仕切るようになりますのでtdを3つ書けば3つの箱が出来るようになります。
ここでtdではなくthタグを使うと太字のセンターリングされたセルになります。
caption～/captionを使うとテーブルにタイトルをつける事が出来ます。このcaptionタグは検索エンジンに何の表なのかを示す事が出来るのでSEO的に有利になります。

<table>
	<caption></caption>
	<tr>
		<th></th>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

まとめ

SEOなんて気にする必要ないと言われると仕方ないですが、使用容量を守ってすっきりしたページにしましょうというのが私の考えで、コード打ちでページを作るので制作側としても分かりやすいので修正なども容易になり変なトラブルも回避できるかと思います。
せっかくなので次回も少しテーブルタグの話、ちょっと難しいかもですがスタイルシートを使って飾る話をしようかと思います。