Webページではおなじみのテーブルですが、HTMLでも実装することが可能です。テーブルを思った通りにデザインする方法にも言及します。
Tableタグの使い方
tableタグの中に行としてtrタグがあり、その中に要素としてthタグ、tdタグを配置しています。tr1つにつき横1行です。
trとth/tdの数が合わない場合は欠けて表示されます。
| 見出し1 | 見出し2 | 見出し3 |
|---|---|---|
| 内容1 | 内容2 |
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>tableタグは「ここにテーブルを作りますよ」という宣言で、単体でタグを置いても特に見かけ上変化しません。tr、th/tdタグを置いてはじめてテーブルらしくなります。
thタグは見出し用のタグ、tdは通常のデータです。
<table></table>
テーブルに行（table row）を追加
<th>文字列</th>
テーブルに見出し（table header）を追加
<tr>文字列</tr>
テーブルに要素（table data）を追加
<td>文字列</td>
tableの見栄えを整える
最初に貼ったテーブルはCSSが適用されてある程度デザインがされた状態になっていますが、txtにコードを書いてhtmlで読み込むと、こんな感じになります。
さすがにこれでは使えないので、テーブルの見栄えを変更する必要があります。
特にこだわりがなければCSSを使います。htmlでテーブルのデザインをするのは現代では非推奨の技術です（一昔前に「テーブルは窓から投げ捨てろ」論争というのがありました）。構造はhtml、デザインはCSSに分担するのが主流となったのと、実利上の理由としてはテーブルタグ自体がごちゃごちゃしているところにさらにコードを追加していくことになるので、見栄えが悪いから、そしてコードの融通がきかないからです。色の上に色を乗せて枠線を表現したりする構造上、若干htmlが重くなるという欠点もあります。
ただhtmlでも別にできなくはないので、使いたければ止めはしません。
背景色の変更
| black | red |
|---|---|
| white | green |
背景色にはCSSならbackground-colorを使います。
htmlならbgcolorプロパティを使います。tr、th/td、tableにそれぞれ色を指定することが可能です。
background-color:色;
bgcolor = “色”
枠線の変更
| black | red |
|---|---|
| white | green |
CSSならborderプロパティを使用します。htmlではborderプロパティを1にすると線が表示されます。線の太さはcellspacingで調整します。
border:線の太さ 線の種類 色;
border = “外線の太さ”
cellspacing = “値”
コメント