HTML表ジェネレーター

表のマークアップを手で書くのは（すべての<tr>、<th>、<td>に加えてエスケープも）時間がかかり、間違いやすい作業です。CSVや、ExcelやGoogleスプレッドシートからコピーしたセルを貼り付ける（または空の格子から始める）と、<caption>、<thead>、<tbody>、スクリーンリーダーが読み上げられるようにscopeを付けた見出しセル、エスケープ済みのテキスト、右揃えの数値列を備えた、きれいでアクセシブルなHTMLが得られます。<style>ブロックの完成したスタイル、メールマガジン用のインラインスタイル、独自のCSS用のクラス名のみ、から選べます。

使い方

1. CSV、TSV、スプレッドシートのセルを貼り付けるか、ボックスを空にして行数と列数を設定します。
2. 1行目と1列目が見出しかどうかを指定します。
3. キャプションを追加します。
4. スタイル（<style>ブロック、メール用のインラインスタイル、クラスのみ）と見た目を選びます。
5. HTMLをコピーします。

計算式

<table> → <caption> → <thead><tr><th scope="col"> → <tbody><tr><th scope="row"> / <td>

見出しセルにはscope="col"（列見出し）またはscope="row"（各本文行の最初のセル）が付き、データセルを見出しに結び付けて支援技術に伝えます。テキストはエスケープされるため、< や & のような文字もそのまま表示されます。すべてのセルが数値である列（桁区切り、通貨記号、%は可）は、等幅の数字で右揃えになります。インラインモードはすべてのセルにスタイルを書き込み、メールクライアントに必要な形です。

計算例

サンプルの料金データは、キャプション「プランと価格」、見出し行 プラン / 価格 / 容量 / ユーザー数、3つの本文行の表になり、各本文行の最初のセル（無料、チーム、ビジネス）が行見出しです。価格（$0、$12、$29）はすべて数値なので右揃えになり、ユーザー数は「無制限」がテキストなのでそうなりません。縞模様の見た目では、1行おきに色を付ける<style>ブロックが追加されます。