メインメニュー > Q&A集 > [HowTo] 表の枠線を黒くする方法(スタイルシート編)

Q&A集

Print Prev Next

[HowTo] 表の枠線を黒くする方法(スタイルシート編)

2007年 10月 5日作成

 リッチテキスト・エディタを使って、Web ブラウザで黒い枠線の表を作成する手順について、ご紹介します。
 表の枠線を書く方法はいろいろありますが、以下の方法はスタイルシートの設定を使用する方法です。


1. リッチテキスト・フォームの本文に表を挿入して、表の任意の場所をクリックします。表の挿入方法につきましては、「[HowTo] リッチテキスト・エディタでの表の作り方」をご覧ください。

ページ情報:ページ編集画面 2

2. ツール・バーから[Table properties(表のプロパティ)]ボタンをクリックします。

ツールバー:表のプロパティ

3. 「Table properties(表のプロパティ)」画面が表示されますので、以下の通り入力します。

    • Spacing: 1
    • Padding: 1
    • Borders: 0

表のプロパティ(Firefox)

4. 「Table properties(表のプロパティ)」画面の[Style[CSS]]の[Border]の右の四角部分をクリックします。
 以下のカラー・パレットが表示されますので、枠線に使う色(ここでは黒)をクリックします。
 続けて、その右横の[none]をクリックして、[solid]を選択し、その右横に表示される[pixels]に「1」と入力します。
 さらに、[Collapsed borders]のチェックを ON にします。

カラー・パレット

5. 「Table properties(表のプロパティ)」画面で[OK]ボタンをクリックします。

注:Microsoft Internet Explorer では「Table properties(表のプロパティ)」画面サイズが小さくなって、[OK]ボタンが画面からはみ出して表示されていません。
 以下の方法で画面を下にスクロールして、[OK]ボタンを表示してください。

表のプロパティ(IE)1「Table properties(表のプロパティ)」画面の任意の場所をクリックしたまま、下にドラッグします。
表のプロパティ(IE)2[OK]ボタンが表示されたら、ドラッグを終了します。


6. ツール・バーから[Cell properties(セルのプロパティ)]ボタンをクリックします。

ツールバー:セルのプロパティ

7. 「Cell properties(セルのプロパティ)」画面が表示されますので、[Style[CSS]]の[Border]の右の四角部分をクリックします。
 以下のカラー・パレットが表示されますので、セルの枠線に使う色(ここでは黒)をクリックします。
 続けて、その右横の[none]をクリックして、[solid]を選択し、その右横に表示される[pixels]に「1」と入力します。

セルのプロパティ(Firefox)

カラー・パレット

8. 「Cell properties(セルのプロパティ)」画面で[OK]ボタンをクリックします。

注:Microsoft Internet Explorer では「Cell properties(セルのプロパティ)」画面サイズが小さくなって、[OK]ボタンが画面からはみ出して表示されていません。
 「Table properties(表の プロパティ)」画面の場合と同じ方法で画面を下にスクロールして、[OK]ボタンを表示してください。

9. 全てのセルについて 6~8 を設定すると、以下のような枠線が黒い表となります。

 

ページ情報:ページ編集画面 3


サンプル

サンプルの表です(行1列1) (行1列2) (行1列3) (行1列4)
(行2列1) (行2列2) (行2列3) (行2列4)

以上


関連トピック

Print Prev Next












© 2024 ケートリック株式会社