Comparison Tables for Products, Services, and Features
Summary: Use this versatile GUI tool to support users when they need to make a decision that involves considering multiple attributes of a small number of offerings. Consistency in content, scannability, and a simple layout are some of the most important qualities of successful comparison tables. Comparison is one of the most critical activities users perform on the web. In many cases, it’s a nece
The Ultimate Guide to Designing Data Tables
(tables from UI Prep)Data tables vary in size, complexity, content and purpose. Regardless of use-case all well-designed data tables provide clarity on the information presented and help users make insights and take action. This article is a collection of best practices to help you design better data tables in your applications. It’s broken into two sections: Table Style and Table Functionality. L
Design better data tables
Data is useless without the ability to visualize and act on it. The success of future industries will combine advanced data collection with better user experience, and the data table comprises much of this user experience. Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design st
CSSで見出し固定＋レスポンシブ対応の表を作成
2022年4月27日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車
Position Sticky and Table Headers | CSS-Tricks
You can’t position: sticky; a <thead>. Nor a <tr>. But you can sticky a <th>, which means you can make sticky headers inside a regular ol’ <table>. This is tricky stuff, because if you didn’t know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent element like the table header rather than each individual element in a row. The issue boils down to the fact th
アクセシビリティを考慮したちょっと複雑なデータ・テーブルのコーディングについて考える
前回の「アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）」の続きで、今回はもう少し複雑なテーブルについて（の考察を）まとめてみます。具体的に言うと行と列をスパンさせる場合のコーディングのやり方です。そもそも複雑なテーブルはシンプルなものに置き換えるという考えをベースにしつつ、列をスパンさせる場合のcolgroupと、行をスパンさせる場合のrowgroup + tbodyを使ったコーディングのやり方を整理してみました。 それ、本当に役に立つの？ はじめにネタばらし的に書いてしまうと、実は今回紹介するデータ・テーブルの例では、colgroupやrowgroupを使っても使わなくてもVoiceOverでの読み上げに違いがありませんでした。ググると出てくるidとheaders属性を使うやり方も試してみましたが、こちらも読み上げに変わりはありませんでした（idとhea
アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）
先日、ふと「アクセシビリティを考慮したデータ・テーブルのコーディングってどうやるんだっけ？」と、思ったのでやり方をまとめてみます。これまでもセマンティックなコーディングはしていたものの、セマンティックス以外に注意すべき点はあるのか？データ・テーブルはスクリーンリーダーでどのように読まれるのか？が気になったので、調べて整理してみました。 主にWebAIMの「Creating Accessible Tables 」とWAI Web Accessibility Tutorialsの「Table Concepts 」という2つのサイトを参考にさせてもらいました。 ちなみに、データ・テーブルとはデータを表形式で表示する以下のようなテーブルのことを言います。
Designing Tables for Reusability
“If I had an hour to solve a problem I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.” – Unknown It is so tempting to jump straight onto paper or Sketch or Axure and start building. In environments where shipping fast is a constant demand, it’s easy to leap headfirst. And while research and strategy sound like barriers to shipping fast, what if they actually
Design better data tables
Data is useless without the ability to visualize and act on it. The success of future industries will combine advanced data collection with better user experience, and the data table comprises much of this user experience. Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design st
ヘッダーを固定した表のアクセシビリティ - Qiita
この記事は Web Accessibility Advent Calendar 2015 8日目の記事です。 ヘッダーを固定した表のアクセシビリティについて、最近調べる機会があったので、その内容を報告します。 ヘッダーを固定した表とは、表のボディセルだけがスクロールし、ヘッダーはスクロールしない表のことです。 ヘッダーが行の場合はこんな感じ: ヘッダーが列の場合はこんな感じです: まず考えるべきこと 実装にもよるため一概にはいえませんが、ヘッダーを固定した表は往々にしてアクセシビリティを低下させます。 後述するように、アクセシビリティを向上させる方法はありますが、ハックに近く、推奨できる方法ではありません。 まずはヘッダーを固定しない表を使えないか検討してください。 よくある実装とその問題点 ヘッダーを固定した表でよくある実装は、ヘッダーとボディセルをそれぞれ別々のtable要素とする実装
テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ｜BLACKFLAG
レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい
これでよくない？ レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング
レスポンシブテーブルという言葉をご存知でしょうか。テーブル（表組み）に対してレスポンシブデザインを適用する手法のことです。既存のものとは少し違った手法を考案したので記事を書きました。 レスポンシブテーブルは一般的に難易度の高いものとされています。沢山の人がいろいろな方法を考案していますが、どんな表組みにも使える汎用的なレスポンシブテーブルの枠組みはまだ登場していません。第一、表組に入る内容はほんとうに様々なので、汎用化という考え方に限界があることは明白なのです。 いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。この記事で紹介されているものの多くは、CSSのdisplayプロパティの値を上書きすることで表組みからリスト形式に組み替えたり、行と列を逆転してスクロールさせて見られるようにしたりといった、ある種、大道芸を見せられている
スマホ表示のときテーブルに横スクロールバーを表示するCSS
方法1のやり方で、横にはみだしていたテーブルもなめらかにスクロールして見られるようになりました。 でもちょっと問題なのは、スクロールしているときしかスクロールバーが表示されないところ。これだと、スクロールできるかどうかがパッと見でわからないというデメリットがあります。 スマホでも常にスクロールバーが見えている状態にするため、以下のCSSでスクロールバーの表示をカスタマイズしてみました。 詳しい説明は以下のページにおまかせするとして、::-webkit-scrollbar を使ってスクロールバーの見た目を設定すると、スマホでも常にスクロールバーを表示しておくことができます。 【参考】WebKitを使ってスクロールバーをカスタマイズ | CSSPRO 実際にグレーの濃淡でシンプルなデザインのスクロールバー用CSSを作ってみました。 .scroll-box { overflow-x: auto;
Responsive Tables in Pure CSS - LivingSocial's Technology Blog
We recently overhauled our payment statement tables for mobile web in Merchant Center. Our goal was to meet the following requirements: No javascript. You can find all sorts of plugins to but it’s nice to go with a pure CSS solution if at all possible. The text must be localized so no storing plain text in the stylesheets, nullifying Chris Coyer’s recommendation though the end result is built upon
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
Responsive Tables Demo
Code The approach I've presented here assumes you know the index of the columns to be hidden. This probably isn't always appropriate, and isn't all that semantic. Another option is to give the <th> and <td> classes based on importance level and code your CSS accordingly. <table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="nu
スクロールできる表
表をかっこよくスクロール可能にするテクニックについてのResponsive scrollable tablesという記事を読んだ。この記事ではJavaScriptで表をdiv要素で括って、それから溢れたらスクロールバーを表示(+α)という形でやっている。これをいじってて気づいたんだけど、JavaScriptで追加マークアップをする代わりにtable要素のdisplayプロパティーをいじってやると簡単にスクロール可能な表になるようだ。 Demo: Scrollable Table 表を自動幅調整なし(幅固定)にするにはtable-layoutプロパティーを、各セルで折り返しなしにするにはwhite-spaceプロパティーをそれぞれ使う。それとdisplay: blockを組み合わせると、pre要素で文字がはみ出す時にスクロールさせるような感じになる。 table { display: blo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Table Like It's 2023 - HTMHell
So long...
サービス終了のお知らせ