バナー画像

HTMLの構築でテーブルを使うことは多くありますが、皆さん<table>タグを上手に使えていますか?

テーブルは単純と思われがちですが、画像はもちろん、単語のような短い文字列から文章のような長い文字列まで様々なものが入ります。

折り返し一つとってもキレイに魅せられるかどうかは作成する人の腕次第。

そこで今回はこのテーブルの中でも先ほど挙げたものに直接係ってくる<td>タグについて少し詳しく解説していきたいと思います。

テーブルを使っても折り返しが上手くいかない、もっとキレイに表示させたいなどの悩みを抱えている方は必見です!

<td>タグで使える属性

早速ですが、まずは基本的に<td>タグで使える属性について見てみましょう。

align

セル内のデータの配置(水平方向)を指定します。

属性の値=Left, center, right, justify, char

※HTML5では廃止されたため、CSSにてtext-alignを使用するようにしてください。

記述例

<body>
	<table>
		<tr>
			<td align="left">セル</td>
			<td align="right">セル</td>
		</tr>
		<tr>
			<td align="center">セル</td>
			<td>セル</td>
		</tr>
	</table>
</body>

valign

セル内のデータの配置(垂直方向)を指定します。

属性の値=top, middle, bottom, baseline

※HTML5ではvalignは廃止されたため、CSSにてvertical-alignを使用するようにしてください。

デフォルトはbaselineとなっています。baselineとは簡単に説明すると、ローマ字帳などに引かれている4本線の上から3本目の線の事です。

これはアルファベットを記述してみるとわかると思いますが、小文字の「g」「j」「p」「q」「y」の5つはこの3本目の線の下に少しはみ出して記述するはずです。

記述例

<body>
	<table>
		<tr>
			<td valign="top">セル</td>
			<td valign="middle">セル</td>
		</tr>
		<tr>
			<td valign="bottom">セル</td>
			<td valign="baseline">セル</td>
		</tr>
	</table>
</body>

char

位置揃えする対象文字を指定します。

属性の値=文字列

数値を小数点の井内で揃えて表示したい場合などに使用します。

この属性は「align=”char”」とした場合にのみ有効となります。

※HTML5では廃止されました。また対応しているブラウザも少なく使う機会は非常に少ないです。

記述例

<body>
	<table>
		<tr>
			<td>サンプル1</td>
			<td align="char" char=".">123.456789</td>
		</tr>
		<tr>
			<td>サンプル2</td>
			<td align="char" char=".">1.23456789</td>
		</tr>
	</table>
</body>

charoff

char属性で指定した文字をセルの端からどの距離に配置するかを指定します。

属性の値=数値、%

char属性が指定された状態で、その文字のオフセット値(ずらす量)を指定します。

※HTML5では廃止されました。

記述例

<body>
	<table>
		<tr>
			<td>サンプル1</td>
			<td align="char" char="." charoff="50">123.456789</td>
		</tr>
		<tr>
			<td>サンプル2</td>
			<td>1.23456789</td>
		</tr>
	</table>
</body>

colspan

セルを水平方向に連結します。

属性の値=数値

カラムスパン(Column Span)の略。初期値は”1″となっています。

“0”を指定することで、該当セルより右側の全てのセルを結合することが出来ます。

記述例

<body>
	<table>
		<tr>
			<td colspan="2">セル</td>
		</tr>
		<tr>
			<td>セル</td>
			<td>セル</td>
		</tr>
	</table>
</body>

rowspan

セルを垂直方向に連結します。

属性の値=数値

縦方向(行)の結合を指定する属性。

colspanと同じく”0″を指定することで、該当セルより下側にある全てのセルを結合することが出来ます。

記述例

<body>
	<table>
		<tr>
			<td rowspan="2">セル</td>
			<td>セル</td>
		</tr>
		<tr>
			<td>セル</td>
		</tr>
	</table>
</body>

abbr

セルの省略情報を指定します。

属性の値=テキスト

アブリビエイション(Abbreviation)の略で、読み上げサポートを行う場合に使用します。

※HTML5では廃止されました。

記述例

<body>
	<table>
		<tr>
			<td abbr="セル">セル</td>
			<td>セル</td>
		</tr>
		<tr>
			<td>セル</td>
		</tr>
	</table>
</body>

headers

関連する見出しセルをid属性で指定します。

※属性の値=ID名

abbr属性と似ていますが、関連したセルを指定することで読み上げを連結させることが出来ます。

例えば以下のコードでは、headers属性で”age”と”name”の二つのテーブルヘッダーが指定されていますので、読み上げは「年齢 30歳 鈴木太郎」となります。

記述例

<body>
	<table>
		<tr>
			<th id="age">年齢</th>
			<th id="name">30歳</th>
		</tr>
		<tr>
			<td headers="age name">鈴木太郎</td>
			<td>セル</td>
		</tr>
	</table>
</body>

scope

見出しの対象範囲を指定します。

※属性の値=row, col, rowgroup, colgroup

該当セルがどの内容のセルの見出しかを指定する属性です。

視覚効果的には意味を成すものではありませんが、視覚判断が難しい環境などではどの項目に属しているかわかりやすくまとめることが出来ます。

記述例

<body>
	<table>
		<tr>
			<td></td>
			<th scope="col">2019</th>
			<th scope="col">2020</th>
		</tr>
		<tr>
			<th scope="row">売上</th>
			<td>1000億</td>
			<td>1300億</td>
		</tr>
		<tr>
			<th scope="row">売上</th>
			<td>1500億</td>
			<td>1800億</td>
		</tr>
	</table>
</body>

axis

軸情報などを記述し、セルの分類をします。

属性の値=文字列

非視覚系ブラウザに対応した属性で、項目の分類をする場合に使用します。

※HTML5では廃止されました。

記述例

<body>
	<table>
		<tr>
			<td></td>
			<th scope="col" axis="年度">2019</th>
			<th scope="col" axis="年度">2020</th>
		</tr>
		<tr>
			<th scope="row" axis="期間">上半期</th>
			<td>1000億</td>
			<td>1300億</td>
		</tr>
		<tr>
			<th scope="row" axis="期間">下半期</th>
			<td>1500億</td>
			<td>1800億</td>
		</tr>
	</table>
</body>

width

セルの幅を指定します。

属性の値=数値、%

ワイズもしくはウィズと読みます。

※HTML4.01以降は非推奨、XHTML1.1で廃止になりました。CSSにてwidthを指定するようにしてください。

記述例

<body>
	<table>
		<tr>
			<td width="250px">セル</td>
			<td width="300px">セル</td>
		</tr>
		<tr>
			<td>セル</td>
			<td>セル</td>
		</tr>
	</table>
</body>

height

セルの高さを指定します。

属性の値=数値、%

ハイトと読みます。

※HTML4.01以降は非推奨、XHTML1.1で廃止になりました。CSSにてwidthを指定するようにしてください。

記述例

<body>
	<table>
		<tr>
			<td height="250px">セル</td>
			<td height="300px">セル</td>
		</tr>
		<tr>
			<td>セル</td>
			<td>セル</td>
		</tr>
	</table>
</body>

bgcolor

セルの背景色を指定します。

属性の値=カラーコード

バックグラウンドカラー(Back Ground Color)の略です。

※HTML4.01以降は非推奨、XHTML1.1で廃止になりました。CSSにてbackground-colorを指定するようにしてください。

記述例

<body>
	<table>
		<tr>
			<td bgcolor="#A64244">セル</td>
			<td>セル</td>
		</tr>
		<tr>
			<td>セル</td>
			<td>セル</td>
		</tr>
	</table>
</body>

nowrap

セル内のデータが自動改行されないように指定します。

属性の値=nowrap

折り返しを禁止する場合に使用します。

ただし利用方法によってはテーブルレイアウトが崩れてしまいますので注意が必要です。

※HTML4.01以降は非推奨、XHTML1.1で廃止になりました。CSSにてwhite-spaceを指定するようにしてください。

記述例

<body>
	<table>
		<tr>
			<td nowrap="nowrap">セル</td>
			<td>セル</td>
		</tr>
		<tr>
			<td>セル</td>
			<td>セル</td>
		</tr>
	</table>
</body>

文字列を一定の長さで改行させる

テーブルの文字列がガタガタになってしまっているサイトをよく見かけますが、設定一つできれいに見せることが出来るようになります。

タグ内でstyleを使用し「”word-wrap:break-word;”」を指定することで解決しますが、一部の条件下では指定しているのに効果が無いように見える場合もあります。

一部の条件には「table-layout: auto」を使用している場合、もしくはセル幅が指定されていない場合などが挙げられます。

<body>
	<table>
		<tr>
			<td style="word-wrap:break-word;">セル</td>
			<td>セル</td>
		</tr>
		<tr>
			<td>セル</td>
			<td>セル</td>
		</tr>
	</table>
</body>

まとめ

いかがでしたか?

今回はテーブルの中でも直接文字列などを格納する<td>タグについて解説してみました。

HTML5にアップグレードされたことで廃止された属性も多くあるため、既に学習を終えた方も再度、廃止された属性を見直してみた方が良いかもしれませんね。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。