display: table – CSSレイアウトプロパティ

2026年6月4日

CSSのdisplay: tableプロパティは、ボックスをテーブル風に配置するためのもので、ウェブページの表やレイアウトデザインにおける役割が大きい。1990年代後半から利用可能となり、今も現行仕様であるCSS Level 3で広く使用されている。

この記事の目次

display: tableは、CSSでHTML要素を表やテーブルのように配置するためのプロパティ。このプロパティを使用すると、通常のブロックレベル要素が列に並んだり、インラインレベル要素が行のように横一列になります。

例えば、ulとliタグを使って水平リストを作成したい場合、display: tableとdisplay: table-cellを組み合わせることで容易に実現できます。この方法は、従来のfloatやinline-blockよりもレイアウトの制御が簡単になるケースが多い

display: tableは、CSSが誕生した当初から存在し、初期のCSS仕様書であるCSS1で定義されました。このプロパティは、HTMLテーブルタグによるレイアウトに頼らず、より柔軟なスタイル設定を可能としました。

その後、CSS2.0ではさらなる機能拡張が行われ、CSS3時代には安定した仕様となりました。現在ではモダンブラウザ全てで対応し、フローティングやブロック要素を使ったレイアウトの代替手段として重宝されています

display: tableと他のCSSプロパティの主な違いは、レイアウトの柔軟さにあります。例えばfloatを使用すると要素を横に並べることができますが、その長さは固定されがちです。

対してdisplay: tableを使うことで、ブロックレベルで行や列を作成でき、各項目の幅はコンテンツに応じて自動的に変化します。これは特にレスポンシブデザインにおいて重要な要素となります

display: tableは、ウェブページ上の様々な部分で活用できます。テーブル構造を必要とする箇所だけでなく、水平な一覧表示やナビゲーションの作成にも大いに貢献します。

例えば、ナビゲーションメニューを作成する際、display: tableとtable-cellを組み合わせると、リンクが均等な幅で横並びになるため視覚的な統一感が生まれます。また、ウィジェットの横並べなどにも適用可能

display: tableはテーブル形式以外でも柔軟なレイアウトを実現する有力な手段であり、その高度化とともにウェブデザインに新たな可能性をもたらしています。今後も進化し続けるCSSにおいて重要な役割を果たすことは間違いないでしょう

※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。

Post Views: 2

よかったらシェアしてね！