僕の世界観を変えてみる

比較的簡単なHTMLでWebサイトを作ってみるのでその過程を綴っていいたいと思っています。

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

f:id:htmllifehack:20150813163030j:plain

 

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

表を作る際は<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>は表のタイトル部分に使うみたいですね。

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

 

f:id:htmllifehack:20150813164638j:plain

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

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

 

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

f:id:htmllifehack:20150813172634j:plain

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

f:id:htmllifehack:20150813172801j:plain

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

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

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

これのWがwidthです。

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

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

 

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

f:id:htmllifehack:20150813173735j:plain

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

f:id:htmllifehack:20150813173840j:plain

こうなります。

 

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です。

 

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

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

 

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