zurb foundationのgridレイアウトで表を作成

レスポンシブウェブデザインのcssフレームワークにはグリッドレイアウトを構成するためのcssが記述されている。zurb foundationも効率的にgridレイアウトを作成するために活用できる。

見た目のことだけを考えれば、以下のhtmlで2カラムで左の列がグレー、右側の列が水色のレイアウトを作成できる。

<div class="row">
  <div class="three columns">
    <div class='panel'>

    </div>
  </div>
  <div class="nine columns">
    <div class='panel callout'>

    </div>
  </div>
</div>

非常に簡単にレイアウトを構成できるのが、RWDの売りでスマホ表示もOKである。

htmlをデータ構造化する

上のhtmlだが、見た目上左側の列を狭くしていて、右側の列と色も変えているので、人間には表のように解釈してもらえる。しかし、検索エンジンに対してはどう見えるのだろうか？

検索エンジンに対して表であることを示し、行、列、タイトル、データを認識してもらうには一工夫が必要になってくる。具体的には、htmlタグの

ul li dl dt dd

といったデータ構造を定義する役割を持つhtmlタグを活用する。上のhtmlをデータ構造化した一例は以下のようになる。

echo "<ul>";
	echo "<li>";
		echo "<div class='row'>";
			echo "<div class='three columns text-center'>";
				echo "<div class='panel'>";
					echo "<dl>";
                                                echo "<dt>";

					        echo "</dt>";
                                        echo "</dl>";
				echo "</div>";
			echo "</div>";
			echo "<div class='nine columns'>";
				echo "<div class='panel callout'>";
					echo "<dl>";
                                                echo "<dd>";

						echo "</dd>";
					echo "</dl>";
				echo "</div>";
			echo "</div>";
		echo "</div>";
	echo "</li>";
echo "</ul>";

全体をulで囲ってその中に複数のli(行)を持つhtmlである。見た目はその後のdiv rowで行を表現されている。

dlを分割する

左側の列を見出しとして認識してもらうためにdtで囲む必要がある。dtとddはdlの子要素でdlはそれらの子要素以外は含めることができない。つまり、dl内にdivは記述できない。そのため、各列のdiv内でdlを記述しデータ構造を表現している。

見た目だけでなく構造も表現されたレスポンシブな表を構成することができた。