�B細い線のテーブルの作り方

細い線のテーブルの作り方。 細い線のテーブルの作り方を自分のものにするまでに、 どのぐらい時間を費やしたでしょうか！？ HTMLソースからして分からず、HTML自体の理解にかなり時間がかかってます(^^; 素材屋さんとか、テーブル素材の説明をしているサイトとか、いろいろ閲覧。 HTMLの専門的な難しいことは、いまだにわかっていませんが（＾＾；、 自分なりの方法で、なんとか細い線のテーブルを作れるように！！ 今後細い線のテーブルを作ろうと思う時、 間違いなく作り方を忘れてしまいそうなので（＾＾；、 細い線のテーブルの作り方を、このページに残しておこうと思います。 ホームページビルダーの「表の挿入」を使って、2行分の表を作る。 次に、上にある小さな表の枠の中で右クリックをして、「属性の変更」をクリック。 その時、もしも一番上の「タグ」欄に”レイアウト”などが表示されていたら、 右端の△をクリックすると、その中に”表”という項目があるはずなので、その”表”をクリック。 そうすれば、表の属性の変更が可能に。 ”表”の属性で、例えばですが、表の幅を234に設定すると、下表の幅になります。 そして、例えばですが、”セル内の余白”を6に設定します。 次に、上の段にカーソルを置いて、「セル背景色」で色をつけます。 今回は、＃66ff66という黄緑色に。 そして、黄緑色の枠の中にカーソルがある状態で、HTMLソースをクリック。 そうすると、＜TD bgcolor="#66ff66"＞と＜/TD＞というタグの真ん中に、 　　　＜TD bgcolor="#66ff66"＞｜＜/TD＞ 　　　　　　　　　　　 こんな感じでカーソル”｜”が表示されている状態になります。 このタグの意味は、簡単に言えば、 表の枠の中を、＃66ｆｆ66という色番号で、黄緑色にしたよ・・・ みたいな感じです。多分（＾＾； そうしましたら、カーソルの左側にある＜TD bgcolor="#66ff66"＞に、 style="border:1px solid #66ff66"を追記。 これは、表の枠の線を1pxという細い線で表示してね・・・というような意味です。 青文字の部分をコピペして貼り付けると早いかも。 HTMLをいじっていると、HTMLのどこかをクリックしただけで、画面が一気に動いてしまうのですが、焦らずに、そのままカーソルのある部分を目で探して、カーソルはそのままの状態で、青文字部分を入力、または、ペースト。 位置は、TDのあとに半角ワンスペース空けて、 <TD style="border:1px solid #66ff66" bgcolor="#66ff66"></TD> こんな感じで付け加えます。 ここまでの作業を終えると、黄緑色の部分が出来上がっているはずです。 そして、付け加えたタグの3行下に、<TD></TD>というものがあるはずです。 <TD style="border:1px solid #66ff66" bgcolor="#66ff66"></TD> </TR> <TR> <TD></TD> 　↑ この左側にある<TD>のところにカーソルを<TD｜>こんな感じでクリックしてもってきます。 そして、TDのあとに半角ワンスペース空けて、 style="border:1px solid #66ff66"を付け加えます。 出来上がりのタグは、 <TD style="border:1px solid #66ff66"></TD> こんな感じ。 この一連の作業が終わって、「ページ編集」に戻りますと、 このように、細い線で引かれた表が２行出来上がっているはずです。 ただし、プレビュー画面で確認すると、何も表示されていないかもしれません。 その場合は、ページ編集画面の表の中に、スペースを入力するか、 もしくは、文字を入力すると、プレビュー画面でも表示されます。

▲細い線のテーブルの作り方トップに戻る