1. 表の完成形をイメージする
表の作成を開始する前に、どのような表を掲載したいのかをまず明確にします。その表は何行必要で、また欄構成はどのようなものでしょうか。実際の表作成では後から行を追加することも出来ますが、作成を開始する時点で表の完成形をイメージしておきますと作成が楽になります。
2. 表の作成を開始する
- 表のツールボタンをクリックし表示されるプルダウンメニュー内の「表」をマウスオーバー
- 右側に表示されるマスをドラッグして、希望する「欄」×「行」の構成となるマスをクリック
以上の操作により、エディタ内に表が描かれ、またその表の上には新たなツールボタンが表示されます。
3. 表の幅を設定する
- エディタ内に描かれた表の上部に表示されたツールボタンの一番左側（表の詳細設定）をクリック
- 幅の入力ボックスに「100%」と入力（他は空欄のままでOK、全てを入力する必要はありません）
- 「OK」ボタンをクリック
以上の操作により、エディタ内の表がウインドウ一杯に広がります。
STAGLEE はパソコンやスマホでも閲覧が可能な「レスポンシブ・ウェブデザイン」となっています。表の幅を固定値ではなく「100%」と設定することで、各種デバイスに対応しやすいものとなります。なお「100%」は半角で入力してください。
4. セルの幅を設定する
表を構成する各マスを「セル」と呼びますが、このセル幅を設定します。
- 表の最上部に位置するセルをクリック
- 表のツールボタンをクリックし表示されるプルダウンメニュー内の「セル」をマウスオーバー
- 右側に表示される「セルの詳細設定」をクリック
- 幅の入力ボックスに「30%」と入力（他は空欄のままでOK）
- 「OK」ボタンをクリック
| クリック | |
| (30%) | |
5. セルにテキストを入力
各セルにテキストを入力して表を完成させます。
行を追加したい場合などは、どこかのセルをクリックすることで表示されるツールボタンを利用します。各ボタンをマウスオーバーして表示される説明を見て、必要な操作を加えます。
6. 表にスタイルを加える（上級者向き）
少し難度は高くなりますが、STAGLEE には表の見栄えが良くなる方法のご用意があります。
- エディタの最下部にある「 エディタの切り替え」をクリック
- <table style="width: 100%;"> を見つける
- 以下のクラスを追加（<table class="table table-striped" style="width: 100%;"> のように改変）
上記クラスを追加した場合は、実は「style="width: 100%;"」はウェブページとしては不要となりますが（削除可）、エディタ上ではこれを残しておいた方が見やすくなります。
