Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>表に枠線を表示しよう!

表に枠線を表示しよう!(table要素のborder属性)

普通コースじっくりコースアイコンの説明 普通コースじっくりコースアイコンの説明

使用タグ <table border="枠線の太さ">〜</table>

HTML一覧タグ辞典 … <table> タグ

<table> タグborder 属性を使えば、表の枠線の太さを指定できます。値にはピクセル数を表す数値を指定します。

使用例

table 要素は border 属性を指定しないと枠線が表示されません。表としては見づらくなる場合がありますので、通常は border 属性を指定しましょう!

記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>

<table border="1">
<tr>
<td>1行目、1つ目のセル</td>
<td>1行目、2つ目のセル</td>
<td>1行目、3つ目のセル</td>
</tr>
<tr>
<td>2行目、1つ目のセル</td>
<td>2行目、2つ目のセル</td>
<td>2行目、3つ目のセル</td>
</tr>
<tr>
<td>3行目、1つ目のセル</td>
<td>3行目、2つ目のセル</td>
<td>3行目、3つ目のセル</td>
</tr>
</table>

</body>
</html>

 

使用例の表示

[table要素にborder属性を入力後のブラウザでの表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 3つ目の見出しセル 3つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、1つ目のセル 3行目、2つ目のセル 3行目、3つ目のセル

<table border>は古い記述 ?!

この記述方法を見たことがあるという人は多いかもしれませんが(当サイトでもこのように記述をしている)、実は、これは古い記述方法です。<table border>は<table frame="border" rules="all">を省略したものですが、ほとんどのWebサイトではまだこの記述です。 当サイトでは、この項目をはぶいていますが、まずは省略された記述で枠線を指定してもかまいません。余裕ができた場合に学んでみるのもいいでしょう。

関連情報ページ

このタグによく使われるCSS

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system