表を追加する

表を追加すると、２行２列の表が表示されます。行や列はあとから追加や削除ができます。

文字を入力する

表のマス目（セル）をクリックするとカーソルが表示されますので、そこで文字を入力できます。

作品サイト名、あるいはページタイトル

ガイド作成の時点では仮の名前を入力あるいはブランクにしています。ここには「サイト名の編集」で指定した名前を入力する予定です。表作成の最終段階で、それぞれのサイトを表示して、ブラウザのタブに表示される名前からサイト名を把握します。把握の仕方は別途記述します。

セル罫線の指定と外周罫線の指定

セル罫線の指定では、セルの外周に１ピクセルの罫線が引かれました。その場合、表の内部でセルが隣り合っているところでは各セルに１ピクセルの罫線を指定しているので、１＋１＝２ピクセルで罫線が表示されることになります。表内部の罫線が、外周の罫線より太く見えるゆえんです。表の外周も同じ太さの罫線にするには、次の項で取り上げる「03C-5 表の外周の罫線を指定する」を行います。

ガイド１：全ての罫線を１pxで揃える方法

ヘッダー編集の箇所にCSSコードを追加し罫線の表示方法を設定します。
『ヘッダー編集』の画面で、「ウェブサイト全体」の入力スペースの中に、以下のコードをコピーして貼り付けます。

<style type="text/css">

/*<![CDATA[*/

 

/*表*/

table{

border-collapse: collapse;

}

 

/*]]>*/

</style>

もしも過去に<style>タグの書き込みをしたことがある場合は、赤字の<style〜の箇所はすでに書き込みスペースの中に存在しているはずです。その場合は、<style type="text/css">/*<![CDATA[*/　から　/*]]>*/</style>　の間に、以下の部分だけを追記してください。

/*表*/

table{

border-collapse: collapse;

}

border-collapse: collapse; とは、（隣り合わせのセルの罫線を間隔０にして接触させるのとは違い）隣合わせのセルの罫線を重ねて表示してくれるCSSコードになります。今回はこれを<style>タグでヘッダー部分に書き込むことにより、サイトで作成する全ての表罫線がバラバラにならないようコントロールしています。特定の表だけに適用するには、「HTML を編集」で <table> タグ内の style 指定で記述することで可能です。

この指定をした場合、設定するのは「セルのプロパティ」の罫線のサイズ箇所を 1px にするだけでOKです。

（「表」のプロパティの罫線サイズは設定しないか、あるいは0（ゼロ）にします）

ガイド２：全ての罫線を１pxで揃える方法

表の罫線は背景色の塗りつぶして対応すると、きれいに表示できる。
表とセルのプロパティには、それぞれ［罫線のサイズ］［罫線の色］という項目があり、これを利用して罫線を引いたのが、上で紹介したもの。この場合、部分的に重なった状態で表示されるので、きれいにならないことがある。そこで、表の余白を広く（[外側の余白：1px]）設定して［背景色の色］で表全体を塗りつぶし、セルを別の色［背景色］で塗りつぶすと、余白の部分が同じ幅（1px）で罫線のようにきれいに表示させることができる。この方法は03C2 表にて紹介します。