ホーム＞コース別ガイド一覧＞表を作成しましょう！
表を作成しましょう！（table要素、tr要素、td要素） |
  
|
使用タグ <table>〜</table>
HTML一覧タグ辞典 … <table> タグ
<table>タグを使えば、ページに表を作成することができます。内容には<tr>〜</tr>タグで行を指定し、<td>〜</td>タグでデータ用セル、<th>〜</th>タグで見出し用セルを指定します。そのほかに caption 要素、col 要素、colgroup 要素、thead 要素、tbody 要素、tfoot 要素を指定することもできます。
※ここでは、基本的な表の作り方を説明しますので、table 要素の内容の要素は td 要素、th 要素のみを使います。
その他の table 要素の内容の要素については、「HTML一覧タグ辞典」の - 表（テーブル）関連 -を参考にしてください。
使用タグ <tr>〜</tr>
HTML一覧タグ辞典 … <tr> タグ
<tr>タグは表の中の行を表します。また、<tr>〜</tr>タグの数だけ行が作られます。<tr>タグの内容となるタグは<td>タグや<th>タグです。これらを並べて、表のセルを作成します。
使用タグ <td>〜</td>
HTML一覧タグ辞典 … <td> タグ
<td>タグは表のセルを作成できます。<th>タグは見出し用セルですが、<td>タグはデータ用セルに使います。<td>タグには<p>タグなどのブロック要素や、画像、直接文章なども記述できます。
使用例
では、実際に記述例を参考にしながら手順通りに入力していきましょう。
|
 まずは表を表示する場所に<table></table>のタグを入力して、そこに表を表示することを宣言します。
- 開始タグの<table>を入力します
- 終了タグの</table>入力します
このように表を表示したい場所に<table></table>と入力します。
※ここではHTML文書を見やすくするために<table></table>の前後を改行して表示しています。 |
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table>
</table>
</body>
</html> |
|
|
| |
 |
その次に行を作成する数の分だけ<tr></tr>のタグを入力します。※ここでは３行の表を作成するので<tr></tr>を３組記述します。
- 開始タグの<tr>を入力します
- 終了タグの</tr>入力します
- 表示したい行の数だけ繰り返し入力します
このように<table></table>の間に行を表示したい数だけ<tr></tr>と入力します。 |
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html> |
|
|
| |
|
その次にセルを作成する数の分だけ<td></td>のタグを入力します。※ここでは１つの行に３つセルの表を作成するので、それぞれすべての<tr></tr>の間に<td></td>を３組記述します。
- 開始タグの<td>を入力します
- 終了タグの</td>入力します
- 表示したい行の数だけ繰り返し入力します
このようにセルを作成する数の分だけ<td></td>のタグを入力します。 |
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table>
<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> |
|
|
| |
|
セル内に文字列を入力しましょう。この文字列が表のセルに表示される部分です。
※ここではテキストを<p>タグなどで囲まず、そのまま入力しています。
- <td>と</td>の間に文字列を入力します
この表の表示例は次項で記述しています。 |
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<table>
<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="1">と指定します。 |
 |
[table要素にborder属性を入力後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
| １行目、１つ目のセル |
１行目、２つ目のセル |
１行目、３つ目のセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、１つ目のセル |
３行目、２つ目のセル |
３行目、３つ目のセル |
|
|
このように表が表示されました。次のページでは表に枠線を表示さる具体的な説明をします。
関連情報ページ |
|
このタグによく使われるCSS |
|
|
|
|
その他 |
|
|
|
