たとえば

パン	180円
牛乳	198円
コーヒー豆	588円

のような表を作るには，<table> タグを使って

<table>
<tr><td>パン<td>180円
<tr><td>牛乳<td>198円
<tr><td>コーヒー豆<td>588円
</table>

のように書きます。 <tr>（table row）が行の始まり， <td>（table data）が項目の始まりです。 罫線も入れられます。

パン	180円
牛乳	198円
コーヒー豆	588円

のように罫線を入れるには，

<table border="1">
<tr><td>パン<td>180円
<tr><td>牛乳<td>198円
<tr><td>コーヒー豆<td>588円
</table>

とします。この border="1" を border="10" にすれば，

パン	180円
牛乳	198円
コーヒー豆	588円

のような麗々しい表になります。

見出しを入れるには <td> の代わりに <th>（table header）を使います。 たとえば

品名	値段
パン	180円
牛乳	198円
コーヒー豆	588円

のように見出しを入れるには

<table border="1">
<tr><th>品名<th>値段
<tr><td>パン<td>180円
<tr><td>牛乳<td>198円
<tr><td>コーヒー豆<td>588円
</table>

のようにします。

これ以外で <table> タグの中に書き加えることができるものは次の通りです。

cellpadding="5"

罫線と項目の中身とを5ドットだけ離します。

cellspacing="5"

罫線の幅を5ドット分にします。

width="123"

表の幅を123ドット分にします。

width="80%"

表の幅をページの幅の80%にします。

align="left"，align="center"，align="right"

ページ中で表を左，中央，右に寄せます。 左・右にした場合は本文が表の右・左の空きに流れ込みます。

hspace="10" vspace="20"

表のまわりに水平方向に10ドット，垂直方向に20ドットの空きを入れます。

また，<tr> タグの中に書き加えることができるものは次の通りです。

align="left"，align="center"，align="right"

その行の各項目を左，中央，右に寄せます。

valign="top"，valign="middle"，valign="bottom"

その行の各項目を上，中央，下に寄せます。

<td>，<th> タグの中に書き加えることができるものは次の通りです。

nowrap

項目中で改行が起こるのを防ぎます。

rowspan="2"

2行にまたがる項目を作ります。

colspan="2"

2列にまたがる項目を作ります。

align="left"，align="center"，align="right"

その項目を左，中央，右に寄せます。 何も書かなければ <td> では左寄せ，<th> では中央揃えです。

valign="top"，valign="middle"，valign="bottom"

その項目を上，中央，下に寄せます。 何も書かなければ中央になります。

width="50"

その項目の幅を50ドット分にします。 実際にはこれに cellpadding の値が左右に加算されます。

height="20"

その項目の高さを20ドット分にします。 実際にはこれに cellpadding の値が上下に加算されます。

部分的に背景色を変えたいときも <table> タグが使えます。 たとえば，すぐ上の小見出しは次のように書きました。

<table width="100%" cellpadding="10">
<tr><td bgcolor="teal">
<font size="+1" color="white"><b>背景色の指定</b></font>
</table>

<font> タグの size="+1" で文字サイズを本文より一回り大きくし， <b> タグでボールド体（太字）にしてあります。

最近はページレイアウトをかっこよくするために <table> が多用されています。 たとえばこのページのように左マージンを広めにとるために

<table width="85%" align="right"><tr><td>
最近はページレイアウトをかっこよくするために……
</table><br clear="all">

のように書くこともできます。

同様な効果をもっと単純に

<blockquote>
<blockquote>
最近はページレイアウトをかっこよくするために……
</blockquote>
</blockquote>

のようにして出すことも可能です。 このページも昔はこの方法を使っていました。 しかし今はスタイルシートを使っています。

このページの著者，奥村氏の近影

右図のように表や図のキャプション（説明）を書き込むことができます。 これは次のように書きました。

<p>
<table align="right" hspace="10" vspace="10">
<caption align="bottom">
<small>
このページの著者，奥村氏の近影
</small>
</caption>
<tr><td>
<img src="../okumura.gif">
</table>
右図のように……
……と書いておくと安全です。
<br clear="all">

このように図のまわりに本文を流し込む場合は， 本文の流し込みが終わるべきところに <br clear="all"> と書いておくと安全です。