HTML テーブルマークアップチュートリアル (48): CSS で変更されたテーブル

<br />では、CSS 構文を巧みに使用してテーブルを美しくする方法を見てみましょう。注意: 特に明記しない限り、この記事の例に挿入されている表のセル間隔、セルパディング、および境界線の値はすべて 0 です。例1: 1pxテーブル

1px テーブルの作成に熱心な人が多く、さまざまな方法が考案されています。CSS を使用すると、はるかに柔軟になります。 1x1 1px のテーブルを作成する場合は、境界線の値を定義するだけです。まず、Dreamweaver を使用して幅 50 の 1x1 テーブルを挿入し、次にテーブルまたはテーブルの td にborder:1 solid tealを定義します。テーブルの効果は次のようになります。

しかし、1x1 以外のテーブル (2x2 など) を作成する場合は少し面倒です。td スタイルの border:1 solid teal を直接定義すると、表示効果が次のようになるためです。

表の外側のフレームは 1px ですが、内側のフレームは 2px になっていることがわかります。これは重ね合わせによるものです。この問題を解決するには、次のようにします。
まず、td: border:#cc0000 solid;border-width:0 1 1 0のスタイルを定義します。表は次のようになります。

次に、テーブルのスタイルを定義します: border:#cc0000 solid;border-width:1 0 0 1 。これにより、完全な 1 ピクセルのテーブルを作成できます。
例2: 太い境界線のある1pxの表

この表の内側のグリッドは 1px で、外側の境界線は 3px です。例 1 を土台にすれば、作成は難しくありません。border-width の値を変更するだけです。
テーブルに使用されるスタイルコードはborder:blue solid;border-width:3 2 2 3で、tdに使用されるスタイルコードはborder:blue solid;border-width:0 1 1 0です。例3: 破線ボックステーブル

方法は例 1 と似ていますが、境界線のスタイルを実線から破線に変更します。テーブルに使用されるスタイルコードはborder:black dashed;border-width:1 0 0 1で、tdに使用されるスタイルコードはborder:black dashed;border-width:0 1 1 0です。例4: 点線の境界線のテーブル

点線の最小ピクセルサイズは2であることに注意してください。テーブルに使用されるスタイルコードは、 border:green dotted; border-width:2 0 0 2です。tdに使用されるスタイルコードは、 border:green dotted; border-width:0 2 2 0です。例5: 二重線の境界線テーブル

二重線の最小ピクセルサイズは3であることに注意してください。テーブルに使用されるスタイルコードは、 border:teal 4 double 、tdに使用されるスタイルコードは、 border:teal 1 solidです。例6：アウトセットテーブル

テーブルに使用されるスタイルコードはborder: 3 outsetで、tdに使用されるスタイルコードはborder: 1 solidです。例 7: インセットフレームテーブル

テーブルに使用されるスタイルコードはborder: 3 insetで、td に使用されるスタイルコードはborder: 1 solidです。例 8: リッジフレームテーブル

テーブルに使用されるスタイルコードは次のとおりです: border:#ee0000 3 ridge tdに使用されるスタイルコードは次のとおりです: border: 1 solid

前のページ1 2 3 次のページ続きを読む

<<: jQueryブリージングカルーセルの制作原理を詳しく解説

>>: MYSQL での Truncate の使用法の詳細な説明