```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-top
、border-right
、border-bottom
、border-left
プロパティを使用して、表示したい枠線だけを設定します。
```