CSS テーブル・表 デザインテンプレート 3選

WEBサイトの会社概要、商品仕様などでよく使われるデザインのサンプルとHTML&CSSを紹介します。

特徴

  • tableタグ使用
  • レスポンシブ対応

見やすい表にするために

  • 文章が多いサイトでは縦に罫線はいれない
  • 横で比較、見比べられるようにする

シンプル

見出しに背景と太字を加えたどんな用途にも使いやすいシンプルなテーブル。

See the Pen
css-table03
by Aquarium (@aquarium)
on CodePen.

HTML&CSS

See the Pen
css-table03
by Aquarium (@aquarium)
on CodePen.

シンプル&ボーダー

See the Pen
css-table01
by Aquarium (@aquarium)
on CodePen.

HTML&CSS

See the Pen
css-table01
by Aquarium (@aquarium)
on CodePen.

シンプル&カラーボーダー

See the Pen
css-table02
by Aquarium (@aquarium)
on CodePen.

HTML&CSS

See the Pen
css-table02
by Aquarium (@aquarium)
on CodePen.

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note