アクセシビリティも考慮して表組みするための10のタグ（1/11） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/4/24 XHTMLでページ全体をレイアウトする際に“表”を使っていませんか？ それはCSSでやるべきで、ほかに使いどころは多々あります Webアクセシビリティを考慮した表組みをしよう 今回は“表組み”（テーブル）を表すタグを紹介してきたいと思います。HTMLの表組みは、table要素でマークアップされたブロックで、Excelでよく見る「スプレッドシート」と同じイメージです。tr要素が“行”、th/td要素が“列”を表します。Webアクセシビリティを考慮した表組みをするには、以下に上げる点も踏まえ、きちんとコーディングする必要があります。 table要素にsummary属性を付けて要約を記述 テーブル項目のタイトルは、th要素でマークアップ caption要素により、きちんと表題を付ける theadやtfoot、tbody要素によりテーブル行をグル
[JS]既存のテーブルにソート、ハイライト、分割機能などを追加できるスクリプト
既存のテーブルにソート、ハイライト表示、データ分割、ページネーション機能を追加できる、高性能な超軽量（2.5KB）スクリプトをLeigeberから紹介します。 TinyTable JavaScript Table Sorter demo このスクリプトは、以前紹介した「設置も簡単なテーブルのデータをソートする超軽量のスクリプト」のバージョンアップ版で、主な機能は下記の通りです。 既存のテーブルに簡単に設置が可能。 2.5KBの超軽量スクリプト（他のスクリプトへの依存無し）。 列を交互に自動ハイライト。 選択した行のハイライト。 データの表示件数をコントロール。 分割したデータのページネーションを設置。
CSS-Based Tables: Modern Solutions | Smashing Magazine
Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This article was written back in 2008 when the concept of responsive web design hasn’t been created just yet. You may want to check
tableにおけるmarginの相殺
tableにおけるmarginの相殺 ネタ元：tableのmargin相殺 Firefoxのtableにおけるmargin相殺はちょっとややこしいので補足しておきます。 基本的に垂直方向の2つの要素にtable要素(display:table)が含まれる場合、marginの相殺は行われないです。 p{ margin-bottom:20px; } table{ margin-top:20px; } サンプル table要素にcaption要素が含まれる場合、table要素のmargin-topとcaption要素のmargin-bottomでmarginの相殺が行われます。 p{ margin-bottom:20px; } caption{ margin-bottom:20px; } table{ margin-top:20px; } サンプル Firefox以外のブラウザでは通常のブロック
Scrollable Table with Fixed Header, repeat print header and footer
Scrollable Table with Fixed Header Non-Scrolling Header and Footer; Printing Repeated Headers and Footers This frozen / locked HTML table header is a usability advance done without HTML fakery such as hidden tables, frames, or JavaScript. Tested in (Windows) Mozilla-spawned browsers (incl. Netscape 6+ and Firefox) and IE5+. IE has problems with the screen behavior of the footerbut thanks to a c
テーブルとアクセシビリティ -- ごく簡単なHTMLの説明
大きなテーブルは、音声読み上げで内容を聞いているとき、データが何を示す値であるかが混乱してきます。音声ブラウザは、th要素の内容やtd要素のheaders属性を利用して、補助的な情報を読者（聴取者）に伝える機能を持っています（WebSite DesignのVol.3で「音声ブラウザでもまだサポートされていない」と書いてしまいましたが、新しいバージョンはかなり対応が進んできました）。 音声ブラウザとth要素 長い見出し項目の省略形 セルの関係を示す属性 scope属性 headers属性 データの次元と軸 補足：テーブルsummary属性の読み上げ 音声ブラウザとth要素 表（テーブル）は、大量のデータを縦横の二次元に整理することで、視覚的に把握しやすくします。しかし、音声合成でテーブルを読み上げる場合、データは順番に一次元的に読み上げられるため、全体像を把握することが難しくなります。たとえ
表について
17.1 表概論（Introduction to tables） 表はデータ間の相互関係を表現する。 文書作成者は、構造化言語によってそれらデータ間の関係を指定し、CSSによって視覚表現、音声表現の体裁を指定する。 文書作成者は、セルの矩形格子として表の視覚整形を指定する。 行と列は、複数まとめて行グループ・列グループとして扱える。 行、列、行グループ、列グループ、及びセルには、それぞれの周囲にボーダーを描くことができる（CSS2にはボーダーのモデルが2種類ある）。 また、特定セルのデータの水平・垂直位置を操作したり、ある列・行に属する全セルのデータ位置を揃えることができる。 また、ヘッダやデータを読み上げる方法など、表の音声出力も制御できる。 音声出力でセルより先にヘッダを読み上げるために、構造化言語のセルとグループにはラベルを付けることができる。 その結果データが適切な順序で出力され、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
料金表のデザインいろいろ - DesignWalker