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本目の線の事です。
これはアルファベットを記述してみるとわかると思いますが、小文字の「ｇ」「ｊ」「ｐ」「ｑ」「ｙ」の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>サンプル１</td> <td align="char" char=".">123.456789</td> </tr> <tr> <td>サンプル２</td> <td align="char" char=".">1.23456789</td> </tr> </table> </body>
charoff
char属性で指定した文字をセルの端からどの距離に配置するかを指定します。
属性の値＝数値、%
char属性が指定された状態で、その文字のオフセット値(ずらす量)を指定します。
※HTML5では廃止されました。
記述例
<body> <table> <tr> <td>サンプル１</td> <td align="char" char="." charoff="50">123.456789</td> </tr> <tr> <td>サンプル２</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にアップグレードされたことで廃止された属性も多くあるため、既に学習を終えた方も再度、廃止された属性を見直してみた方が良いかもしれませんね。
