Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2019_09_26_LT_TableMarkup_vs_ListMarkup
Search
Hiroki FUJIMOTO
September 26, 2019
Programming
0
830
2019_09_26_LT_TableMarkup_vs_ListMarkup
Hiroki FUJIMOTO
September 26, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
PicoRuby on Rails
makicamel
2
110
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
580
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
330
ReadMoreTextView
fornewid
1
490
NPOでのDevinの活用
codeforeveryone
0
470
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
120
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
280
20250613-SSKMvol.15
diostray
0
100
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
640
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
A Tale of Four Properties
chriscoyier
160
23k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
A designer walks into a library…
pauljervisheath
207
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
KATA
mclloyd
30
14k
Six Lessons from altMBA
skipperchong
28
3.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Docker and Python
trallard
44
3.4k
Transcript
ぼくがマークアップする上で いつも悩んでしまうことについて聞いてほしい 株式会社VALU 藤本大貴
よくあるこういうやつがこわい Chatwork : https://go.chatwork.com/ja/price/?click=header-navi
表っぽいデザインってどういうマークアップが理想?
最初に思いつくのは, テーブル構造 <table></table> tapple : https://tapple.me/policies/pricing/
// 表題部分を // theadに記述する // (ただ調査した感じ // <thead>使ってない人少なかった) <thead>
<tr> <th></th> </tr> </thead> // 表の内容を // tbodyに記述する <tbody> <tr> <td></td> </tr> </tbody>
- HTMLだけで表が作れる - HTMLとCSSの分担が明快 - head要素とbody要素で 分かれているので読みやすい (
htmlタグに明確な意味付けす ることが可能 ) - row要素は拡張性しやすい - 記述量が増えてしまう - <td>?<thead>?<th>? ってなる - テーブルでないと使えないテ クニック - column要素は拡張しにくい
リストとかでがんばる <ul><li></li></ul> GitHub : https://github.co.jp/pricing
<div>という箱を作って中にリストを 置くパターン 外側の”container”に, display: flex; を当てて,横に並べて比較する!
テーブルっぽくすることも可能!
- リストだけで全部できちゃうか ら楽 - CSSもFlexboxだけ使えばい いから楽 - column要素は拡張性しやす
い - CSSの記述量は増える - 変更しづらい - HTMLに明確な意味づけがで きない - row要素は拡張しにくい -> 鬼の入れ子構造になる可能 性がある
他 STORES : https://stores.jp/functions
他 Notion : https://www.notion.so/pricing
もう悩みたくないので,採用率を調査してみました
サブスクリプションモデルを採用するスタートアップを 中心に37社分の採用率を調査しました
tableを使っているサイトは多かったが, テーブルの見た目は減りつつあることがわかった 結論,僕はまるっと消したりすることもできるので, 1column毎にlist使って作ってくっつける方がいいと思う
可愛かったPricingページ VALUっぽい prott : https://prottapp.com/ja/plans/
可愛かったPricingページ marvel : https://marvelapp.com/pricing
ありがとうございました!