HTMLで簡単な表を作っていきます。
タグ
まず表を作るのに必要なタグを挙げていきます。
表(table)
表関連のタグを囲むタグです。
表のタイトル(caption)
キャプションがある場合は使用します。
<table>の直後にしか置けません。
列のグループ(column group)
列をグループ化します。
<caption>の後、<thead>の前に配置します。
列(column)
<colgroup>の子になります。
表の列見出し(table header)
表のヘッダーを囲うタグです。
表の本体(table body)
表の中身を囲います。
表の結果・まとめ(table footer)
表のフッターを囲うタグです。
行(table row)
表の一行をまとめます。
列見出し(table header)
実際の見出しになります。
データ(table data)
実際のデータです。
単純な表
まずは単純な表を作成してみましょう。
今回つくる表の構成を図にすると、下の画像になります。

表全体を<table>で囲い、一行を<tr>で囲みます。<tr>のなかに<td>を配置します。
コード
html
<table>
<tr>
<td>国語</td>
<td>英語</td>
<td>数学</td>
</tr>
<tr>
<td>物理</td>
<td>倫理</td>
<td>体育</td>
</tr>
</table>
css
table, td {
border: 1px solid;
}
table {
border-collapse: collapse;
text-align: center;
width: 600px;
}
borderプロパティ(cssの2行目)
線の太さ、種類、色をスペースで区切って一括指定します。
値は順不同です。
線の種類はsolid(実線)、dashed(破線)、dotted(点線)、double(二重線)など。border-styleプロパティで指定することもできます。
※線の種類の初期値はnoneのため、設定しないと線が表示されません。
border-collapseプロパティ(cssの6行目)
隣接する枠線の処理。collapse(崩れる)。
初期値はseparate。枠線を分けて表示。
collapseにすると隣接する線を一本に合わせます。
text-alignプロパティ(cssの7行目)
テキストの整列。
初期値はstart。日本語や英語のように左から右に向かう書式なら左寄せになります。
end(startの逆)、center(中央寄せ)、left(左寄せ)、right(右寄せ)、justify(両端寄せ)などがあります。
widthプロパティ(cssの8行目)
横幅を設定します。
ピクセル単位(px)や、親要素を100とした場合のパーセント(%)で指定します。
htmlのフォントサイズを基準とした場合のrem、親要素のフォントサイズを基準とした場合のemなどもあります。
縦幅を設定するプロパティにheightがあります。
イメージ画像

参考としてCSSで別の設定をした表の画像を掲載します。
border-styleをdashedにして枠組みの線を破線にし、text-alignを未設定にすることでデフォルトの左寄せにし、border-collapseも未設定にしたので<table>と各<td>の枠線が分かれて表示されています。

見出しとフッターのある表
次は、見出しとフッターをつけた表を作ってみましょう。
タグには<thead>、<tbody>、<tfoot>を使います。
今回作成する表のタグ構成です。

単純な表に、ヘッダー部を囲う<thead>、バディを囲む<tbody>、フッターを囲む<tfoot>が追加された形です。<thead>の中には<tr>があり、さらにその中に<td>ではなく、<th>が入っています。
コード
html
<table>
<caption>売り上げ(円)</caption>
<thead>
<tr>
<th>日付</th>
<th>りんご</th>
<th>みかん</th>
<th>いちご</th>
</tr>
</thead>
<tbody>
<tr>
<td>8/1</td>
<td>2000</td>
<td>3200</td>
<td>5000</td>
</tr>
<tr>
<td>8/2</td>
<td>3000</td>
<td>1500</td>
<td>8200</td>
</tr>
<tr>
<td>8/3</td>
<td>1000</td>
<td>500</td>
<td>4000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>合計</th>
<td>6000</td>
<td>5200</td>
<td>17200</td>
</tr>
</tfoot>
</table>
css
table {
border: 1px solid gray;
text-align: center;
width: 600px;
}
tbody {
background-color: #f8c6bd;
}
thead, tfoot {
background-color: #ff4500;
color: white;
}
イメージ画像

セルを結合する
横方向にセルを結合する
横方向にセルを結合するには、<th>や<td>に属性「colspan」を使います。columun-spanの略で、結合する列の長さを数値で指定します。
下記htmlの4行目を参照してください。
html
<table>
<thead>
<tr>
<th colspan="2">名前</th>
</tr>
<tr>
<th>姓</th>
<th>名</th>
</tr>
</thead>
<tbody>
<tr>
<td>磯野</td>
<td>サザエ</td>
</tr>
<tr>
<td>磯野</td>
<td>カツオ</td>
</tr>
</tbody>
</table>
css
table {
text-align: center;
border-collapse: collapse;
width: 600px;
}
table, th, td {
border: 1px solid;
}
イメージ画像

「名前」の部分は二つの列を結合しているので、「colspan="2"」としています。
もし三つの列ならば"3"、四つなら"4"に変えるだけです。
縦方向にセルを結合する
縦方向なら<th>や<td>に「rowspan」属性を使用します。
結合したい行の長さを指定します。
下記htmlの13行目です。
html
<table>
<thead>
<tr>
<th colspan="2">名前</th>
</tr>
<tr>
<th>姓</th>
<th>名</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">磯野</td>
<td>サザエ</td>
</tr>
<tr>
<td>カツオ</td>
</tr>
</tbody>
</table>
※cssは横方向を結合で使用したものと共通。
イメージ画像

htmlの16~18行目に注目してください。<td>がひとつしかないことが見て取れると思います。
結合した場合、その分のデータを省くようにしなければいけないことも注意してください。
もう少し複雑な表は以下で扱っていきます。