上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 テーブルタグ、この辺になると怪しいのですが(いや、他も独学なんで怪しいんですが…汗)、今回は、まずタグから研究していきます。
 タグを使ったことが有り、テーブルタグも知っている人は、テーブルタグのめんどくささはご存知だと思いますが…

 やっぱり、テンプレートをレイアウトする時には強力な武器になります。


テーブルの組み立て方

 テーブルタグの基本形は…

<table>
 <tr>
  <td>表の内容1</td>
  <td>表の内容2</td>
  <td>表の内容3</td>
 </tr>
</table>

 こんな形になります。

 テーブルタグには、このように基本の「table」「tr」「td」3つの要素を組み上げて作ります。
「table」は、表全体のボックスを生成するタグ。
「tr」は、表全体「table」の中の、横一列いっぱいのボックス。
「td」は、「tr」の中に作る、テキストを入れるボックス。

 こんな感じです。

<table>
<tr>
<td>内容1</td><td>内容2</td><td>内容3</td>
</tr>
</table>

 いちばん外側が「<table>」、その中の横列全体が「<tr>」、文字など、内容物を入れるところで、かつ横にいくつでも分けることが出来るボックスが「<td>」というわけです。

 次に、2列の表を作る場合は、こんな風に作ります。

<table>
 <tr>
  <td>表の内容1</td>
  <td>表の内容2</td>
  <td>表の内容3</td>
 </tr>
 <tr>
  <td>表の内容4</td>
  <td>表の内容5</td>
  <td>表の内容6</td>
 </tr>
</table>

 こんな感じ。

<table>
<tr>
<td>内容1</td><td>内容2</td><td>内容3</td>
</tr>
<tr>
<td>内容4</td><td>内容5</td><td>内容6</td>
</tr>
</table>



テーブルのボックスを横に繋げる(連結する)

 次が、テーブルを使いこなす一番重要な、連結、ボックスを横に繋げる方法です。
 例えば、「内容2」と「内容3」を一つにして、「内容A」を作ってみますと…

<table>
 <tr>
  <td>表の内容1</td>
  <td colspan="2">表の内容A</td>
  <td>表の内容3</td>
 </tr>
 <tr>
  <td>表の内容4</td>
  <td>表の内容5</td>
  <td>表の内容6</td>
 </tr>
</table>

 こういうふうに記述します。「colspan="数値"」と言うのが、「横に○個連結する」と言う命令文。数値を変えれば、連結する数が増やせます。
 こんな感じになります。

<table>
<tr>
<td>内容1</td><td colspan="2">内容A</td>
</tr>
<tr>
<td>内容4</td><td>内容5</td><td>内容6</td>
</tr>
</table>



テーブルのボックスを縦に繋げる(連結する)

 次は、テーブルのボックスを縦に繋げる方法。
 「内容1」と「内容4」を連結して「内容B」にしてみますと…

<table>
 <tr>
  <td rowspan="2">表の内容B</td>
  <td>表の内容2</td>
  <td>表の内容3</td>
 </tr>
 <tr>
  <td>表の内容4</td>
  <td>表の内容5</td>
  <td>表の内容6</td>
 </tr>
</table>

 こんな感じになります。
 お気づきと思いますが、「<tr>」と言うのは、divボックスとはちょっと性質が違い、縦に中の箱がはみ出し、下の箱と連結…つまり、中の箱が「<tr>」の箱をはみ出すことを許可している特殊なボックスと言えます。
 図で示すと、こんな感じに。

Capu1501.gif

 説明だと、サラッと簡単な感じがしますが、表の列が増えるとややこしくなってきます。
 最初は、基本の形を作っておいて、その後「rowspan」で連結して、連結されて消さなきゃならない部分を消せば、比較的ミスらずにテーブルタグを組み上げることが出来ると思います。



実際に表示確認してみる(編集可)
【HTML】

【CSS】




☆次はいよいよCSSを当てて、テーブルをカッコよく生まれ変わらせます☆
テーブルのスタイルシート

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Wed.04.07.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。