表は<table>タグで作成する！

今回は表を作っていきます。

表を作る際は<table></table>を用いるんですが、これ実は僕職場で使ったことがあります。本業の質屋では商品をオークションに出品して売買することもあるのでその際見栄えをよくしようと考えて<table>を使いました。

ではやっていきましょう。

<table>
<caption>本日の相場</caption>
　<tr>
　　<th>金</th>
　　<td>4,736円　前日比+72</td>
　</tr>
　<tr>
　　<th>プラチナ</th>
　　<td>4,242円　前日比+135</td>
　</tr>
　<tr>
　　<th>銀</th>
　　<td>63円　前日比+3<td>
　</tr>
</table>

こんな感じです。

<caption>は表のタイトル部分に使うみたいですね。

じゃこれをブラウザで表示してみます。

なんか・・・思ってたのと違う。

オークションに出品するときはborderとかcellspaceとかなんかいろいろ書き込んだんですけど、とりあえず本には今はこれだけでいいみたいです。次のCSSで装飾して線を作っていくみたいでね。安心した。

オークションに出品するときはこう書いていました。

これをブラウザで表示するとこうなります。

border=1　は1pxの太さの線を引くって意味ですたぶん。

width=auto　これは横幅を自動で設定するって意味です。

よくバッグのサイズでW20㎝×H15㎝×D6㎝のように書かれていますよね。

これのWがwidthです。

cellspacing=0　これは線の内側にスペースを作るかどうかってことらしいんですが、０を１に帰ると1px分の空白ができます。

cellpadding=1　これはスペルミスで反映されていませんが、この商品は～の部分に上下左右に1px分スペースを空けるって意味です。

わかりづらいので数字を変えてみます。

borderを4、widthを900、cellspacingを2、cellpaddingを30に変更すると

こうなります。

bgcolor=#EE1199　これはバックグラウンドカラーの略で背景色の指定です。

色はRGBを16進数で指定します。？日本語が変です。

色を指定する場合最初に＃をつけます。

1，2文字目でR（赤）の濃淡を、3、4字目でG（緑）の濃淡を、5，6文字目でB（青）の濃淡を変えられます。

0になるにつれて黒く、Fになるにつれて白く変化していきます。

＃000000にすると真っ黒、＃FFFFFFにすると真っ白になります。

今回の場合背景色はピンクなので、Rを強めのEE、Gはいらないけど少し入れて11、BはRよりも弱めで99、でEE1199です。

カラーパレットってググるといろいろでてきますのできれいな色を探せますよ。

とまあ知ってるところだけ得意げに解説しました笑

次はアウトラインを理解しよう？とかセクションタグを挿入する？とかいう章をやっていきます。