2012年10月20日

COLGROUP要素 表の列をグループ化

スポンサード リンク

 tableの列をグループ化し、スタイルをまとめて指定
<colgroup></colgroup>

COLGROUPに対する
CSSプロパティの有効、無効
プロパティIE6,7Firefox12
background
width
padding×
text-align×
font-weight×
color×

サンプルソース


<html>
<head>
<title>COLGROUP要素 表の列をグループ化</title>
<style type="text/css">
<!--

 #colTbl{ 
       border-collapse:collapse; /*枠線の表示の仕方*/
          }
 #colTbl th{
          background-color: #dbfeab; /*th 背景色*/
             }
 #colTbl td,th{
            border:1px solid gray;/*th,tdのボーダー*/
             padding: 5px; /*セル内余白*/
                }
.colG1{
      background-color: lavender;
       width: 120px;
          }
.colG2{
     background-color: lightcyan;
          }

-->
</style>
</head>
<body>
<table id="colTbl">
 <caption>COLGROUPに対する<br>CSSプロパティの有効、無効</caption><!--表題-->
  <colgroup class="colG1"></colgroup><!--1列目-->
  <colgroup class="colG2" span="2"></colgroup><!--2列,3列目グループ化-->
 <tbody>
  <tr>
   <th>プロパティ</th><th>IE6,7</th><th>Firefox12</th>
  </tr>
  <tr>
   <td>background</td><td>○</td><td>○</td>
  </tr>
  <tr>
   <td>width</td><td>○</td><td>○</td>
  </tr>
  <tr>
   <td>padding</td><td>○</td><td>×</td>
  </tr>
  <tr>
   <td>text-align</td><td>○</td><td>×</td>
  </tr>
  <tr>
   <td>font-weight</td><td>○</td><td>×</td>
  </tr>
  <tr>
   <td>color</td><td>○</td><td>×</td>
  </tr>
 </tbody>
</table>
</body>
</html>
colgroup 要素
 表の列(縦方向)をグループ化して、
列単位でCSS(スタイル)を一括して適用したいときに使用します。
また、隣接する複数の列をグループ化する場合はその列数を、span属性で指定します。
<colgroup>を書く位置は<table><caption> の直後に
<caption>がなければ<table>の直後に記載 します。
span="値" 属性
 値には何列を指定するか数字をいれます。span="グループ化する列数"
記載なしの場合は1を指定したことになります。
colgroup に対する CSSプロパティの有効、無効
 上記のサンプルの表をご覧ください。
表の装飾によく利用するプロパティをcolgroup要素に指定して見ました。
  • Firefoxは text-align,font-weight,color などフォント系の装飾が無効ですが
  • IE6,7は有効になっています。//仕様が正しくない。
  • background,widthは IE, Firefox 両方で有効です。
 これらを考え併せると
th,tdの親要素はtbodyやtrでありcolgroupではないのでプロパティ継承はされないので
colgroupに指定したtext-align,などの値はth,tdの中の文字列には反映されません。
 表の構造は 表題,行,セルから成り立っていますが、
そのセルの幅 widthや背景 backgroundには適用されると考えるのが妥当でしょう........
<colgroup> CSSの優先順位
<tbody>や<tr>,<tr>,<th>にスタイルを設定した場合、<colgroup>の設定より
優先されます。上記のサンプルでは<th>(一行目)に背景色を指定しているので
<colgroup>の背景色の設定の反映は二行目からになります。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
javascript テーブル 列の背景色 変更 cellIndexプロパティ
text-align プロパティ css
borderプロパティ css
border-styleプロパティ; ボーダーのスタイルの設定
background 背景に関するプロパティ 一覧
border-radiusプロパティ 角丸ボーダー
paddingプロパティ ボックスの内側の余白

タグ:colgroup TABLE
posted by javaScript at 19:47 | 大阪 ☀ | テーブル | このブログの読者になる | 更新情報をチェックする

2012年10月15日

javascript 日付から曜日を取得

スポンサード リンク

 あの日は何曜日??
new Date() Dateオブジェクト,getDay() メソッド

貴方は自分の誕生日や結婚記念日の曜日を知っていますか?
知らない方が結構多いのではないのでしょうか.......さあ、調べてみましょう。

年、月、日を入力してください。(半角数字)

西暦:年  月 


heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース


<html>
 <head>
<title>あの日は何曜日??</title>
<script language="JavaScript">
<!--
function getYobi(){
 myY=document.getElementById("hogeY").value; //入力した年の値 取得
 myM=document.getElementById("hogeM").value; //月の値 取得
 myD=document.getElementById("hogeD").value; //日の値 取得

   myDay = new Array( "日","月","火","水","木","金","土" ); //配列オブジェクトを生成
   myDate = new Date( myY,myM-1,myD); //指定した時刻を表す日付オブジェクトを作成
   myWeek = myDate.getDay(); //曜日の番号取得
document.getElementById("youbiBox").innerHTML= 
 "<br>指定した(年月日)は"+ myDay[myWeek] //番号から曜日の文字取得
 + "曜日です。番号="+myWeek;
       }
// -->
</script>
</head>
<body>
<form>
年、月、日を入力してください。(半角数字)<br>
<br>
西暦:<input type="text" size="7" value="2013" id="hogeY">年 
<input type="text" size="2" value="1" id="hogeM">月 
<input type="text" size="2" value="1" id="hogeD">日
<br><br>
<input type="button" value=" 取得 " onclick="getYobi()">
<div id="youbiBox"></div>
</form>
</body>
</html>
<!--<form>の装飾の設定は省略しています。-->
new Date(**) Dateオブジェクト
日付および時刻を格納しておくオブジェクトです。(日付オブジェクト)
月の指定は 0〜11 になります (1月が 0 )。;
myDate = new Date(2013,0,1);

パラメータを省略した場合は現在の時刻となります。
myDate = new Date();            
getDay();メソッド
new Date();に格納されている時間の日付の曜日を番号で返します。
getDay メソッドの戻り値は、曜日を表す 0 〜 6 の数値です。
   曜日と番号の対応
0 1 2 3 4 5 6
myWeek = myDate.getDay();曜日を表す数値を取得して
myDay[myWeek]で、数値に合致した曜日の文字を取り出します。 

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
日付オブジェクト.toLocaleString();を使った時計
日付表示 toLocaleString メソッド ページを開いたとき現在の時刻を表示
日付 カウントダウン リアルタイム表示
指定日まであと何日?指定日から今日まで何日経った?

posted by javaScript at 10:59 | 大阪 ☀ | 日付 時刻 時計 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。