演習2-1 項目欄の色を水色に変えなさい
<解答>
<解説>
13行目の<tr bgcolor="#D3D3D3" → <tr bgcolor="lightblue" に書き換える
lightblue でも 色コード #add8e6 どちらでも結果は同じです。
google等「html 色」と検索するとコード一覧のサイトが数多く表示されます。
これらの色コード一覧を参照しお好きな色の設定を行ってください。
演習2-2 表の幅(100px)を広げなさい
<解答>
12行目の<table bgcolor="#a9a9a9" → <table width="860" bgcolor="#a9a9a9" に書き換える
<解説>
各項目に幅を設定しておりその幅の合計が760pxなので100pxなので860pxでテーブ全体で設定しました。
tdタグでの設定よりもtableタグの設定が優先されます。試しに15行目のtdタグの幅を200px → 300pxに変更してみてください。
表全体の幅は変わらず得意先名の列が広くなります。各項目の幅に合わせた比率で調整して表示されます。
※width="860" の860pxのpxは省略することができます。
演習2-3 全ての項目名を右揃えにしなさい
<解答>
13行目の<tr align="center" → <tr align="left" に書き換える
<解説>
trタグで行全体の設定を行います。
左寄せ:left 、中央:center 、右寄せ:right となります。
尚、tdダグで個別の列の設定も可能です。この時優先されるのはtdタグの設定が優先されます。
trタグ、tdタグにてaligの設定を変更して動きを確認してください。
演習2-4 列の高さを30pxにしなさい
<解答>
13,20行目の<tr height="24" → <tr height="30" に書き換える
<解説>
trタグで行全体の設定を行います。
演習2-5 文字サイズを15pxに変更しなさい
<解答>
12行目の<table style="font-size:12px;" → <table style="font-size:15px;" に書き換える
<解説>
tableタグで行全体の設定を行います。対象行だけの場合はtrタグ、対象おセルの場合はtdダグで設定できます。
演習2-6 表の罫線を2pxにしなさい
<解答>
12行目の<table cellspacing="1px" → <table cellspacing="2px" に書き換える
<解説>
cellspacingとは実は表の罫線の太さの設定ではありません。読んだ通りセルとセルとの間の幅の空間を設定します。
この幅の空間を利用して罫線に見えるようにしています。
下記のような表があります。
<table bgcolor="#a9a9a9" cellspacing="0px">
<tr bgcolor="white">
<td width="80">項目1</td>
<td width="80">項目1</td>
<tr>
<tr bgcolor="white">
<td>項目2</td>
<td>項目2</td>
<tr>
</table>
この表では罫線が表示されません。
しかし下記のようにtableタグに cellspacing="1px"を入れると表示されます。
<table bgcolor="#a9a9a9" cellspacing="1px">
<tr bgcolor="white">
<td width="80">項目1</td>
<td width="80">項目1</td>
<tr>
<tr bgcolor="white">
<td>項目2</td>
<td>項目2</td>
<tr>
</table>
ちなみにcellspacingを記述しないとデフォルトで2pxが設定されています。
cellspacing="1px"を消すと2pxの太さの罫線が現れます。
これはtableタグで表全体色をbgcolor="#a9a9a9"を設定しており、各セルの色はwhiteなので
cellspacingにて設定された隙間に#a9a9a9の色が見えるようなっています。
bgcolor="#a9a9a9" cellspacing="1px" 双方を消すと2px隙間が確認できます。
罫線の色を変えたい場合tableタグのbgcolor="#a9a9a9"の色コードを変えると変更することができます。