プログラミング覚え書き

WEB製作覚え書き

ノート代わりに勉強した内容をまとめています。

CSS:テーブルのスタイルを定義

 

文字サイズを定義

要素名{

  font-size:値;

}

※要素名は、teble td th を指定する。

 

背景色を定義

要素名{

  background-color:値;

}

※要素名は、teble td th を指定する。

 

背景画像を定義

要素名{

  background-image:url(画像パス);

}

※要素名は、teble td th を指定する。

 

文字色を定義

要素名{

  color:値;

}

※要素名は、teble td th を指定する。

 

枠線を定義

要素名{boder-style:値;}(必須)

要素名{border-width:値;}

要素名{border-color:値;}

※要素名は、teble td th を指定する。teble を指定した場合、外枠に適用される。

一括指定例

要素名{

  border:solid 10px #000;

}

 

枠線の隙間をなくす

table{

  border-collpase:値;

}

 ※要素名は、teble  を指定する。

 

collapse:隣接する枠線を重ねて表示

seperete:隣接する枠線の間隔をあけて表示

 

セル余白を定義

要素名{

  padding:●px ●px ●px ●px;

}

※要素名は、td th を指定する。

 

幅を定義

要素名{

  width:値;

}

※要素名は、teble td th を指定する。

 

列幅を決定する方法を定義

table{

  table-layout:値;

}

auto 列幅は表組みの幅とセルの内容に合わせて自動的に調整されます。
fixed 列幅はwidthプロパティで指定した値で固定されて表示されます。指定がない列の列幅は、表組みの残りの幅に合わせて均等に分割されます。

 

高さを定義

要素名{

  height:値;

}

※要素名は、teble td th を指定する。

 

セル内の行揃えを定義

要素名{

  text-align:値;

}

※要素名は、teble td th を指定する。

left    right   senter

 

セル内の縦方向揃え位置を定義

要素名{

  vertical-align:値;

}

※要素名は、td th を指定する。

baseline(親要素のベースラインに揃える)   top   mddle   bottom

 

テキスト折り返しを禁止する

要素名{

  white-space:値;

}

※要素名は、teble td th を指定する。

normal(初期値)

連続する半角スペースやタブ、改行を1つの半角スペースとして表示し、要素に大きさが指定されている場合は、その大きさに応じて自動的に改行する。

nowrap

連続する半角スペースやタブ、改行を1つの半角スペースとして表示し、要素に大きさが指定されていても自動改行しない。

pre

連続する半角スペースやタブ、改行をそのまま表示し、要素に大きさが指定されていても自動改行しない。