テーブルの作り方と使い方

テーブルの作り方と使い方

表テーブルの使い方

表テーブルは、その名のとおり表をつくる場合によく使われます。例えば、次のように項目ごとに値を入れる場合に表を使うと見やすく便利です。

そのほかとしては、デザインの枠組みとしてもよく使われています。表の中に表をいれる(入れ子)ことができるので、サイト全体の枠組みを作ったり、コンテンツの枠組みをつくるのに便利です。

現在ではCSSのボックスを使って枠組みをつくることが多いですが、デザインの崩れが 起きやすかったり、CSSを組むのに時間がかかる場合などは、部分的に表テーブルを使うこともあります。

ただ基本的には表を作るためのものなので、その用途に使用するのがよいでしょう。

表テーブルの作り方 表テーブルの文字寄せや装飾
  1. 表テーブルを作る
  2. セルを複数列作る
  3. セルを複数行作る
  4. テーブルの幅や高さを指定する
  5. セルの列を結合する
  6. セルの行を結合する
  7. テーブルのタイトルを指定する
  1. セル内の文字寄せを指定する
  2. テーブル枠線の幅を指定する
  3. セル間の間隔を指定する
  4. 枠と文字の間隔を指定する
  5. テーブルの背景色を指定する
  6. てーぶるの背景画像を指定する

表テーブルを作る

HTMLコード ブラウザ表示画面
     
項目名や値を入れる
コンテンツメニューに戻る

セルを複数列作る

HTMLコード ブラウザ表示画面
     
値1値2
コンテンツメニューに戻る

セルを複数行作る

HTMLコード ブラウザ表示画面
         
値1値2
値3値4
コンテンツメニューに戻る

テーブルの幅や高さを指定する

HTMLコード ブラウザ表示画面
         
値1値2
値3値4
コンテンツメニューに戻る

セルの列を結合する

HTMLコード ブラウザ表示画面
         
値1値2
値3
コンテンツメニューに戻る

セルの行を結合する

HTMLコード ブラウザ表示画面
         
値1値2
値3
コンテンツメニューに戻る

テーブルのタイトルを指定する

HTMLコード ブラウザ表示画面
             
所持本リスト
タイトル出版社
著者
購入日
コンテンツメニューに戻る

セル内の文字寄せを指定する

HTMLコード ブラウザ表示画面
         
左寄せ右寄せ
中央寄せ
コンテンツメニューに戻る

テーブル枠線の幅を指定する

HTMLコード ブラウザ表示画面
         
左寄せ右寄せ
中央寄せ
コンテンツメニューに戻る

セル間の間隔を指定する

HTMLコード ブラウザ表示画面
         
左寄せ右寄せ
中央寄せ
コンテンツメニューに戻る

枠と文字の間隔を指定する

HTMLコード ブラウザ表示画面
         
左寄せ右寄せ
中央寄せ
コンテンツメニューに戻る

テーブルの背景色を指定する

HTMLコード ブラウザ表示画面
         
左寄せ右寄せ
中央寄せ


         
左寄せ右寄せ
中央寄せ
コンテンツメニューに戻る

テーブルの背景画像を指定する

HTMLコード ブラウザ表示画面
         
左寄せ右寄せ
中央寄せ


         
左寄せ右寄せ
中央寄せ
コンテンツメニューに戻る
このエントリーをはてなブックマークに追加
Yahoo!ブックマークに登録
Clip to Evernote

メールを送る

ご質問やご意見ご感想はこちらのフォームをお使いください。

SEO [PR] !uO z[y[WJ Cu