テーブルの概念 テーブルのタグ内ではなく、cssで指定すれば、ページ内、サイト内のテーブルの横幅を一括で変換できます。 %指定も可能です。 付属の属性table-layout: fixed;一行目を読み込んだらすぐにセル幅を計算するので、表示が早いのも特徴です。 注意:書き出したスタイルシートの範囲すべてのtableが定義されます。 |
サンプル 1 | ソースコード 1 | |||||||
|
table{
width: 300px; table-layout: fixed; } <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> |
|||||||
サンプル 2 | ソースコード 2 | |||||||
|
table{
width: 300px; table-layout: fixed; } <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> |
スタイル定義 適用 |
テーブルのタグ内ではなく、cssで指定 border-collapse: collapse;は隣の枠線と重ねて表示します。(セル同士の間に余白を挟まない) |
サンプル 1 | ソースコード 1 | |||||||
|
table {
border: 2px #33ffff solid; border-collapse: collapse; }
<table border="1" cellspacing="0" cellpadding="0">
<tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> |
|||||||
サンプル 2 | ソースコード 2 | |||||||
|
table
{
border: 2px #33ffff solid; border-collapse: collapse; }
<table border="1" cellspacing="0" cellpadding="0">
<tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> |
スタイル定義 適用 |
関連 |
ボックス 4-3 枠線参照 注意:書き出したスタイルシートの範囲すべてのtableが定義されます。 |
テーブルのタグ内ではなく、cssで指定する方法です。 縦線、横線を別に指定できる定義です。 |
サンプル 1 | ソースコード 1 | |||||||
|
table {
width: 300px; } td, th { border: 1px #ff0000 solid; } <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> |
|||||||
サンプル 2 | ソースコード 2 | |||||||
|
table {
width: 300px; } td, th { border: 1px #ff0000 solid; } <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> |
スタイル定義 適用 |
関連 |
ボックス 4-3 枠線参照 注意:書き出したスタイルシートの範囲すべてのtd, thが定義されます。 |
テーブルのタグ内ではなく、cssで指定 テーブルのまわりの余白はtableにmarginを指定する定義です。 セルと枠線の間はtd.thにpaddingを指定します。 ただし、セルとセルとの間はIEで有効なcssがないので、HTMLで指定します。 |
サンプル 1 | ソースコード 1 | ||||||||
|
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>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> |
||||||||
サンプル 2 | ソースコード 2 | ||||||||
|
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>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> |
スタイル定義 適用 |
関連 |
ボックス 4-1
余白参照 注意:書き出したスタイルシートの範囲すべてのtd, thが定義されます。 |
テーブル全体に背景を配置する定義です。 色や画像を背景につけることができます。 |
サンプル 1 | ソースコード 1 | ||||||
|
table {
width: 300px; margin-bottom: 20px; } td, th { padding: 10px; border: 1px #000000 solid; } <table cellspacing="0"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> |
||||||
サンプル 2 | ソースコード 2 | ||||||
|
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>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> |
スタイル定義 適用 |
関連 |
4-2 背景に画像を使う参照 注意:書き出したスタイルシートの範囲すべてのtd, thが定義されます。 |
セルに背景を配置する定義です。 |
サンプル 1 | ソースコード 1 | ||||||
|
.css5-6-1{
background-color: #99ffff; } <table cellspacing="0"> <tr> <td class="css5-6-1">1</td> <td class="css5-6-1">2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> |
||||||
サンプル 2 | ソースコード 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">1</td> <td class="css5-6-2">2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> |
スタイル定義 適用 |
関連 |
ボックス4-2 背景に画像を使う参照 注意:書き出したスタイルシートの範囲すべてのtd, thが定義されます。 |
©2006 WEB DESIGN STUDIO Powered by VISUAL LITERACY |