表（テーブル）tableを表す要素

 table要素
カテゴリー
フロー・コンテンツ

コンテンツ・モデル
tr要素(table row)
th要素(table header cell)
td要素(table data)

tr,th,td共にカテゴリーは,なし
コンテンツ・モデルはフロー・コンテンツ

表の元

タイトル 内容
型式 HTML5
文字 UTF-8
見出し H1～H6

基本的な表

table要素で挟みます.
<table>
タイトル 内容
型式 HTML5
文字 UTF-8
見出し H1～H6
</table>

border属性

table要素の中にborder属性を加え罫線を引きます。 <table border="1">
<tr><th>タイトル</th> <th>内容</th></tr>
<tr><td> 型式</td> <td> HTML5</td></tr>
<tr><td>文字 </td> <td>UTF-8</td></tr>
<tr><td>見出し</td> <td>H1～H6</td></tr>
</table>

ヘッダ・フッダ

theader(table header)
tbody (table body)

実際の手順

1. テーブル要素を改行して配置します。
   <table>
   
   </table>
2. 間にインデントを付けてtr要素を配置します。
   <table>
     <tr></tr>
   </table>
3. コピペして2行にしておきます。
   <table>
     <tr></tr>
     <tr></tr>
   </table>
4. tr要素の間にth,td要素を表の数だけ作ります。
   <table>
     <tr><th></th><th></th><th></th><th></th></tr>
     <tr><td></td><td></td><td></td><td></td></tr>
   </table>
5. td行を必要な行数にします。lhにa~dを入れておきました。
   th,td要素の間に表の内容を挿入していきます。thにa~d,tdに1~４を入れておきました。
   以下コピペできます。
   <table border="1">
     <tr><th>a</th><th>b</th><th>c</th><th>d</th></tr>
     <tr><td>1</td><td></td><td></td><td></td></tr>
     <tr><td>2</td><td></td><td></td><td></td></tr>
     <tr><td>3</td><td></td><td></td><td></td></tr>
     <tr><td>4</td><td></td><td></td><td></td></tr>
   </table>
6. 上のコーディンクをコピペしてみました。

   a	b	c	d
   1
   2
   3
   4

7. 表全体の横の大きさを指定しました。
   見出しのセンタリングをしました。
   <table border="1" width=100px;>
   <tr align="center"><th>a</th><th>b</th><th>c</th><th>d</th></tr>
   valign=""はleft,center,right,justify(両端揃え)

   a	b	c	d
   1
   2
   3
   4

8. 見出しの横の大きさを指定しました。
   <tr><th width=100px;>a</th><th>b</th><th>c</th><th>d</th></tr>

   a	b	c	d
   1
   2
   3
   4

9. 見出しの縦の大きさを指定しました。
   <tr valign="top"><th height=100px;>a</th><th>b</th><th>c</th><th>d</th></tr>
   valign=""はtop,middle,botom,baseline

   a	b	c	d
   1
   2
   3
   4

色や模様はCSSです。

戻る14画像の表示,目次,次へ16フォーム関連の要素