【プログラミング】CSS でテーブルを作成する方法【ソース付き】

HTML でテーブルを作成する方法はよく本やネットに出ているけど、CSS で作る方法は?

この記事はこんな疑問にお答えします。

本記事の内容
・CSS でテーブルを作成する方法
・コーディング方法
・実際のソース

■CSS でテーブルを作成する方法

「HTML でテーブルを作成する方法って、本やネットで解説しているよね?」
「通常、Webの画面上でテーブルを作成する時は、HTMLで作成するね」
「CSS で作ることもできるのかな?」
「できるよ。CSSでテーブルを作成するとレイアウトをきれいに表示することができるよ」

HTML や CSS を解説している本やネット上で解説しているテーブルは、HTML でtable 要素で作成しています。

いわゆるこういう形のものですね。

HTML



  
      
      Progate
      
  
  
    
data1data2data3

もちろん、この方法でもよいのですが、CSS でもテーブルを作成することができます。

■コーディング方法

CSS でテーブルを作成する場合、HTML上は普通にdiv要素でマークアップしておき、CSS では display:table; と diaplay:cell;で実現します。

テーブル化したい箇所の div要素を display:table; で指定してあげて、中のデータをdisplay:table-cell; で指定します。

すると、HTMLでテーブルにした場合と同じように、横並びの表が作成されます。

その方法を使って、CSS でレイアウトするとこのようなものができます。

■実際のソース

CSS でテーブルを作成した場合のソースはこちらです。

まず、HTMLです。

HTML



  
      
      Progate
      
  
  
    
data1
data2
data3

次に、CSSです。

CSS
.table{
  display:table;
  width:155px;
  border:1px solid black;
  border-collapse:separate;
  border-spacing:3px 3px;
}

.data {
  display:table-cell;
  border:0.5px solid black;
}

完全に表形式でテーブルにしたい場合は、HTMLでテーブルにした方が良いと思います。

CSS でテーブル化するのは、画像などを横並びにしてきれいに表示したい場合が
良いと思います。

どちらも同じように表示することは可能と思いますが、上手く使い分けができるようになりましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です