HTMLのtable要素のborderとは?

HTML テーブル要素のボーダーについて

HTMLで表を作成する際に使用する`table`要素ですが、シンプルに記述しただけだと、ブラウザ上では罫線が表示されません。罫線を表すにはCSSを使用するのが一般的ですが、`table`要素には、罫線の表示を制御するための属性が存在します。それが`border`属性です。

border属性

`table`要素に `border=""` を追加すると、表の外枠の太さを指定することができます。

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

この属性の値に 1 以上を指定すると、全ての罫線(外枠と内罫線)が表示されます。数値が大きくなるほど外枠は太くなり、 0 を指定すると全ての罫線が表示されなくなります。

border属性の値と表示例

以下の表は、`border`属性の値と、ブラウザ上での表示例を示しています。

border 属性の値 表示例
border="0"
見出し1 見出し2
データ1 データ2
border="1"
見出し1 見出し2
データ1 データ2
border="2"
見出し1 見出し2
データ1 データ2

注意点

`border`属性は、HTML5では非推奨となっており、代わりにCSSを使用することが推奨されています。ただし、簡単な表を作成する際や、HTML4以前の互換性を保つ必要がある場合には、`border`属性を使用することも可能です。

関連QA

Q1: border属性で罫線のスタイルを変更することはできますか?

A1: いいえ、`border`属性では罫線のスタイル(実線、点線など)を変更することはできません。罫線のスタイルを変更するには、CSSを使用する必要があります。

Q2: border属性で特定の罫線だけを表示することはできますか?

A2: いいえ、`border`属性では特定の罫線だけを表示することはできません。特定の罫線だけを表示するには、CSSを使用する必要があります。

Q3: CSSで罫線を設定する場合、border属性はどのように影響しますか?

A3: CSSで罫線を設定した場合、`border`属性の設定よりもCSSの設定が優先されます。そのため、CSSで罫線を設定する場合は、`border`属性は無視されます。