<< 【MySQL】文字列切り出し | main | 地震一過? >>

スポンサーサイト

  • 2009.06.05 Friday
  • -
  • -
  • -
  • by スポンサードリンク

一定期間更新がないため広告を表示しています


【html】カンタンテーブルレイアウト【css】

ここ最近はhtmlをやる事が多いのですが、基本的な事にもかかわらず出来てなかったり、出来てもやけに遠回りな事が多いです(´・ω・`)
そんな感じでいつもながらに四苦八苦だが、一応メモ程度に書いておきます。

これがhtmlソース例。

<table class="palette">
<tbody>
<tr>
<th>赤</th>
<th>青</th>
<th>緑</th>
<th>黒</th>
</tr>
<tr>
<td>#ff0000</td>
<td>#0000ff</td>
<td>#00ff00</td>
<td>#000000</td>
</tr>
</tbody>
</table>

んで、こっちがcss。

.palette{
margin: 0 auto;
border-collapse: collapse;
border: 1px solid #CCC;
}


.palette th{
width: 90px;
color: #b22222;
font-size: 12px;
font-weight: bold;
text-align: left;
border: 1px solid #CCC;
background-color: #f8f8f8;
padding: 5px;
margin: 0;
}


.palette td{
width: 45px;
color: #b22222;
font-size: 12px;
font-weight: bold;
text-align: right;
border: 1px solid #CCC;
padding: 5px;
margin: 0;
}


テーブルのクラスにborder-collapseを指定すると、わざわざtdやthにクラスを付けて、border-rightやらleftやら指定しなくてもボーダーが付けられるようになるそうです。
てかこうして書いてみると、いかに自分が変にめんどくさい作業していたかが分かります(^ω^;)
自分が求めてる情報を上手く、色々検索が出来るようになりたいです。

スポンサーサイト

  • 2009.06.05 Friday
  • -
  • 13:05
  • -
  • -
  • by スポンサードリンク

コメント
コメントする









calendar
   1234
567891011
12131415161718
19202122232425
262728293031 
<< March 2017 >>
スカウター : moz'B
links
others
selected entries
categories
archives
recent comment
   
sponsored links
recommend
profile
search this site.
others
mobile
qrcode
powered
無料ブログ作成サービス JUGEM