今ではもう、ブログの記事に編集・装飾がある程度できるようになりました。さらに、seesaablogのコンテンツも充実し、最新記事下のカテゴリーごとのご紹介が効果的に表せるようになりましたので、これを機に過去の記事も改めて修正し直し、整理して、同様な記事を繰り返し書かずに、上書きのみにして、カテゴリごとに学びやすいようにします。

カテゴリことの表記は→ 【テーブル】・・・ とします。

それぞれの記事タイトルも
【テーブル】@表組みの基本から・・・のような表記にします。 ○番号で続きの学びが確実にできるように表していきます。最初から学ぶときは@からたどってみてください。

従って、記事更新の日付は参考にせずに、【カテゴリ】から学びたい項目を探して進んでいってください。 今後とも末永くいつでも戻ってきて学んでみてください。

2012年03月18日

【テーブル】Lテーブルボーダーの色指定にチャレンジ。


テーブルのボーダー(境界線)に色を指定してみる練習をします。
各セルの色を同じ色で、指定する場合と、
各セルの上左と右下に分けて色を指定することができます。

色はカラーネームといって、色それぞれに6桁の数字とアルファベットを組み合わせて決められています。
seesaaの場合は、上の青いAのところをクリックすると色がいらべます。色番号もわかります。

最近のカラー例えばパステル色は利用できるサイトできないサイトがあるようですので、注意してください。

実際には下記のとおりにしてみました。

<TABLE border=”@” bordercolor=”A” align=”center”>
<CAPTION align=”top”>表のタイトル</CAPTION><TR align=”center” width=”320” hieght=”280”>テキストや画像</TD></TR><TR><TD>テキストや画像</TD></TR></TABLE>

@・・・border表組の境界線の幅
A・・・bordercolor境界線の色指定・・・今回はグレー系の色に

では、実際に作ってみましょう。
では、実際に使って見ましょう⇒続きをクリック

【テーブル】Kテーブルでの縦列の統合と横列の結合を組み合わせてのテーブル。練習です!


テーブルでの縦列の統合と横列の結合を組み合わせての練習をしてみましょう。
エクセルでのセルの結合をとイメージしてください。今までの復習もこめて、いつもとは逆で、最初に完成させたテーブルをお見せしましょう。


ブラの正しい付け方ビデオ












セシール - ひとり暮らしをはじめる前に読みたいカタログ。09春夏
セシール - plump 09春夏
セシール
セシール - 呼吸するブラセシール - セシレーヌ 09春夏セシール - すてきさろん 09春夏セシール - Cupop 09春夏
まるでノーブラみたいな、解放感。

内側のこもる熱がカップをすり抜けていく

通気性の追求…蒸れないブラ

もち、シームレスカップだからアウターひびかない

気になる前に美尻キープ
セシール - 気になる前に美尻キープ


まとめる前は横○×縦○、いくつだとわかりますか。
縦のセルだけまとめているところ。
横のセルだけまとめているところ。
縦も横もまとめているのところ。
分かりますか。
では、実際に使って見ましょう⇒続きをクリック

【テーブル】Jテーブルの横列をまとめる練習


昨日に引き続きテーブルの横方向の統合を練習しましょう

<TABLE border=”@” align=”A”>
<CAPTION>B</CAPTION>
<TR><TH colspan=”C”>画像など</TH></TR>
<TR><TD width=”D”>画像など</TD>
<TD width=”D”>画像など</TD>
<TD width=”D”>画像など</TD>
<TD width=”D”>画像など</TD>
<TD width=”D”>画像など</TD></TR></TABLE>
@はテーブルの線の幅ですね。ピクセル数で定義されます。
Aはテーブル全体の位置を定義します(left,senter,right)
Bはテーブルのヘッダー(題目)をテキストで入れます。
Dはテーブル内のセル一つの横幅ですね、ピクセル数で定義されます。
《昨日同様、基本形のテーブルをすべて作り、<TH colspan=”C”>画像など</TH>にまとめられる分のみ削除するようにしましょう。》
では、実際に使って見ましょう⇒続きをクリック

【テーブル】Iテーブルの縦列をまとめる練習


テーブルでの縦列をまとめる練習
エクセルでのセルの結合をとイメージしてください。
今まで@からHまでの復習もこめていろいろ指定します。

<TABLE border=”@” align=”A” cellpadding=”B” width=”C” height=”E”>
<TR><TH rowspan=”D”>画像など</TH>
<TH height=”E”>画像など</TH></TR>
<TR><TD height=”E”>画像など</TH></TR>
<TR><TD height=”E”>画像など</TH></TR>
<TR><TD height=”E”>画像など</TH></TR>
<TR><TD height=”E”>画像など</TH></TR></TABLE>

@はテーブルの線幅でしたね。ピクセル数で定義します。
Aはテーブル全体での位置(left,center,right)を入れます。
Bはセル内の余白をピクセル数で入れます。
Cはテーブル全体の横幅を指定しています。ここまではテーブル全体の構成ですね。
Eはセル内の高さをピクセル数で指定します。それぞれのセルの多きさを指定指定時にお使いください。
今日のメイン
Dは縦列の統合のHTMLです。2列5行の表から一列目を一つのセルにまとめる練習です。
TH・・・はテーブル内のヘッダ項目を定義します。TR・・・はテーブルの行(横の区切り)を定義します。TD・・・はテーブルの列(縦の区切り)を定義します。
<TH rowspan=”D”>画像など</TH>・・・はヘッダ(一列目;項目)で統合
テーブルの一列目でヘッダとして他の列より目立たせたい時に使ってください。
<TD rowspan=”D”>画像など</TD>・・・列の統合、とその時々でお使いください。
《指定方法としては、最初に連結前の状態でテーブルを組みrowspanと追加して吸収されるセルの記述を削除するのが間違いのない作り方になります。》
リンクシェア レビュー アフィリエイト


では、実際に使って見ましょう⇒続きをクリック

【テーブル】Hテーブル(表組)のセル内の余白を設けて見ましょう


テーブルのセル内の余白を設定してみよう!

テーブルに、各セル内に余白を設けることが学びが今日のテーマ。
テーブルのボーダー(罫線)と同じように数字で一括余白の幅を設定できます。
<TABLE border=“1” cellpadding=“@” align=“senter”><CAPTION align=“”>タイトル<CAPTION>
・・・・・中略・・・・・</TABLE>
cellpadding=“@” ・・・@に数字を入れます。単位は必要ありません。
数字6で余白を設定してみます。

<TABLE border=“1” align=“senter” cellpadding=“6”><CAPTION align=“”>タイトル<CAPTION>
<TR align=“TOP”>
<TD width=“100” height=”50“ align=“left”>テキストや画像など</TD>
<TD width=“250” height=”50“ align=“left”>テキストや画像など</TD>
</TR><TR align=“middle”>
<TD width=“100” height=“70” align=“center”>テキストや画像など</TD>
<TD width=“250” height=“70” align=“center”>テキストや画像など</TD>
</TR><TR align=“bottom”>
<TD width=“100” height=“60” align=“right”>テキストや画像など</TD>
<TD width=“250” height=“60” align=“right”>テキストや画像など</TD>
</TABLE>
では、実際に使って見ましょう⇒続きをクリック

【テーブル】G縦罫線や横罫線の見せ方を学ぶ


今日の学びは、テーブルの罫線の表示方法を指定する学びを薦めていきます。
罫線の幅やセル内の余白を設定する時のように、一括で設定します。
<TABLE border=“3” align=“senter” rules=“◎”>・・・</TABLE>
all・・・全ての内罫線を表示する。
none・・・内罫線を表示しない。
rows・・・横行の内罫線を表示する。
cols・・・縦行の内罫線を表示する。

縦罫線のみを表示してグループごとに表示する設定を考えてあらわして見ましょう。

<TABLE border=“1” align=“senter” rules=“cols”><CAPTION align=“”>タイトル<CAPTION>
<TR align=“bottom”>
<TD width=“100” align=“center”>テキストや画像など</TD>
<TD width=“100” align=“center”>テキストや画像など</TD>
<TD width=“100” align=“center”>テキストや画像など</TD></TR>
<TR align=“bottom”>
<TD width=“100” align=“center”>テキストや画像など</TD>
<TD width=“100” align=“center”>テキストや画像など</TD>
<TD width=“100” align=“center”>テキストや画像など</TD></TR>
<TR align=“bottom”>
<TD width=“100” align=“center”>テキストや画像など</TD>
<TD width=“100” align=“center”>テキストや画像など</TD>
<TD width=“100” align=“center”>テキストや画像など</TD></TR>
・・・・・・</TABLE>
では、実際に使って見ましょう⇒続きをクリック

【テーブル】Fテーブルにタイトル[キャプション]をつける。


テーブルにキャプション(タイトル)をつけてみよう!

テーブルに、キャプション(タイトル)をつける学びが今日のテーマ。
入れる位置はテーブルの上と下、それに、横位置も中央或いは右、左と変えてみましょう。
<CAPTION align=“”><CAPTION>・・・キャプションの位置を〔TOP(テーブルの上(中央))、bottom(下(中央))と、指定できます。
<CAPTION align=“” valign=“”><CAPTION>・・・キャプションの横位置は〔left、center,right〕尚、二つ目の要素を設定する時には一つの<>の中では同じ言葉は使えない事を覚えておきましょう。

<TABLE border=“1” align=“senter”><CAPTION align=“”>タイトル<CAPTION>
<TR align=“TOP”>
<TD width=“100” height=”50“ align=“left”>テキストや画像など</TD>
<TD width=“250” height=”50“ align=“left”>テキストや画像など</TD>
</TR><TR align=“middle”>
<TD width=“100” height=“70” align=“center”>テキストや画像など</TD>
<TD width=“250” height=“70” align=“center”>テキストや画像など</TD>
</TR><TR align=“bottom”>
<TD width=“100” height=“60” align=“right”>テキストや画像など</TD>
<TD width=“250” height=“60” align=“right”>テキストや画像など</TD>
</TABLE>
では、実際に使って見ましょう⇒続きをクリック

【テーブル】Eセル内の横位置と縦位置の配置を学びます


前回、第5回で、テーブルのセルのサイズを指定してみました。でも、もう少し見せ方を工夫したいですよね。
最後の改行してしまったものや、セルの中で横位置をテキストを中央にそろえたり、縦位置を上に持ってきたりしたいですよね。
今回はセルの中での画像やテキストの配置を学びます。
〔HTMLの言葉で分からない場合は、以前の記事に振り返ってください。〕

<TD align=“@” valign=”A“>画像など</TD>
<TH align=“@” valign=”A“>画像など</TD>
@はセル内の横位置を指定します。〔left,center,right〕(左、中央、右〕が入ります。指定しない場合は左位置となります。
Aはセル内の縦位置を指定します。〔top,bottom,middle〕(セル内で・・・上揃え、上下センター揃え、下揃え)指定しない場合は上下センター揃えとなります。
前回のテーブルを利用し、上の要素を加えて見ます。
一行目はtop、二行目はmiddle、三行目はbottom、
一列目はleft,二列目はsenter,三列目はright、とします。

行全体を指定できるので、TRの要素に列の指定を加えると一回ですみます。もちろんTDあるいはTHのそれぞれに入れてもかまいません。
列はそれぞれのTDに加えていきます。

〔注意〕一つの要素<>の中に規定する言葉は一つだけとなります。
<align=“@TOP valign=”middle“>のようにです。
決して<align=“TOP” align=”middle“>とはしません。

<TABLE border=“1”>・・・テーブルの影線は“1”で指定。
<TABLE  align=“senter”>・・・位置は中央です。下のようになります。

<TABLE border=“1” align=“senter”>
<TR align=“TOP”>
<TD width=“100” height=”50“ align=“left”>テキストや画像など</TD>
<TD width=“100” height=”50“ align=“left”>テキストや画像など</TD>
<TD width=“120  height=”50“ align=“left”>テキストや画像など</TD>
</TR><TR align=“middle”>
<TD width=“100” height=“70” align=“center”>テキストや画像など</TD>
<TD width=“100” height=“70” align=“center”>テキストや画像など</TD>
<TD width=“120” height=“70” align=“center”>テキストや画像など</TD>
</TR><TR align=“bottom”>
<TD width=“100” height=“60” align=“right”>テキストや画像など</TD>
<TD width=“100” height=“60” align=“right”>テキストや画像など</TD>
<TD width=“120” height=“60” align=“right”>テキストや画像など</TD>
</TABLE>
では、実際に使って見ましょう⇒続きをクリック

【テーブル】Dテーブルのセルの縦横サイズを指定してみよう!


テーブルのセルのサイズを指定してみます。
〔HTMLの言葉で分からない場合は、以前の記事に振り返ってください。〕

<TD width=“@” height=”A“>画像など</TD>
<TH width=“@” height=”A“>画像など</TD>
@はセルの横幅を指定します。ピクセル数か全体の幅からの%で指定
Aはセルの縦幅を指定します。ピクセル数か全体の幅からの%で指定

表内のセルの幅や高さは、各セルの最も大きく指定したサイズに依存します。よってこの表内は一列目(最初の<TR>から</TR>)の一番目で横幅、縦幅を指定、二番目、三番目は横幅のみ指定。
二列目は(二度目の<TR>から</TR>)一番目で縦幅のみ指定したのみ。後は固定されているのが分かりますよね。
三列目(三度目の<TR>から</TR>)は一番目で高さのみ指定。後は固定されていますから入れていません。つまり同じ要素のところを繰り返し指定していません。
<TH></TH>のところだけテキストなので同じ縦幅横幅で指定しています。

<TABLE border=“1”>・・・テーブルの影線は“1”で指定。
<TABLE  align=“senter”>・・・位置は中央です。下のようになります。

<TABLE border=“1” align=“senter”>
<TR>
<TD width=“100” height=”50“>テキストや画像など</TD>
<TD width=“100” height=”50“>テキストや画像など</TD>
<TD width=“120  height=”50“>テキストや画像など</TD>
</TR><TR>
<TD width=“100” height=“70”>テキストや画像など</TD>
<TD width=“100” height=“70”>テキストや画像など</TD>
<TD width=“120” height=“70”>テキストや画像など</TD>
</TR><TR>
<TD width=“100” height=“30”>テキストや画像など</TD>
<TD width=“100” height=“30”>テキストや画像など</TD>
<TD width=“120” height=“30”>テキストや画像など</TD>
</TABLE>
では、実際に使って見ましょう⇒続きをクリック

【テーブル】Cセルの大きさの設定〔前回の応用〕


今日は実際に使って理解した例が簡素で面白いと思ったので紹介します。

テーブルの各セル(テーブルの中の升目一つ)の大きさを指定しないでも、中に入れる画像の大きさをそろえれば同じことになるという例です。

次のようなHTMLになります。

<TABLE border=“1” align=“center”>
<TR>
<TD>画像など</TD>
<TD>画像など</TD>
<TD>画像など</TD>
</TR>
<TR>
<TD>画像など</TD>
<TH>綺麗に・・・クリック</TH>
<TD>画像など</TD>
</TR>
<TR>
<TD>画像など</TD>
<TD>画像など</TD>
<TD>画像など</TD>
</TABLE>


中に入れる画像をそろえると・・・。
では、実際に使って見ましょう⇒続きをクリック
ラベル:テーブル

【テーブル】B縦2×横3のテーブル(表組)を作ってみよう!


今日は縦2×横3のテーブル(表組)を作って見ましょう


<TABLE border=“1” align=“left”> ・・・@
<TR>
<TD whidth=“125” height=“125”>クリックしてみてね</TD> ・・・A
<TD whidth=“125” height=“125”>文章や</TD> ・・・B
<TD whidth=“125” height=“125”><span style=“font−size:large;”>文章や画像など</span></TD> ・・・C
</TR>
<TR>
<TD whidth=“125” height=“125”>文章や画像など</TD>
<TD whidth=“125” height=“125”>文章や画像など</TD>
<TD whidth=“125” height=“125”>文章や画像など</TD>
</TABLE>

・・・@は昨日の練習で分かりますね。テーブルの影線の太さが“1”、テーブルを全体の左に寄せるのいみでしたね。
・・・Aはこうでしたね。<TD>はテーブル内のヘッダ項目を指定する機能を持ちます。ここでは、whidth=“125” height=“125”として、テーブルの一つの枠の大きさを指定しています。注意することは、前後左右のテーブルの大きさにも影響することです。実際使っていくと分かると思います。
・・・Bは、私のブログの文章の通常の大きさです。
・・・C文の大きさを下のボタンの『大』にしてみました。
では、実際に使って見ましょう⇒ここをクリック

【テーブル】A文章を入れて効果的に使う


表組(テーブル)の基本の続きです。
昨日作ってみたテーブル(表)に文字を入れてみましょう。
テーブルは昨日のを祖もまま使って、文字を入れてみます。
文章を向かって右側に流します。


<TABLE>表組の中身の定義</TABLE>

となります。中身を1×1の表を作ってみましょう。
<DIV border=“1” align=“left” border=“1”>
<TABLE>
<TR>
<TH width=“150” height=“150”>◎</TH>
</TR>
</TABLE>
</DIV>
これで、画面の左に、横85ピクセル縦50ピクセル角の正方形の表ができます。
二重丸のところに文章を入れると。。。。

<TABLE>〜</TABLE>のなかに、使われる「要素」があります。
TRは「行(横の区切り)」を定義します。
TDは「列(縦の区切り)」を定義しますが、今日はでてきません。
THは「表組内のヘッダ項目を指定します」今日の内容は1×1の大きさを定義しています。見出しを表示させたり、文字などを表示させたりします。「行(横の区切り)」を定義する機能を持っています
borderは表の影線を表し、“ ”の数値によって線の太さが変わります。
alignは表組の全体の位置を表します。“left”は左側に位置しますので、文章は右に回り込みます。
では、実際に使って見ましょう⇒ここをクリック

【テーブル】@表組みの基本の形から/任意にスペースをあけるのに使える裏技も


表組(テーブル)の基本から練習しましょう。

<TABLE>表組の中身の定義</TABLE>
となります。
罫の中身を1×1の表を作ってみましょう。

<DIV align=“center”>・・・@
<TABLE border=“2”>
<TR>
<TH width=“170” height=“170”> 
</TH>
</TR>
</TABLE>
</DIV>
これで、画面の中央に・・・@、170ピクセル角の正方形の表ができますが、影も形も見えないはずです。でも作られています。

<TABLE>〜</TABLE>のなかに、使われる「要素」があります。
TRは「行(横の区切り)」を定義します。
TDは「列(縦の区切り)」を定義しますが、今日はでてきません。
THは「表組内のヘッダ項目を指定します」今日の内容は1×1の大きさを定義しています。見出しを表示させたり、文字などを表示させたりします。「行(横の区切り)」を定義する機能を持っています。
borderは罫線の太さを表します。“ ”の間に数字が入り大きな数字ほど太くなります。

それでは実際に現してみましょう。

では、実際に使って見ましょう⇒ここをクリック

【テーブル】Mテーブルの中のセルに背景色を入れてみよう


テーブルの中のセルに背景色を入れる練習です。

<TABLE bgcolor=”@”> 〜 </TABLE>
<TD bgcolor=”A”> 〜 </TD>
<TH bgcolor=”A”> 〜 </TH>
<TR bgcolor=”B”> 〜 </TR>
@・・・は表組み全体に背景色を指定するときに使うHTMLです。
A・・・はTDの要素(横の区切り)THの要素(セルのヘッダーとして指定し区切られた)の個々のセルに対して色を指定します。
B・・・はTRの要素(横一列の区切り)に対してすべて色を指定します
いずれも、色指定には、シーザーブログではのカラーボックスから「6桁の英数字」を入力してください。
では、実際に使って見ましょう⇒続きをクリック

トップページへ戻る方は次項有クリックして

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。