に投稿に更新
テーブルについて
table(テーブル)を生成する方法
<table></table>タグを使用して、テーブルセクションを作成する1
2
3
| <table>
テーブルの内容の記述
</table>
|
テーブルの内容を追加する
行とデータを別々に記述する必要がある
<tr></tr>タグで行を生成
<td></td>タグで行内の要素指定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| ラーメン値段表 <!--タイトルのつもり-->
<table>
<tr>
<td>塩ラーメン</td>
<td>299</td>
</tr>
<tr>
<td>豚骨ラーメン</td>
<td>399</td>
</tr>
<tr>
<td>醤油ラーメン</td>
<td>499</td>
</tr>
<tr>
<td>味噌ラーメン</td>
<td>599</td>
</tr>
</table>
|
もう少しリッチな表現を入れる
枠線をつける
<table>タグにborder属性を記述する1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| ラーメン値段表
<table border>
<tr>
<td>塩ラーメン</td>
<td>299</td>
</tr>
<tr>
<td>豚骨ラーメン</td>
<td>399</td>
</tr>
<tr>
<td>醤油ラーメン</td>
<td>499</td>
</tr>
<tr>
<td>味噌ラーメン</td>
<td>599</td>
</tr>
</table>
|
見出しをつける
<thead></thead>タグでヘッダーセクションを生成する
<tr></tr>タグで行セクションを生成する<th></th>タグでヘッダー情報を記述する - ヘッダーと本文を区別するために本文部分は
<tbody></tbody>セクションで囲む
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| ラーメン値段表
<table>
<thead>
<tr>
<th>ラーメン名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>塩ラーメン</td>
<td>299</td>
</tr>
<tr>
<td>豚骨ラーメン</td>
<td>399</td>
</tr>
<tr>
<td>醤油ラーメン</td>
<td>499</td>
</tr>
<tr>
<td>味噌ラーメン</td>
<td>599</td>
</tr>
</tbody>
</table>
|
