ブログで簡単に表を作る方法
ブログで表を作るにはどうしたらいいかなーと考えていたんですが、いいサイトを見つ
けたので紹介します。
結構有名なサイトらしいです。
一応簡単に表の作り方も説明しますね！
ちょっと雑ですがおまけもあります。
はじめに
『HTML Tables』を選択します。
『Table▼』の『Set size▶』で表のサイズ変更が可能です。
黒枠は現在の表になっています。
青色の範囲を広げ、クリックするとサイズを大きくでき、逆に範囲を狭めるとサイズを
小さく出来ます。
また、下の『5×6』の部分の数字を変えればサイズ変更が可能です。
表の作り方
セルをダブルクリックすると文字の入力が出来ます。
ドラッグすると複数のセルが選択出来ます。
数字の上の白い枠をクリックするとセル全体
数字は行、アルファベットは列の選択が可能
Excelみたいな感じですね。
表を作ってみました。
表を大きくするには？
『Table▼』の『Cell spacing▶』で上下左右のマス目のスペースを調整できます。
色を付ける
これだけだと少し寂しいので色を付けます。
今回は簡単に出来る方法でやってみます。
右側にある『Theme』を使います。
クリックすると下の画像のように出てくるので、好きな色、線を選びます。
1列目に色がついてない場合があります。
右下の『Preview』で確認して色が付いていなかったら、背景の色から色を選択してください。
背景の色はここから選べます↑
この設定で『Copy to clipboard』からコピーし、HTMLに貼り付けると以下のような表
が出てくると思います。
| 商品名 | 単価 | 数量 | 合計 |
|---|---|---|---|
| 鉛筆 | 60 | 5 | 300 |
| 消しゴム | 100 | 2 | 200 |
中央に設置したい場合は、『Center table horizontally』にチェックを入れてください。
追記：表の手直しをした際は『Generate（表の真下）』をクリックしてください。
おまけ
行・列の追加
セル上で右クリックし、Rowを選択
adoveは上、belowは下に1行追加
Remove row(s)は選択しているセルの行を消す
Columnは左右に1列増やす
Remove column(s)は選択している列を消す
表の中を消したい場合は、Table▼の『Clear table』を使えば消すことが出来ます。
左側がセルの結合、右側がセルの分割になっています。
終わり。
