Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
このツールが役に立ったら、開発者にコーヒーを奢ってください ☕
ドラッグ＆ドロップでHTMLテーブルを作成。セル結合やスタイル設定に対応し、コードをワンクリックでコピーできます。
{row}と{col}のプレースホルダーを使用できます。
1～20行/列に対応します。範囲外の値は自動修正されます。
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 |
|---|---|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 1 Cell 4 | Row 1 Cell 5 |
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 | Row 2 Cell 4 | Row 2 Cell 5 |
| Row 3 Cell 1 | Row 3 Cell 2 | Row 3 Cell 3 | Row 3 Cell 4 | Row 3 Cell 5 |
| Row 4 Cell 1 | Row 4 Cell 2 | Row 4 Cell 3 | Row 4 Cell 4 | Row 4 Cell 5 |
| Row 5 Cell 1 | Row 5 Cell 2 | Row 5 Cell 3 | Row 5 Cell 4 | Row 5 Cell 5 |
| Row 6 Cell 1 | Row 6 Cell 2 | Row 6 Cell 3 | Row 6 Cell 4 | Row 6 Cell 5 |
「表で情報を見せたいけれど、HTMLを書くのは面倒」というときに便利なツールです。特に次のような場面で役立ちます。
HTMLテーブル生成ツールを開くと、左側に編集キャンバス、右側にコードプレビューが表示されます。操作は「行・列」「内容」「スタイル」「コード」の4ステップです。
行数や列数を誤って変更した場合は、「元に戻す」ボタンを使えます。「テーブルをクリア」で一括リセットも可能です。
個人サイトに掲載する時間割を作ってみましょう。ここでは、1行目を曜日の見出し、1列目を時間帯にした5行6列の時間割を作成します。
手順：
時間/曜日
8:00-9:30
高等数学
大学英語
体育
コンピューター基礎
自習
...(以降の行も同様)
「コードをコピー」をクリックすれば、このコードをHTMLファイルへそのまま貼り付けられます。ブラウザで開くと、背景色付きの時間割が表示されます。
コードプレビューで生成されるHTMLは標準仕様に沿っており、最新の主要ブラウザでそのまま表示できます。期待どおりの表になっているかは、次のポイントを確認してください。
border="1"またはstyle="border:1px solid ..."があれば、表には枠線が表示されます。枠線がない場合は、ツールバーで枠線の太さを設定したか確認してください。colspan="数字"またはrowspan="数字"がコードに追加されます。数字が大きいほど、結合する列数または行数が多いことを示します。結合後にセルがずれる場合は、選択範囲を確認してキャンバス上で結合し直してください。<table>の断片であり、<html>や<body>などは含まれません。既存HTMLページの<body>内に配置してください。width:100%）となり、親要素の幅に合わせて表示されます。幅をピクセルで固定した場合、異なる幅のページではレイアウトが崩れることがあるため、必要に応じて調整してください。<td>または<th>にwidth属性を追加してください。Q：行や列を追加・削除するには？
ツールバーの「行数」「列数」を変更してから「テーブルを生成」をクリックしてください。表は作り直されるため、既存の内容は失われます。一部の内容を残したい場合は、先にコードをコピーしてから新しい表へデータを貼り付けることをおすすめします。
Q：結合したセルを元に戻すには？
結合済みのセルを選択し、「セルを分割」ボタン（ツールバーにある場合）をクリックすると戻せます。分割ボタンがない場合は、表をクリアして作り直すか、コードをコピーしてcolspan/rowspan属性を手動で削除してください。
Q：生成したコードをWordで使えますか？
WordはHTML形式の貼り付けに対応していますが、スタイルが失われる場合があります。オンライン表作成ツールでコードを生成し、まずWebページで表示を確認してからスクリーンショットやPDFとしてWord文書に使用する方法がおすすめです。
Q：スマートフォンで表が崩れませんか？
生成される表の幅は初期設定で100%のため、画面幅に応じて調整されます。ただし、列数が多い場合や内容が長い場合は、小さな画面で横スクロールが必要になることがあります。表の外側にoverflow-x:autoを指定したコンテナーを追加してください。この指定は生成コードには含まれないため、手動でラップする必要があります。
上のテーブル生成ツールで、必要な行と列を作成し、データを入力してコードをコピーしてみましょう。見やすいHTMLテーブルを、どのWebページにもすぐ追加できます。