アクセシブルなHTMLテーブル作成ツール
HTMLテーブル作成ツール
アクセシブルなHTMLテーブル作成：キャプション付きでCSVを変換 | We.Inc
CSVを貼り付けるか、料金表や営業時間のテンプレートから開始。キャプション、見出しセル、scope属性を備え、安全にエスケープされたHTML表と、コピーできるレスポンシブCSSを作成します。
スプレッドシートやCSVの行を貼り付けるか、サービス料金表や営業時間のテンプレートから始めます。キャプション、見出しセル、スクリーンリーダーが使うscope属性を備えたHTML表と、スマートフォンでも読みやすく表示する短いCSSを作成します。値はすべてエスケープされるため、貼り付けたテキストがページを壊すことはありません。すべてブラウザー内で動作し、入力内容はWe.Incや他の誰にも送信されず、タブを閉じると消去されます。
- テンプレートを選ぶか、独自の行を貼り付けます。カンマ、タブ（スプレッドシートからコピーした場合）、セミコロンに対応し、引用符で囲まれたカンマ入りの値も1つの項目として扱います。
- 1行目を列見出しにするか、1列目を各行の見出しにするか選びます。見出しはscope属性付きのthセルになります。
- キャプションを入力します。スクリーンリーダー利用者向けに表の名前を示し、誰にとっても表の上に表示されます。
- スタイルを選び、デスクトップとスマートフォンの幅でプレビューします。狭い画面では表を押しつぶさず、専用の枠内で横スクロールできます。
- HTMLとCSSをコピーするか、1つのファイルとしてダウンロードします。
- 価格や営業時間のような行列データにだけ表を使いましょう。ページのレイアウトにはCSSを使います。
- 見出しは短くしましょう。スクリーンリーダーの読み上げで繰り返し使われます。
- 単位はすべてのセルではなく、見出し（価格、USDなど）に入れましょう。
- 必要がない限りセルを結合しないでください。結合セルはスクリーンリーダーで理解しにくくなります。
- スマートフォンの幅で表を確認してください。横スワイプが何度も必要なら、表を分けることを検討しましょう。
よくある質問
アクセシブルなHTMLテーブルに必要なものは？
表の名前を示すキャプション、列や行の見出しを示すthセル、見出しが列と行のどちらに対応するか示すscope属性です。スクリーンリーダーはこれらを使って、値に対応する見出しを読み上げます。このツールは3つすべてを追加します。
divで表を作らないのはなぜですか？
divのグリッドでも表のように見せられますが、支援技術には各セルと見出しの関係が伝わりません。本物のtable要素なら、その意味を追加設定なしで伝えられます。
レスポンシブ表示では表をどう扱いますか？
表を狭い画面で横スクロールできる枠に入れます。枠はキーボードでフォーカスでき、キャプションでラベル付けされるため、キーボード利用者もスクロールできます。
入力データはエスケープされますか？
はい。セル内のアンパサンド、不等号、引用符はHTMLエンティティに変換されます。そのため、<script>を含むセルも実行されずテキストとして表示されます。
ExcelやGoogleスプレッドシートから直接貼り付けられますか？
はい。コピーしたセルはタブ区切りで貼り付けられ、ツールが自動認識します。
無料で使えますか？
はい。登録不要で、ブラウザー内で動作します。
料金表と営業時間はテーブルで表す
- 小規模事業のサイトには、料金と営業時間という少なくとも2種類の表がよくあります。どちらも行と列で整理するデータなので、サービスごとに料金を、曜日ごとに営業時間を対応付けたテーブルとしてマークアップしましょう。
- 用意されたテンプレートは、この2種類の形式から始められます。公開前に例の行を実際の情報へ置き換えてください。例は仮データであり、実際の価格ではありません。
無料で始める · クレジットカード不要
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る