HTML で境界線付きのテーブルを作成する方法は?

```html

HTMLで表に枠線を付ける方法

HTMLで表に枠線を付ける方法

HTMLで表を作成する際、枠線を付ける方法はいくつかあります。この記事では、最も簡単な方法と、枠線の太さやスタイルをカスタマイズする方法について解説します。

TABLEタグのBORDER属性

<TABLE>タグのBORDER属性を使用すると、枠線の太さをピクセル単位で指定できます。2ピクセルの枠線を持つ表を作成するには、<TABLE>タグにBORDER="2"を追加します。


<table border="2">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

上記コードの結果は以下の通りです。

見出し1 見出し2
データ1 データ2

枠線を非表示にするには、BORDER属性を0に設定します。


<table border="0">
  <!-- 表の内容 -->
</table>

CSSを使った枠線のカスタマイズ

CSSを使用すると、枠線の太さ、スタイル、色をより細かく制御できます。例えば、以下のCSSは、表とセルの枠に1ピクセルの実線を設定し、色は黒に設定します。


<style>
table {
  border-collapse: collapse;
  border: 1px solid black;
}

td, th {
  border: 1px solid black;
}
</style>

上記CSSを適用した表は以下のようになります。

見出し1 見出し2
データ1 データ2

Q&A

Q1: 枠線の太さを変更するにはどうすればよいですか?

A1: BORDER属性の値を変更するか、CSSでborder-widthプロパティを使用します。

Q2: 枠線を点線に変更するにはどうすればよいですか?

A2: CSSでborder-styleプロパティをdottedに設定します。

Q3: 表の一部の枠線だけを表示するにはどうすればよいですか?

A3: CSSでborder-topborder-rightborder-bottomborder-leftプロパティを使用して、表示したい枠線だけを設定します。

```