Chap9-1 テーブルの作成

--見出し1--
表を作成するタグ

--段落--
テーブル(表)は、表を表示する「tableタグ」と、行を作成する「trタグ」、表内のデータを意味する「tdタグ」、表内の見出しを意味する「thタグ」の、4つのタグを正確に組み立てて記述する。

--段落--
表のサイズや枠線などは全てデザイン要素となるので、CSSを使って作成する。

--見出し2--
tdタグ（表内のデータ・セル・列/Table Data）

--段落・改行--
表内の文章はすべてテーブルデータになる。
表に表示する文章を「tdタグ」で囲むと、ブラウザで「セル」と呼ばれる箱状の形ができ、セル内の左・中央の位置に文章が表示される。

--見出し2--
thタグ（表内の見出し・見出しセル・見出し列/Table Header）

--段落・改行--
表内の文章が見出しの役割を持つ場合、「tdタグ」の代わりに「thタグ」で囲んで表の見出しを作成する。
ブラウザでは『見出しセル』と呼ばれる箱状の形ができ、見出しセル内の中央の位置に、太字で文章が表示される。

--見出し2--
trタグ（行の作成/Table Row）

--段落・改行--
セルを1行の列にまとめる「行」を作成するタグ。
「tdタグ」や「thタグ」を「trタグ」で囲むことで、1行に表示する列の数を決めることができる。
ブラウザでは、セルを1行で表示させる役割がある。

--見出し2--
tableタグ（テーブル・表の作成/Table）

--段落・改行--
行・列を「tableタグ」ですべて囲むことで表が作成される。
ブラウザでは、表の形状が視認しにくいため、CSSを使って枠線を表 示したり、余白や背景色を使って「見やすく、分かりやすく」内容を伝えることができる。

--見出し3--
tableタグの記述例

--段落--
大人

--段落--
高校生以下

--段落--
小学生以下

--段落--
3,000円

--段落--
1,500円

--段落--
500円

--見出し2--
セルの結合

--段落・改行--
行や列をまとめて見やすくする「セルの結合」は、「trタグ」内の「tdタグ」や「thタグ」の数(列数)が変わってくるので、コードが複雑になるので注意する。
混乱した場合は、必ず表を図に描いて、何行何列の表なのか確認すること。

--段落--
「セルの結合」は「tdタグ」や「thタグ」に、属性を追加して作成する。

--見出し3--
colspan属性

--段落・改行--
同じ行にある複数の列をまとめるには、まとめたい最初の「tdタグ」や「thタグ」に、colspan属性を追加する。
値は、まとめたいセルの数を指定し、colspan属性でまとめたセル内の文章は、最初の「tdタグ」や「thタグ」にまとめて記述する。

--見出し3--
rowspan属性

--段落・改行--
同じ列にある複数の行をまとめるには、まとめたい最初の「tdタグ」や「thタグ」に、rowspan属性を追加する。
値は、まとめたいセルの数を指定し、rowspan属性でまとめたセル内の文章は、最初の「tdタグ」や「thタグ」にまとめて記述する。

--見出し3--
セルの結合例

--段落--
例文：「営業日は、木曜日を除く月曜から金曜日の10:00〜13:00と17:00〜20:00まで。土曜・日曜日は10:00〜13:00までで、夕方からの営業はお休みです。また、木曜日は定休日になっております。」