ホーム＞コース別ガイド一覧＞表に枠線を表示しよう！
表に枠線を表示しよう！（table要素のborder属性） |
  
|
使用タグ <table border="枠線の太さ">〜</table>
HTML一覧タグ辞典 … <table> タグ
<table> タグの border 属性を使えば、表の枠線の太さを指定できます。値にはピクセル数を表す数値を指定します。
使用例
table 要素は border 属性を指定しないと枠線が表示されません。表としては見づらくなる場合がありますので、通常は border 属性を指定しましょう！
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table border="1">
<tr>
<td>１行目、１つ目のセル</td>
<td>１行目、２つ目のセル</td>
<td>１行目、３つ目のセル</td>
</tr>
<tr>
<td>２行目、１つ目のセル</td>
<td>２行目、２つ目のセル</td>
<td>２行目、３つ目のセル</td>
</tr>
<tr>
<td>３行目、１つ目のセル</td>
<td>３行目、２つ目のセル</td>
<td>３行目、３つ目のセル</td>
</tr>
</table>
</body>
</html> |
|
使用例の表示
[table要素にborder属性を入力後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
| １つ目の見出しセル |
３つ目の見出しセル |
３つ目の見出しセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、１つ目のセル |
３行目、２つ目のセル |
３行目、３つ目のセル |
|
<table border>は古い記述 ？！
この記述方法を見たことがあるという人は多いかもしれませんが（当サイトでもこのように記述をしている）、実は、これは古い記述方法です。<table border>は<table frame="border" rules="all">を省略したものですが、ほとんどのWebサイトではまだこの記述です。 当サイトでは、この項目をはぶいていますが、まずは省略された記述で枠線を指定してもかまいません。余裕ができた場合に学んでみるのもいいでしょう。
関連情報ページ |
|
このタグによく使われるCSS |
|
|
|
|
その他 |
|
|
|
