🧰業務効率化
CSSテーブルデザイン作成
スマホ対応の表CSSとHTMLを生成
- ✓ 無料
- ✓ 登録不要
- ✓ ブラウザだけで動作
- ✓ データ送信なし
ファイルや入力内容は、原則としてお使いのブラウザ内で処理されます。
料金表や比較表などのテーブルをプレビューしながら作成できます。入力値はブラウザー内だけで処理し、送信・保存しません。
1. テーブル例を選ぶ
2. 内容と見た目を調整
3. プレビュー
カード表示は、プレビュー領域を狭くすると確認できます。
4. CSSとHTMLをコピー
使うときのポイント
- 表には内容が分かるタイトルを付け、列見出しには
thを使います。 - 列数が多い表は横スクロール、比較項目を縦に読みたい表はカード表示が向いています。
- カード表示用HTMLには、スマホで表示する見出しとして
data-labelを含めています。 - 色だけで重要項目を表さず、太字や記号も併用してください。