CSSを使用してHTML表に内部罫線を追加する

CSSとHTMLの表が混在していないと聞いたことがあります。これはそうではありません。はい.HTML表をレイアウトに使用することは、CSSレイアウトスタイルに置き換えられているため、ウェブデザインのベストプラクティスではなくなりましたが、ウェブページに表形式のデータを追加するための表は引き続き正しいマークアップです。

多くのWebプロフェッショナルはテーブルから離れているので、何の問題もないと思っているので、多くの専門家がこの共通のHTML要素を使った経験はほとんどなく、Webページの表のセルに内部線を追加する必要があります。

CSS表の境界線

CSSを使用して表に罫線を追加すると、表の外側にのみ枠線が追加されます。その表の個々のセルに内部線を追加する場合は、内部CSS要素に罫線を追加する必要があります。 HRタグを使用して、個々のセル内に行を追加することができます。

このチュートリアルで扱うスタイルを適用するには、Webページ上にテーブルが必要です。次に、文書の先頭にスタイルシートを作成します（単一ページのみを扱う場合）。または、外部スタイルシートとして文書に添付します（サイトに複数のページがある場合）。内部線をスタイルシートに追加するために、スタイルを配置します。

あなたが始める前に

テーブルに行を表示する場所を決めます。いくつかのオプションがあります：

• グリッドを形成するためにすべてのセルを囲む
• 列の間に線を配置する
• ちょうど列の間
• 特定の列または行の間。

個々のセルの周りまたは個々のセルの内側に線を配置することもできます。

テーブル内のすべてのセルの周りに線を追加する方法

テーブル内のすべてのセルに線を追加し、グリッドエフェクトを作成するには、スタイルシートに次の行を追加します。

td、th {国境：固体1px黒;}

テーブルの列間に行を追加する方法

列の間に行を追加して、表の列の上から下に向かって縦線を作成するには、スタイルシートに次の行を追加します。

td、th {border-left：ソリッド1pxブラック。}

最初の列に縦線が表示されないようにするには、 th そして td 細胞。この例では、 国境がない これらのセルにCSSルールを適用して枠線を削除します。使用するHTMLクラスは次のとおりです。

class = "no-border">

次に、次のスタイルをスタイルシートに追加します。

。国境がない {ボーダー - 左：なし;}

テーブルの行間だけに行を追加する方法

列間に行を追加する場合と同様に、行間に横線を追加するには、次のように1つの単純なスタイルをスタイルシートに追加します。

tr {border-bottom：ソリッド1pxブラック。}

境界線をテーブルの下から削除するには、もう一度そのクラスを追加します

タグ：

class = "no-border">

スタイルシートに次のスタイルを追加します。

。国境がない {border-bottom：none;}

テーブル内の特定の列または行の間に行を追加する方法

特定の行または列の間だけに行が必要な場合は、それらのセルまたは行でクラスを使用する必要があります。列間に行を追加するのは、その列内のすべてのセルにクラスを追加する必要があるため、行間よりも少し困難です。あなたのテーブルが何らかのCMSから自動的に生成された場合、これは可能ではないかもしれませんが、ページを手作業でコーディングする場合は、必要に応じて適切なクラスを追加してこの効果を得ることができます。

class = "side-border">

行間に行を追加する方が簡単です。行を追加する行にクラスを追加できるからです。

class = "border-bottom">

次に、スタイルシートにCSSを追加します。

.border-side {border-left：ソリッド1pxブラック。}.border-bottom {border-bottom：ソリッド1pxブラック。}

テーブル内の個々のセルの周りに線を追加する方法

個々のセルの周りに線を追加するには、境界線を付けたいセルにクラスを追加します。

class = "border">

次に、スタイルシートに次のCSSを追加します。

.border {国境：固体1px黒;}

テーブル内の個々のセルの内部に線を追加する方法

セルの内容の中に行を追加したい場合は、これを行う最も簡単な方法は、水平のルールタグ（).

役に立つヒント

境界線に隙間がある場合は、境界崩壊スタイルがテーブルに設定されていることを確認してください。あなたのスタイルシートに以下を追加してください：

テーブル{国境崩壊：崩壊。}

すべてを避けて、テーブルタグのborder属性を使用することができます。ただし、この属性は非推奨ではありませんが、境界線の幅のみを定義することができ、表のすべてのセルに含めることができます。