いろいろな表を作る＊基礎編＊ | 一緒におぼえよう！ホームページ作成

いろいろな表を作る　＊基礎編＊

表（テーブル）を作りたい！

＜table＞～＜/table＞表を作るということを宣言＜tr＞～＜/tr＞横一列（行）を指定＜td＞～＜/td＞セルを指定
＜table＞～＜/table＞は、このタグにはさまれた範囲がテーブル（表）であることを示すタグです。＜tr＞～＜/tr＞は行を定義するタグです。行は横１列分並べたデータの最初と最後に記述します。＜td＞～＜/td＞は、セルに入るデータをそれぞれ囲います。

Lesson1（1行×３セルの表を作る）

梅

50円

10個

＜table border="1"＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞＜/table＞

★３行×９セルの表を作ってみましょう！

梅	50円	10個
松	30円	40個
竹	18円	60個

＜table border="1"＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞＜td＞松＜/td＞＜td＞30円＜/td＞＜td＞40個＜/td＞＜/tr＞＜td＞竹＜/td＞＜td＞18円＜/td＞＜td＞60個＜/td＞＜/tr＞＜/table＞

Lesson3　枠線の幅を設定してみましょう！

梅	50円	10個
松	30円	40個
竹	18円	60個

＜table border="5" ＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞＜td＞松＜/td＞＜td＞30円＜/td＞＜td＞40個＜/td＞＜/tr＞＜td＞竹＜/td＞＜td＞18円＜/td＞＜td＞60個＜/td＞＜/tr＞＜/table＞

★枠線の色を変えてみましょう！＜bordercolor="★"＞

梅	50円	10個
松	30円	40個
竹	18円	60個

＜table border="5" bordercolor="#99cc99" ＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞＜td＞松＜/td＞＜td＞30円＜/td＞＜td＞40個＜/td＞＜/tr＞＜td＞竹＜/td＞＜td＞18円＜/td＞＜td＞60個＜/td＞＜/tr＞＜/table＞

Lesson4　テーブルの背景に色をつけてみよう！

梅	50円	10個
松	30円	40個
竹	18円	60個

＜table border="1" bgcolor="#ffffcc" ＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞＜td＞松＜/td＞＜td＞30円＜/td＞＜td＞40個＜/td＞＜/tr＞＜td＞竹＜/td＞＜td＞18円＜/td＞＜td＞60個＜/td＞＜/tr＞＜/table＞

★テーブルの背景に画像を表示してみよう！

梅	50円	10個
松	30円	40個
竹	18円	60個

＜table border="1" background="画像" ＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞＜td＞松＜/td＞＜td＞30円＜/td＞＜td＞40個＜/td＞＜/tr＞＜td＞竹＜/td＞＜td＞18円＜/td＞＜td＞60個＜/td＞＜/tr＞＜/table＞

ジャンル別一覧