spacer 始めよう!きれいなサイト作り spacer
 
spacer   spacer spacer
ホーム | サイトマップ
ボタン-基礎 ボタン-運営 ボタン-リンク ボタン-その他 ボタン スペーサー
spacer spacer
spacer spacer
 

webサイトのレイアウト作業に欠かせないのがテーブルです。テーブルの作り方ひとつでサイトの見え方が全然違います。
最近ではテーブルを使わずCSSを用いレイアウトしたサイトが増えてきました。CSSを使った方がHTMLがシンプルになり検索にもヒットしやすく、また後々の修正も容易になる理由などからです。
しかし、最初はHTMLを理解する上でもHTMLを使ったテーブルを作成しレイアウトする方が良いと思います。
何と言ってもテーブルとは簡単に言うと”表”なので非常にわかり易いです。やはり初心者のころはテーブル作成をオススメします。

HTMLテーブルの基本的記述方法は以下の通りです。
<table>
 <tr>
   <td>1行1列</td>
   <td>1行2列</td>
   <td>1行3列</td>
 </tr>

 <tr>
   <td>2行1列</td>
   <td>2行2列</td>
   <td>2行3列</td>
 </tr>

 <tr>
   <td>3行1列</td>
   <td>3行2列</td>
   <td>3行3列</td>
 </tr>
</table>

テーブルの行と列
上図の通りtrが行(横方向)でtdが列(縦方向になります。

テーブルのマス目のことをセル(cell)と呼びます。

テーブルの詳細を設定する場合は<table>タグの中に属性を書き入れます。
<table border="2" cellspacing="3" cellpadding="3" >
上記の場合テーブルの外枠の太さが2px、セルの間隔が3px、セルとテキストの余白が3pxです。(下図参照)
テーブルの余白と間隔
※テーブルは整列を目的とする場合が多く、border="0"としてブラウザ上には罫線などを表示させず、画像やテキストなどをきれいに配置するためだけによく使われます。

ホーム > Webデザイン > テーブルについて1 ↑このページのトップへ
 
Copyright(C) 2007 Web Design LDI All Rights Reserved.