HTMLとCSSで表(テーブル)を作る・デザインする方法/Table要素、Tr,Td,Thタグの使い方など

home-office IT

Webページではおなじみのテーブルですが、HTMLでも実装することが可能です。テーブルを思った通りにデザインする方法にも言及します。

Advertisements

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で読み込むと、こんな感じになります。
tabletxt
さすがにこれでは使えないので、テーブルの見栄えを変更する必要があります。

特にこだわりがなければCSSを使います。htmlでテーブルのデザインをするのは現代では非推奨の技術です(一昔前に「テーブルは窓から投げ捨てろ」論争というのがありました)。構造はhtml、デザインはCSSに分担するのが主流となったのと、実利上の理由としてはテーブルタグ自体がごちゃごちゃしているところにさらにコードを追加していくことになるので、見栄えが悪いから、そしてコードの融通がきかないからです。色の上に色を乗せて枠線を表現したりする構造上、若干htmlが重くなるという欠点もあります。
ただhtmlでも別にできなくはないので、使いたければ止めはしません。

背景色の変更

black red
white green

背景色にはCSSならbackground-colorを使います。
htmlならbgcolorプロパティを使います。tr、th/td、tableにそれぞれ色を指定することが可能です。

背景色の変更
background-color:色;
背景色の変更(テーブル用)
bgcolor = “色”
htmlでテーブルの背景色を変更する方法/bgcolorプロパティの使い方
CSS普及後はこのプロパティを使うのはあまり推奨されないですが、せっかくあるのでご紹介のbg(background)colorプロパティのご紹介です。 table用のプロパティとなります(divとかには使えません)。

枠線の変更

black red
white green

CSSならborderプロパティを使用します。htmlではborderプロパティを1にすると線が表示されます。線の太さはcellspacingで調整します。

枠線の設定
border:線の太さ 線の種類 色;
テーブルの線を適用
border = “外線の太さ”
内側の線と外側の線の間隔を調整
cellspacing = “値”
CSSで画像やテキストなどの要素に枠線を付ける方法/borderプロパティの使い方
文字や画像を線で「囲む」ことができる、borderプロパティの紹介となります。
HTMLでテーブルの枠線、セルのサイズを調整する方法/border、cellspacingプロパティの使い方
htmlでテーブルの枠線を引き、サイズの調整をする方法のご紹介です。htmlでやるメリットあまりないので、特にこだわりがなければCSSでデザインすることをおすすめします。
HTMLの便利な使い方・タグ逆引きリファレンス
ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。 勉強しながらちょっとずつ増やしていく所存です。

コメント