テーブルジェネレーターの使い方
テーブルジェネレーターは、簡単にカスタムテーブルを作成、編集、およびスタイル設定できるツールです。以下の手順と説明を参考にして、テーブルを生成し、必要な設定を行ってください。
テーブルジェネレーターの手順と各種設定はここをクリック
基本操作
- 行と列の設定
- 「Rows」フィールドに生成したいテーブルの行数を入力します（最小1行、最大20行）。
- 「Columns」フィールドに生成したいテーブルの列数を入力します（最小1列、最大20列）。
- テーブル生成
- 「Generate Table」ボタンをクリックして、指定された行と列を持つテーブルを生成します。
テーブル設定オプション
- セルの結合
- 結合したいセルをクリックして選択します（複数選択可能）。
- 「Merge Cells」ボタンをクリックして、選択したセルを結合します。
- 「Unmerge Cells」ボタンをクリックして、結合を解除します。
- 斜線の追加
- 斜線を追加したいセルを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」ボタンをクリックします。
このテーブルジェネレーターは、初心者でも簡単にカスタムテーブルを作成できるように設計されています。各機能を利用して、目的に合ったテーブルを作成してください。
サンプル
| サンプル | これはサンプルです | これはサンプルです | これはサンプルです | これはサンプルです |
| サンプル | これはサンプルです | これはサンプルです | これはサンプルです | これはサンプルです |
| サンプル | これはサンプルです | これはサンプルです | これはサンプルです | これはサンプルです |
| サンプル | これはサンプルです | これはサンプルです | これはサンプルです | これはサンプルです |
| サンプル | これはサンプルです | これはサンプルです | これはサンプルです | これはサンプルです |
<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>
コメント