テーブル(表)を作成するには <table> を用います。<table>～</table> がひとつのテーブル、<caption>～</caption> が表題、<tr>～</tr> が1行、<th>～</th> がヘッダのマス(カラム)、 <td>～</td> がデータのマス(カラム)に対応します。border=1 は枠線の太さを示します。

<table border=1>
 <caption>【ブラウザと開発元】</caption>
 <tr><th>ブラウザ</th><th>開発元</th></tr>
 <tr><td>Chrome</td><td>Google</td></tr>
 <tr><td>Firefox</td><td>Mozilla</td></tr>
 <tr><td>Safari</td><td>Apple</td></tr>
</table>

特定のテーブルにスタイルを適用するには、style 属性を用います。

<table style="border-collapse:collapse;">
  <tr><th style="border:1px solid gray;">...</th></tr>
  <tr><td style="border:1px solid gray;">...</td></tr>
</table>

すべてのテーブルにスタイルを適用するには、下記の様にすべての table, th, td 要素にスタイルを適用します。

<style>
table { border-collapse: collapse; }
th, td { border: 1px solid gray; }
</style>

<table>
   :
</table>

特定のクラスを適用したテーブルにスタイルを適用するには、下記の様にします。class="mytbl" を指定したテーブルにのみ適用されます。

<style>
.mytbl { border-collapse: collapse; }
.mytbl th, .mytbl td { border: 1px solid gray; }
</style>
<table class="mytbl">
   :
</table>

特定のテーブル(1つ)にのみ適用したい場合は、id 属性を用いて下記の様に定義します。

<style>
table#tbl1 { border-collapse: collapse; }
#tbl1 th, #tbl1 td { border: 1px solid gray; }
</style>
<table id="tbl1">
   :
</table>

テーブルの n番目の列にだけスタイルを適用したい場合は、nth-child(n) を用います。

<style>
table { width: 300px; border-collapse: collapse; }
th, td { border: 1px solid gray; }
th { background-color: #ccf; }
td:nth-child(1) { background-color: #fcc; }
td:nth-child(2) { background-color: #cfc; }
</style>
<table>
 <tr><th>AAA</th><th>BBB</th></tr>
 <tr><td>A1</td><td>B1</td></tr>
 <tr><td>A2</td><td>B2</td></tr>
 <tr><td>A3</td><td>B3</td></tr>
</table>

テーブルの中身を改行させないようにするには、スタイルシートの white-space: nowrap を指定します。

<style>
table { border-collapse: collapse; }
th, td {
  border: 1px solid gray;
  white-space: nowrap;
}
</style>

カラムを横や縦に連結するには <td> や <th> に colspan=n や rowspan=n 属性を指定します。n には連結するカラムの数を指定します。

<table border=1>
 <tr><td colspan=2>横連結</td></tr>
 <tr><td rowspan=2>縦連結</td><td>○○</td></tr>
 <tr><td>△△</td></tr>
</table>

テーブルに背景色や背景画像を指定するには、<table>、<tr>、<th>、<td> に、スタイルシートの width や height を指定します。

<table style="width:200px; height:100px;">
 <tr><td>東京都</td><td>13,742,906</td></tr>
 <tr><td>広島県</td><td>2,830,069</td></tr>
</table>

<tr>、<th>、<td> にスタイルシートの text-align を指定することで、カラムの内容を右寄せ、中寄せ、左寄せすることができます。

<style>
#tb3 { border-collapse: collapse; width: 200px; }
#tb3 th, #tb3 td { border: 1px solid gray; }
#tb3 td:nth-child(2) { text-align:right; }
</style>
<table id="tb3">
 <tr><td>東京都</td><td>13,742,906</td></tr>
 <tr><td>広島県</td><td>2,830,069</td></tr>
</table>

<tr>、<th>、<td> にスタイルシートの vertical-align を指定することで、カラムの内容を上寄せ、中寄せ、下寄せすることができます。

<style>
#tb4 { border-collapse: collapse; width: 150px; height: 50px; }
#tb4 th, #tb4 td { border: 1px solid gray; }
#tb4 td:nth-child(1) { vertical-align: top; }
#tb4 td:nth-child(2) { vertical-align: bottom; }
</style>
<table id="tb4">
 <tr><td>上寄せ</td><td>下寄せ</td></tr>
</table>

<table>、<tr>、<th>、<td> にスタイルシートの background-color を用いて、テーブルの背景色を指定することができます。

<style>
#tb5 { border-collapse: collapse; width: 200px; }
#tb5 th, #tb5 td { border: 1px solid gray; }
#tb5 th { background-color: #cfc; }
#tb5 td { background-color: #ffc; }
</style>
<table id="tb5">
 <tr><th>東京都</th><td>13,742,906</td></tr>
 <tr><th>広島県</th><td>2,830,069</td></tr>
</table>

<table>、<tr>、<th>、<td> にスタイルシートの background-image を用いて、テーブルの背景画像を指定することができます。

<style>
#tb6 { border-collapse: collapse; width: 200px; }
#tb6 th, #tb6 td { border: 1px solid gray; }
#tb6 th { background-image: url(./image/back.gif); }
</style>
<table id="tb5">
 <tr><th>東京都</th><td>13,742,906</td></tr>
 <tr><th>広島県</th><td>2,830,069</td></tr>
</table>

テーブルを横に二つ並べるには、外側にもうひとつ大きなテーブルを設ける方法があります。ただし、テーブルをレイアウトの目的で使用するのはよくないとされています。

<table>
 <tr>
  <td>
   <table border=1>
    <tr><td>ああ</td><td>ああ</td></tr>
    <tr><td>ああ</td><td>ああ</td></tr>
   </table>
  </td>
  <td>
   <table border=1>
    <tr><td>ああ</td><td>ああ</td></tr>
    <tr><td>ああ</td><td>ああ</td></tr>
   </table>
  </td>
 </tr>
</table>

もしくは、スタイルシートの float を用いる方法があります。

<table border=1 style="float:left; margin-right:.5em;">
 <tr><td>ああ</td><td>ああ</td></tr>
 <tr><td>ああ</td><td>ああ</td></tr>
</table>
<table border=1>
 <tr><td>ああ</td><td>ああ</td></tr>
 <tr><td>ああ</td><td>ああ</td></tr>
</table>

• 角の丸いテーブルを表示するには