「テーブル作成ツール」をお探しですか?テーブルジェネレーターは、誰でも簡単にカスタムテーブルを作成・編集・スタイル設定できる無料ツールです。行・列の設定、セルの結合、斜線の追加、ボーダーや背景色の変更など、あらゆるテーブルデザインに対応。さらに、HTML & CSSコードのエクスポート機能も搭載!手軽に美しい表を作成したい方に最適です。
HTMLテーブルを簡単作成!無料ツールの特徴と使い方
テーブルジェネレーターの手順と各種設定はここをクリック
HTMLテーブル作成ツールの基本操作【初心者向け】
- 「行」と「列」の設定方法
- 「Rows」フィールドに生成したいテーブルの行数を入力します(最小1行、最大20行)。
- 「Columns」フィールドに生成したいテーブルの列数を入力します(最小1列、最大20列)。
- テーブルの生成とカスタマイズ
- 「Generate Table」ボタンをクリックして、指定された行と列を持つテーブルを生成します。
カスタマイズ自在!テーブルの行・列・結合・スタイル設定方法
- セルの結合・解除方法(Merge & Unmerge)
- 結合したいセルをクリックして選択します(複数選択可能)。
- 「Merge Cells」ボタンをクリックして、選択したセルを結合します。
- 「Unmerge Cells」ボタンをクリックして、結合を解除します。
- 斜線(Diagonal Line)の追加と削除
- 斜線を追加したいセルを1つ選択します。
- 「Add Diagonal Line」ボタンをクリックして、選択したセルに斜線を追加します。
- 「Remove Diagonal Line」ボタンをクリックして、斜線を解除します。
- ボーダー・背景色・文字色の変更方法
- Border Style: ボーダーのスタイルを選択します(Solid, Dashed, Double, Thick)。
- Border Width: ボーダーの幅を指定します(1~10)。
- Border Color: ボーダーの色を指定します。
- Background Color: セルの背景色を指定します。
- Text Color: 文字の色を指定します。
- Cell Height: セルの高さをピクセル単位で指定します(20~200)。
- Stripe & Highlight Color: ストライプおよびハイライトの色を指定します。
- Stripe Direction: ストライプの方向を選択します(None, Rows, Columns)。
- Highlight First Row: 最初の行をハイライトします。
- Highlight First Column: 最初の列をハイライトします。
- Enable Horizontal Scrollbar: 横スクロールバーを有効にします。
- スタイルの適用
- 「Apply Styles」ボタンをクリックして、上記のスタイル設定をテーブルに適用します。
- 設定のクリア
- 「Clear Settings」ボタンをクリックして、すべての設定を初期化し、テーブルをクリアします。
- HTML & CSSのエクスポート
- 「Export HTML & CSS」ボタンをクリックして、生成したテーブルのHTMLおよびCSSコードをクリップボードにコピーします。
入力モードと選択モードの説明
- 入力モード: セルをクリックすると、そのセルにテキストを入力できます。結合やスタイルの変更はできません。
- 選択モード: セルをクリックして選択し、結合、斜線の追加、スタイル変更ができます。結合や斜線の追加、選択モードでのみ可能です。
結合および解除の条件
- 結合: 複数のセルを選択している場合に結合が可能です。選択モードでセルを選択し、「Merge Cells」ボタンをクリックします。
- 解除: 結合されたセルをクリックして選択し、「Unmerge Cells」ボタンをクリックします。
- 斜線の追加: 1つのセルを選択している場合に追加が可能です。「Add Diagonal Line」ボタンをクリックします。
- 斜線の解除: 斜線が追加されたセルを選択している場合に解除が可能です。「Remove Diagonal Line」ボタンをクリックします。
このテーブルジェネレーターは、初心者でも簡単にカスタムテーブルを作成できるように設計されています。各機能を利用して、目的に合ったテーブルを作成してください。
ブログ・Web制作に最適なHTMLテーブルのデザイン例
サンプル | これはサンプルです | これはサンプルです | これはサンプルです | これはサンプルです |
サンプル | これはサンプルです | これはサンプルです | これはサンプルです | これはサンプルです |
サンプル | これはサンプルです | これはサンプルです | これはサンプルです | これはサンプルです |
サンプル | これはサンプルです | これはサンプルです | これはサンプルです | これはサンプルです |
サンプル | これはサンプルです | これはサンプルです | これはサンプルです | これはサンプルです |
<div class="table-wrap" style="overflow-x: scroll;"><table class="custom-table" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0);"><tbody><tr><td data-row="0" data-col="0" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px; font-weight: bold; background-color: rgb(0, 255, 136);">サンプル</td><td data-row="0" data-col="1" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;">これはサンプルです</td><td data-row="0" data-col="2" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;">これはサンプルです</td><td data-row="0" data-col="3" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;"><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td><td data-row="0" data-col="4" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td></tr><tr><td data-row="1" data-col="0" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px; font-weight: bold; background-color: rgb(0, 255, 136);"><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">サンプル</span></td><td data-row="1" data-col="1" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;">これはサンプルです</td><td data-row="1" data-col="2" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td><td data-row="1" data-col="3" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td><td data-row="1" data-col="4" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td></tr><tr><td data-row="2" data-col="0" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px; font-weight: bold; background-color: rgb(0, 255, 136);"><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">サンプル</span></td><td data-row="2" data-col="1" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;">これはサンプルです</td><td data-row="2" data-col="2" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td><td data-row="2" data-col="3" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td><td data-row="2" data-col="4" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td></tr><tr><td data-row="3" data-col="0" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px; font-weight: bold; background-color: rgb(0, 255, 136);"><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">サンプル</span></td><td data-row="3" data-col="1" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;">これはサンプルです</td><td data-row="3" data-col="2" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td><td data-row="3" data-col="3" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td><td data-row="3" data-col="4" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td></tr><tr><td data-row="4" data-col="0" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px; font-weight: bold; background-color: rgb(0, 255, 136);"><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">サンプル</span></td><td data-row="4" data-col="1" class="" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;">これはサンプルです</td><td data-row="4" data-col="2" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td><td data-row="4" data-col="3" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td><td data-row="4" data-col="4" style="border: 2px solid rgb(0, 0, 0); color: rgb(0, 0, 0); height: 40px; box-sizing: border-box; min-width: 100px; width: auto; white-space: nowrap; padding: 8px;" class=""><span style="font-family: "Noto Sans JP", sans-serif; font-size: 17px;">これはサンプルです</span></td></tr></tbody></table></div>
<style>
.custom-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
position: relative;
}
.custom-table td {
border: 2px solid #000;
padding: 8px;
text-align: left;
min-width: 100px;
min-height: 20px;
box-sizing: border-box;
white-space: nowrap;
}
.table-wrap {
overflow-x: scroll;
max-width: 100%;
border: 1px solid #ccc;
}
</style>
カスタムテーブルを簡単に作成できるテーブル生成ツールです。ビジネスデータの管理には、金額変換ツールとの併用がおすすめです。
コメント