htmlで表組みに挑戦

htmlで表組み

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

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

自分の中での基本形

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

出来上がり

aaabbbccc
%%%
###

コードはコレ。

<table border="1" bordercolor=#ff93d8>
		<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
		<tr><td>%</td><td>%</td><td>%</td></tr>
		<tr><td>#</td><td>#</td><td>#</td></tr>
	</table>

行に色を着けてみる

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

コードはコレ。

<table border="1" border-color=#aca2ff>
		<tr bgcolor="#c8ffd0"><td>1列目</td><td>2列目</td><td>3列目</td></tr>
		<tr><td>1段目</td><td>1段目</td><td>1段目</td></tr>
		<tr><td>2段目</td><td>2段目</td><td>2段目</td></tr>
	</table>

自分の中の応用編

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

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

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

コードはコレ。

<table border="1" border-color=#aca2ff>
		<th>1列目</th><th>2列目</th><th>3列目</th>
		<tr><td>1段目</td><td>1段目</td><td>1段目</td></tr>
		<tr><td>2段目</td><td>2段目</td><td>2段目</td></tr>
	</table>