コンドウノブログ

DreamweaverでTableの線を細くする方法

ホームページをつくりたいけどソースをいじってコーディングするのは難しい、
Dreamweaverのソフトに依存した構築しか出来ないって人いませんか? はいそれ私です!

しかもDreamweaverの使い方で検索しても下記↓のように解説されていて
“そうじゃないんだDreamweaverの画面と照らしながら説明してほしいっ!”ってことありませんか?

よくある説明の例↓
<head>〜</head>の内に以下を記述してください。
(<table>には何の属性も各必要ありません)
—————————–
<style>
<!–
table{ border-collapse:collapse;}
td{ border:1px solid #CCCCCC;}
//–>
</style>
—————

本当は上記のような説明を徐々に理解していくことが大切ですが、
まあ、できることならソースを記述しないでやりたいことをやりたいですね。

ということで、私がDreamweaverで実際に困ったことを備忘録として
メモしていきたいと思います。
まず第一弾として、テーブルを作成したときにボーダーを設定したけど
もっと枠線を細くできないだろうか?ということがあったので
細くする方法を説明していきます。

まずプロパティでテーブルへボーダーを1にしてやると枠ができます↓

 

ただ、この方法だと下記の線の太さになります。
う〜ん!デザインによっては線が主張し過ぎてもっと細い
枠線にしたいとなることがあると思います。

 

そこでgoogle先生で調べたところ、
やはりボーダー1より細くするにはCSSを使わないといけないようでした。
CSSは私もほとんど解らないので安心してください。
ルール定義でカテゴリのボーダーの定義を下記の写真のように設定するだけでOKです。

定義した後に、目的のテーブルをクリックしてクラスを適用すれば、
下の図の比較のように、ボーダー1でつくられたテーブルよりも
下のテーブルのように細いテーブルをつくることができました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)