table要素のスタイルを適用します。tableのセルとなる子要素が必要。無ければただのぺったんこのtableなので。td要素のスタイルを適用させるのが最低限必要。指定した子要素のほうには、marginを指定しても無駄。td要素にmarginはあり得ないから。使ってセルの間隔をあけます。table要素、td要素のスタイルが適用できるってオモシロ〜イ。table用のCSSが使えるようになるのね。できるようになること。11行目で、すべてのdivを縦の中央揃え(vertical-align:middle)にし、14行目で真ん中のdivだけ下揃え(vertical-align:bottom)にしています。これは使えます![table用のCSSはちょっと変わってるので要注意]border-spacing(6行目)は「border-collapse:separate」(5行目)を指定しているときだけ有効。(border-spacingのデフォルト値はcollapse。境界線がくっついている。separateで離れる)border-spacingの値が2つのときは「左右」「上下」の順番。marginとかと違うんですね。(値が1つなら上下左右と普通。「縦方向の中央揃え」が可能に!table関連の要素の1番のメリットは、vertical-alignプロパティが適用できることですね。指定すれば簡単に実現できます。それを利用したレイアウトのサンプルを作ってみました。サンプルはコチラです。これは別ブログ「ほんっとにはじめてのHTML5」の、CSSの新しい単位「vh」を使ったレスポンシブレイアウト用に作ったものです。使う方法も試してみましたが、どうもしっくり来ませんでした。使ったら一気に問題解決しました。一覧displayプロパティの値の一覧はこちら。(けっこういっぱいある。inlineインラインレベルのスタイル(これがデフォルト)blockブロックレベルのスタイルlist-itemli要素のスタイル(ブロックレベルで、リスト用のマーカーボックスができる)inline-blockインラインレベルだが、高さ・横幅・margin・paddingなどブロックレベルのスタイル指定が可能tabletable要素のスタイルinline-tableインラインレベルでありながら、table要素のスタイルtable-row-grouptbody要素のスタイルtable-header-groupthead要素のスタイルtable-footer-grouptfoot要素のスタイルtable-rowtr要素のスタイルtable-column-groupcolgroup要素のスタイルtable-columncol要素のスタイルtable-celltd要素のスタイルtable-captioncaption要素のスタイルnone非表示。要素のスペースも無し。その関連のdisplayプロパティの値は、IE8から対応しています。一覧table要素関係のみで使えるCSSプロパティと、その値はこちら。固定レイアウト(1行目を読み込んで各セルの幅を決定して表示を開始=速い)*自動的に均等幅にしてくれるので便利。