これで 作成しているのは、右のHTML内の表の1行だけです。<tr>から</tr>の範囲の 1行を作り、 その中に<td>と</td>を追加して列を増やします。
そうやって、最初に1行だけ作成してブラウザで確認した後、 1行分の（<tr>から</tr>）を 複製（コピー&貼り付け）して編集するように作るのがよいでしょう。
以下にいくつかの例を示します。確認して見ましょう。
（ trの語源はtable rowで、tdの語源はtable data cellです）
次のように書きます。(1行分だけ説明しています)
これで 作成しているのは、右のHTML内の表の1行だけです。<tr>から</tr>の範囲の 1行を作り、
その中に<td>と</td>を追加して列を増やします。
そうやって、最初に1行だけ作成してブラウザで確認した後、
1行分の（<tr>から</tr>）を
複製（コピー&貼り付け）して編集するように作るのがよいでしょう。
以下にいくつかの例を示します。確認して見ましょう。
<html><head><title></title></head><body> <table border> <tr> <td>A1</td> </tr> </table> </body></html>
上のHTMLを
<html><head><title></title></head><body> <table border> <tr> <td>A1</td> <td>A2</td> </tr> </table> </body></html> |
<html><head><title></title></head><body> <table border> <tr> <td>A1</td> <td>A2</td> </tr> </table> </body></html> |
上のHTMLを
記述順番さえ合っていればよいので、上記の左右はまったく同じです。見やすいように書きます。
<html> <head> <title>拡張子の表 </title> </head> <body> <h3> 拡張子</h3> <p>Windowsでは、ファイル名の最後に並んでいる ドットの . から始まる文字で、ファイルの種類を区別しています。</p> <table border> <tr> <td>test.html</td> <td>HTMLファイル</td> </tr> <tr> <td>test.ｔｘｔ</td> <td>テキストファイル</td> </tr> <tr> <td>test.gif</td> <td>画像ファイル</td> </tr> </table> <p>この部分はファイル拡張子と呼ばれています。</p> </body> </html>
上のHTMLを
なお、上記 tableタグ では境界線を意味する border の属性(プロパティ)を指定していますが、 これは 境界線の幅である設定値を省略しています。例えば線幅を3にする場合は <table border="3"> と書きます。 また、 border の属性を指定しない場合は、 border="0" と同じで 境界線は無くなります。以下に境界線のない例を示します。（画像を入れたセルを追加しています。）
<html> <head> <title>拡張子の表 </title> </head> <body> <table> <tr> <td>test.html</td> <td>HTMLファイル</td> <td><img src="ico_htm.gif"></td> </tr> <tr> <td>test.ｔｘｔ</td> <td>テキストファイル</td> <td><img src="ico_txt.gif"></td> </tr> <tr> <td>test.gif</td> <td>画像ファイル</td> <td><img src="ico_bmp.gif"></td> </tr> </table> </body></html>
上のHTMLを
行の高さが画像が収まるように大きく変化しています。
このようにtable内のデータが収まるように全体のサイズが自動的に調整されます。
その他でよく使われる属性(プロパティ)では、幅の width や、
高さの height 、背景色の bgcolor 、があります。
行範囲を指定する tr では、
bgcolor やそろえる指定の align の属性がよく使われます。
１つのセル要素を指定する td では、
個々のサイズを指定できるように width や、
高さの height を
指定できます。
これらの設定は必ずそのサイズにできるものではありません。
内部の入る文字列や画像サイズによって、収まりきれなければ収まるようにテーブルサイズの方が自動的に変更されます。
<html> <head> <title>拡張子の表 </title> </head> <body> <table border="3" width="300" height="100"> <tr> <td width="200">test.html</td> <td width="200">HTMLファイル</td> <td width="5"><img src="ico_htm.gif"></td> </tr> <tr> <td height="100">test.ｔｘｔ</td> <td>テキストファイル</td> <td><img src="ico_txt.gif"></td> </tr> <tr> <td height="5">test.gif</td> <td>画像ファイル</td> <td><img src="ico_bmp.gif"></td> </tr> </table>
上のHTMLを
上記ではいくつかの問題点があります。
まず、height="100"は書かない方がよいでしょう。
2行目で、height="100"の高さ指定があり、他の行の高さを含めると矛盾があり
無理な設定です。一般にこのような指定はブラウザで無視されます。なお、矛盾が起きない大きな設定にすれば有効に働きます。
次に、 width="200"も書かない方がよいでしょう。
table全体の幅で300の指定があります。対して、この行の各セルで、200 200 5 を指定しているので、
合計幅が 405になって table幅の300と矛盾します。
このように矛盾がある書き方をすると、ブラウザによって見え方が変わる原因になります。
どこか一箇所を書かかなければ、その箇所を自動的に算出してサイズ決定するので、その機能に任せるのがベストです。
その意味では、 width="200"を書いて、table のwidth="300"を書かない方法でも
構いません。
なお、この例の1行目で3列目のwidth="5"は、画像サイズより小さいので収まりきれない無理な値です。
ですが、収まりきれなければ収まるような自動調整機能により
3列目の幅がちょうど画像サイズが収まる幅になっています。（裏技ですが・・）
またこの例に限っては、 height="5"の指定も意味がないので書かない方がよいでしょう。
この高さでは右の画像が収まりません。自動調整により決定されますが、table全体の高さ指定が無い場合や
全体の高さが無理な設定（上記例）であれば、指定しなくても一番大きい高さに調整されるため意味をなしません。
なお、tableはブロック要素に属します。しかし、
tr,td,thは、ブロック要素やインライン要素と呼べないtable専用の特別な要素と言えます。
過去のある時期では、tdの中にpで囲まないbrを入れてはいけない時がありました。
現在では可能で、tdの中に各種インライン要素やブロック要素を入れ子にして入れることができるようです。
しかし、表示における自動的なサイズ計算がプログラム的に難しく、あまり複雑な構造にするとブラウザによって異なる表示になる可能性があり得るでしょう。