タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

tableとcodingに関するU-8のブックマーク (3)

  • table構造を明確にする属性 - Webtech Walker

    summary属性 表の目的と構造に関する要約を記入します。例えば、下記のようなtableだと「製品の価格表」などのtableの簡単な説明だけでなく、「製品の価格表。1行目は各行の見出しになる。1列目が商品名、2列目が価格、3列目が順位を示す。」という感じで表の詳しい構造まで説明するのが吉です。 <table summary="製品の価格表。1行目は各行の見出しになる。1列目が商品名、2列目が価格、3列目が順位を示す。"> scope属性 主にthに指定する属性で、そのセルがどちらの方向に対する見出しであるかを明示することができます。横方向(行)に対する見出しの場合は「scope="row"」を指定します。縦方向(列)に対する見出しの場合は「scope="col"」を指定します <tr> <th scope="col">製品名</th> <th scope="col">値段</th> <t

    table構造を明確にする属性 - Webtech Walker
  • テーブルとアクセシビリティ -- ごく簡単なHTMLの説明

    大きなテーブルは、音声読み上げで内容を聞いているとき、データが何を示す値であるかが混乱してきます。音声ブラウザは、th要素の内容やtd要素のheaders属性を利用して、補助的な情報を読者(聴取者)に伝える機能を持っています(WebSite DesignのVol.3で「音声ブラウザでもまだサポートされていない」と書いてしまいましたが、新しいバージョンはかなり対応が進んできました)。 音声ブラウザとth要素 長い見出し項目の省略形 セルの関係を示す属性 scope属性 headers属性 データの次元と軸 補足:テーブルsummary属性の読み上げ 音声ブラウザとth要素 表(テーブル)は、大量のデータを縦横の二次元に整理することで、視覚的に把握しやすくします。しかし、音声合成でテーブルを読み上げる場合、データは順番に一次元的に読み上げられるため、全体像を把握することが難しくなります。たとえ

  • colgroup / col 要素を活用してみる | WWW WATCH

    table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組み... table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組みが再現できるだけでなく、CSS で見た目をいじるときにも、無駄に class 属性なんかをつける必要もなかったりと、いろいろ良い事あるのになということで、今回はその中から colgroup 要素と col 要素について書いてみることにします。 例えば上記サンプルのような表を作りたいと思ったとき、列方向 (縦方向) のセルに背景色を指定するためだけに class 属性を付けていったりするのは面倒だしスマートじゃない。サンプルのように列方向の各データが構造的にグループ化で

    colgroup / col 要素を活用してみる | WWW WATCH
  • 1