わずか5分でCSSテーブルの境界線を作成する方法を学ぶ
CSSとHTMLの表が混在していないと聞いたことがあります。 これは単に真実ではありません。 はい、 HTML表をレイアウト用に使用することは、Webデザインのベストプラクティスではなくなっています。CSSレイアウトスタイルに置き換えられましたが、表はWebページに表形式のデータを追加するための正しいマークアップです。
残念ながら、多くのWebプロフェッショナルが彼らが毒であると考えているテーブルから離れているので、多くのプロフェッショナルはこの共通のHTML要素とウェブページでそれらを処理する必要がある苦労の経験はほとんどありません。 たとえば、ページに表があり、表のセルに内部行を追加する場合などです。
CSS表の境界線
CSSを使用して表に罫線を追加すると、表の外側にのみ枠線が追加されます。 その表の個々のセルに内部線を追加する場合は、内部CSS要素に罫線を追加する必要があります。 HRタグを使用して、個々のセル内に行を追加することもできます。
この記事で取り上げたスタイルを適用するには、明らかにあなたのウェブページにテーブルを置くべきです。 次に、文書の先頭に内部スタイルシートとしてスタイルシートを作成する必要があります（「サイト」が1ページの場合のみ）、または外部スタイルシートとして文書に添付されている可能性があります。あなたのサイトが複数のページである場合に行います - 1つの外部シートからすべてのページをスタイルすることができます）。 そのスタイルシートに内線を追加するためにスタイルを配置します。
あなたが始める前に
まず、テーブルに行を表示する場所を決める必要があります。 いくつかのオプションがあります：
- グリッドを形成するためにすべてのセルを包囲する;
- 列の間に線を配置する。
- 行の間だけ。 または
- 特定の列または行の間。
個々のセルの周りまたは個々のセルの内側に線を配置することもできます。
テーブル内のすべてのセルの周りに線を追加する方法
テーブル内のすべてのセルに線を追加し、そのグリッド様の効果を作成するには、以下をスタイルシートに追加します。
td、th {
国境：固体1px黒;
}
テーブルの列間に行を追加する方法
列の間に行を追加するには（テーブルの列の上から下に向かって縦線が作成されます）、スタイルシートに次の行を追加します。
td、th {
border-left：ソリッド1pxブラック。
}
その後、最初の列に表示したくない場合は、それらのthおよびtdセルにクラスを追加する必要があります。 この例では、これらのセルにno-borderのクラスがあると仮定し、このより具体的なCSSルールでボーダーを削除します。 ここで使用するHTMLクラスは次のとおりです。
class = "no-border">
そして、私たちのスタイルシートに以下のスタイルを追加することができます：
。国境がない {
ボーダー - 左：なし;
}
テーブルの行間だけに行を追加する方法
列間に行を追加する場合と同様に、スタイルシートに単純なスタイルを1つ追加するだけで、これを行うことができます。 以下のCSSは、テーブルの各行の間に垂直線を追加します：
tr {
border-bottom：ソリッド1pxブラック。
}
そして、テーブルの下からボーダーを削除するには、もう一度そのtrタグにクラスを追加します：
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黒;
}
テーブル内の個々のセルの内部に線を追加する方法
セルの内容の中に行を追加する場合、これを行う最も簡単な方法は水平のルールタグ（
）です。
役に立つヒント
あなたの国境に隙間がある場合は、あなたのテーブルに国境崩壊様式が設定されていることを確認する必要があります。 あなたのスタイルシートに以下を追加してください：
テーブル{
国境崩壊：崩壊。
}
あなたは上記のCSSのすべてを避けて、テーブルタグのborder属性を使用することができます。 しかし、境界線の幅を定義するだけで、表のすべてのセルの周りに配置することも、配置しないこともできるため、彼の属性は非推奨ではありませんが、CSSよりも柔軟性が低くなります。