htmlで表組みに挑戦

htmlで表組み

DTP、ビジネスドキュメントでは、必ずと言っていいほど出てくる表組み。エクセルを使えばサクッと作れるのに、htmlとなると、全くの経験なし。

ということで、作ってみました。

自分の中での基本形

<table>大枠を決めるタグ。親分
<tr>行を構成するタグ。子分
<td>一つ、一つのセル情報さらに子分

出来上がり

aaabbbccc
%%%
###

コードはコレ。

行に色を着けてみる

1列目2列目3列目
1段目1段目1段目
2段目2段目2段目

コードはコレ。

自分の中の応用編

<th>タイトル行には、こちらの子分を使用。

本文と若干、コードが異なります。

1列目2列目3列目
1段目1段目1段目
2段目2段目2段目

コードはコレ。