Firefox 3が対応したdisplayプロパティの値(3) - inline-table

エ・ビスコム・テック・ラボ
2008/05/16 13:11

2回に渡って紹介してきたdisplayプロパティの値「inline-block」。今回は「inline-table」を紹介しよう。

 前々回、前回と、Firefox 3が対応したdisplayプロパティの値「inline-block」を紹介してきた。今回は、Firefox 3が対応したもう1つの値「inline-table」を紹介する。「inline-table」には、SafariやOperaに加えて、Internet Explorer 8(ベータ版)も対応しているので、各ブラウザでの表示も確認していきたい。

テーブル関連のボックス

 HTML/XHTMLではタグでマークアップした部分が四角形のボックスとなる。inline-tableボックスはCSS 2から追加されたテーブル関連のボックスの1つだ。テーブル関連では次の10種類のボックスが用意されている。

テーブル関連のボックス
ボックスの種類特徴関連タグ
tableブロックボックスとしてテーブルを構成する<table>
inline-tableインラインボックスとしてテーブルを構成する<table>
table-row行を構成<tr>
table-cellセルを構成<td>, <th>
table-row-group行のグループを構成<tbody>
table-header-groupヘッダー行のグループを構成<thead>
table-footer-groupフッター行のグループを構成<tfoot>
table-column列を構成<col>
table-column-group列のグループを構成<colgroup>
table-captionキャプションを構成<caption>

 基本的なテーブルはHTML/XHTMLの<table>、<tr>、<td>タグを使用して作成する。このとき、<table>はテーブルを構成するtableボックス、<tr>は行を構成するtable-rowボックス、<td>はセルを構成するtable-cellボックスとなり、ボックスの組み合わせでテーブルの形が作成される。

テーブルを構成するボックス テーブルを構成するボックス
<table>
<tr>
<td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
</tr>

<tr>
<td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
</tr>

<tr>
<td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
</tr>
</table>

tableボックスとinline-tableボックス

記事の感想やご意見をコメントでお寄せください(CNET_IDログインが必要です)
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 読者投票
    今、使っているマシンのOSは?

    投票受付期間:2008年6月27日 〜 2008年7月11日
  • » 投票しないで結果だけ見る