テーブル

5-1 テーブルの表示

テーブルの概念


テーブルのタグ内ではなく、cssで指定すれば、ページ内、サイト内のテーブルの横幅を一括で変換できます。 %指定も可能です。 付属の属性table-layout: fixed;一行目を読み込んだらすぐにセル幅を計算するので、表示が早いのも特徴です。
注意:書き出したスタイルシートの範囲すべてのtableが定義されます。
サンプル 1 ソースコード 1

css→tableに関する記述
  1. 幅指定
html→tableに関する記述
  1. 罫線に1pxの指定
 
table{
width: 300px;
table-layout: fixed;
}
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
サンプル 2   ソースコード 2
 
table{
width: 300px;
table-layout: fixed;
}
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
 スタイル定義   適用
 
テーブルタグ内にはwidthがないのに、2つの表の横幅がそろっています。

5-2 外枠

テーブルのタグ内ではなく、cssで指定 border-collapse: collapse;は隣の枠線と重ねて表示します。(セル同士の間に余白を挟まない)
サンプル 1 ソースコード 1


css→tableに関する記述
  1. 水色の罫線2px実線指定
  2. 枠線の重ね表示
html→tableに関する記述
  1. 罫線に1pxの指定
 
table {
border: 2px #33ffff solid;
border-collapse: collapse;
}
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
サンプル 2   ソースコード 2
 
table {
border: 2px #33ffff solid;
border-collapse: collapse;
}
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
 スタイル定義   適用
 
テーブルタグ内にはborderの指定がない定義になります。 外枠の指定だけなので、内側の線がデフォルトになっています。覚えておくと表組みを作るときに便利でしょう。
関連
ボックス 4-3 枠線参照
注意:書き出したスタイルシートの範囲すべてのtableが定義されます。

5-3 枠線

テーブルのタグ内ではなく、cssで指定する方法です。 縦線、横線を別に指定できる定義です。
サンプル 1 ソースコード 1

css→tableに関する記述
  1. 横幅に300px指定
css→tr,thに関する記述
  1. 罫線に1px、赤の実線指定
html→table
  1. 罫線に1pxの指定
 
table {
width: 300px;
}
td, th {
border: 1px #ff0000 solid;
}
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
サンプル 2   ソースコード 2
 
table {
width: 300px;
}
td, th {
border: 1px #ff0000 solid;
}
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
 スタイル定義   適用
 
テーブルタグ内にはborderの指定がない定義になります。
関連
ボックス 4-3 枠線参照
注意:書き出したスタイルシートの範囲すべてのtd, thが定義されます。

5-4 余白

テーブルのタグ内ではなく、cssで指定 テーブルのまわりの余白はtablemarginを指定する定義です。 セルと枠線の間はtd.thpaddingを指定します。 ただし、セルとセルとの間はIEで有効なcssがないので、HTMLで指定します。
サンプル 1 ソースコード 1
tableに関する記述
  1. 罫線に紫の実線指定
  2. 横幅に300px指定
  3. 外側下の余白に20pxの指定
tr,thに関する記述
  1. 内側の余白に10pxの指定
  2. 罫線に1px、黒の実線指定
 
table {
border: 2px #990099 solid;
width: 300px;
margin-bottom: 20px;
}
td, th {
padding: 10px;
border: 1px #000000 solid;
}
<table cellspacing="0" class="css5-4-1">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
サンプル 2   ソースコード 2
css→tableに関する記述
  1. 罫線に紫の実線指定
  2. 横幅に300px指定
  3. 外側下の余白に20pxの指定
css→tr,thに関する記述
  1. 内側の余白に10pxの指定
  2. 罫線に1px、黒の実線指定
html→tableに関する記述
  1. セル間隔に5pxの余白指定
 
table {
border: 2px #990099 solid;
width: 300px;
margin-bottom: 20px;
}
td, th {
padding: 10px;
border: 1px #000000 solid;
}
<table cellspacing="5" class="css5-4-2">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
 スタイル定義   適用
 
関連
ボックス 4-1 余白参照
注意:書き出したスタイルシートの範囲すべてのtd, thが定義されます。

5-5 背景

テーブル全体に背景を配置する定義です。 色や画像を背景につけることができます。
サンプル 1 ソースコード 1
css→tableに関する記述
  1. 横幅に300px指定
  2. 外側下の余白に20pxの指定
css→tr,thに関する記述
  1. 内側の余白に10pxの指定
  2. 罫線に1px、黒の実線指定
html→tableに関する記述
  1. セル間隔に0pxの余白指定
 
table {
width: 300px;
margin-bottom: 20px;
}
td, th {
padding: 10px;
border: 1px #000000 solid;
}
<table cellspacing="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
サンプル 2   ソースコード 2
css→tableに関する記述
  1. 横幅に300px指定
  2. 外側下の余白に20pxの指定
css→tr,thに関する記述
  1. 内側の余白に10pxの指定
  2. 罫線に1px、黒の実線指定
css5-5-1に関する記述
  1. 背景イメージを配置
html→tableに関する記述
  1. セル間隔に0pxの余白指定
  2. テーブルの背景にcss5-5-1により背景画像配置
 
table {
width: 300px;
margin-bottom: 20px;
}
td, th {
padding: 10px;
border: 1px #000000 solid;
}
.css5-5-1{
background-image: url(image/5_5_1.gif);
}
<table cellspacing="0" class="css5-5-1">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
 スタイル定義   適用
 
関連
4-2 背景に画像を使う参照
注意:書き出したスタイルシートの範囲すべてのtd, thが定義されます。

5-6 セルの背景

セルに背景を配置する定義です。
サンプル 1 ソースコード 1

css5-6-1に関する記述
  1. 背景色にブルーを指定
html→tableに関する記述
  1. 上部td2つの背景色をcss5-6-1で指定
 
.css5-6-1{
background-color: #99ffff;
}
<table cellspacing="0">
<tr>
<td class=
"css5-6-1"></td>
<td class=
"css5-6-1"></td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
サンプル 2   ソースコード 2
css5-6-2に関する記述
  1. 背景に画像を指定
html→tableに関する記述
  1. 上部td2つの背景色をcss5-6-2で指定
 
.css5-6-2{
background-image: url(image/5_5_1.gif);
}
<table cellspacing="0" class="css5-5-1">
<tr>
<td class=
"css5-6-2"></td>
<td class=
"css5-6-2"></td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
 スタイル定義   適用
 
関連
ボックス4-2 背景に画像を使う参照
注意:書き出したスタイルシートの範囲すべてのtd, thが定義されます。