htmlで表組み
DTP、ビジネスドキュメントでは、必ずと言っていいほど出てくる表組み。エクセルを使えばサクッと作れるのに、htmlとなると、全くの経験なし。
ということで、作ってみました。
自分の中での基本形
| <table> | 大枠を決めるタグ。 | 親分 |
| <tr> | 行を構成するタグ。 | 子分 |
| <td> | 一つ、一つのセル情報 | さらに子分 |
出来上がり
| aaa | bbb | ccc |
| % | % | % |
| # | # | # |
コードはコレ。
<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>
