ウェブデザイン技能検定3級実技対策補足

ウェブデザイン技能検定3級実技対策補足

前回のHP作成でウェブデザイン技能検定3級実技に必要な

知識はある程度紹介できたが、実技試験の対策として説明が足りなかった

部分について解説していく。

 

table要素について

HP作成ではtableタグを利用しなかったが、実技試験や学科試験では

table要素についても出題されているので解説していく。

そもそもtable要素とは表を作る要素である。

図のように、tableが全体、行はtr、見出しはth、各セルはtdで記述する。

ちなみに、trはTable Low、thはTable Headerの略、tdはTable Dataの略である。

 

実際に記述してみる。

 

上記HTMLタグを.html形式で保存し、ブラウザで開くと下図のようになる。

 

 

 

見出しが必要ない場合は<th></th>を記述せずに<td></td>で記述する。

 

表の余白について

文字の位置を調整したい場合はCSSでpaddingを使い、余白を設定する。

 

table th {
padding: 10px;
}

table td {
padding: 3px 10px;
}

 

paddingで余白ができた。

table要素全体の色を変えたい場合はtableを指定してcolorを選択する。

thやtdのみの文字色や背景色を変えたい場合は、

table th{や、table td{のような形式で指定すると、その部分のみに

CSSを適用することが出来る。

 

セルの結合について

図のように上下2つのセルを結合したい場合は、

<td rowspan=”2″>を使う。

下のセルと結合する場合は下の要素は削除しないとはみ出してしまう。

 

 

左右に結合する場合はcolspanを使う。

 

まとめ

今回はtable要素について解説したが、

table要素の<table border=”1″>の部分を消して

CSSで違う形式の表にすることもできる。

しかしウェブデザイン技能検定3級実技ではそこまでの内容は出題されないので

今回は割愛した。

 

table要素の説明は下記リンクが分かりやすい。

表(table)の作り方と装飾の変え方>https://saruwakakun.com/html-css/basic/table

 

 


このエントリーをはてなブックマークに追加

マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です