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にログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
iPhone 3G セキュリティ Firefox 3 Ajax ブラウザ Windows モバイル Off Topic Windows 7 アプリケーション オープンソース Tips クラウド JavaScript UI マイクロソフト WebKit Windows Vista iPod touch 開発環境 脆弱性 Webデザイン Database Mac OS X プログラミング言語 小技 仮想化 Safari データベース Chrome OS RIA Google Opera Microsoft Webサービス CSS Java Firefox リファレンス Windows XP Internet Explorer Linux Mozilla HTML iPhone インストール Flash ソフトウェア開発 Apple
  • 話題のタグを見る »