Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>セル内の文字の横の位置を指定しよう!

セル内の文字の横の位置を指定しよう!(td要素、th要素、tr要素のalign属性)

普通コースじっくりコースアイコンの説明 普通コースじっくりコースアイコンの説明

使用タグ@ <tr align="横方向の配置">〜</tr>

使用タグA <td align="横方向の配置">〜</td>
使用タグB <th align="横方向の配置">〜</th>

HTML一覧タグ辞典 … <tr><td><th> タグ

<tr> タグ<td>タグ<th>タグの align 属性を使えば、セル内の文字の横の位置を指定できます。値には「left」(左寄せ)、「center」(中央揃え、)「right」(右寄せ)、「justify」(両端揃え)、「char」(指定文字揃え)を指定できます。

文字の横方向の位置は、CSStext-align プロパティで指定できます。td 要素、th 要素、t r要素のalign属性は「推奨されない」属性ではないのですが、要素によっては、align 属性は「推奨されない」属性の場合があるので、廃止予定か分からない場合で、文字列の横の配置を指定したい場合は CSS の text-align プロパティを使いましょう!

使用例

では実際にalign属性の属性値を「left」、「center」、「right」に指定して、th要素の文字列の横方向の位置をそれぞれ左揃え、中央揃え、右揃えにしてみましょう!

記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>

<table border="1" cellpadding="10" width="500">
<tr>
<th align="left">1つ目の見出しセル</th>
<th align="center">2つ目の見出しセル</th>
<th align="right">3つ目の見出しセル</th>
</tr>
<tr>
<td rowspan="2">2行目、1つ目のセル</td>
<td>2行目、2つ目のセル</td>
<td>2行目、3つ目のセル</td>
</tr>
<tr>
<td>3行目、2つ目のセル</td>
<td>3行目、3つ目のセル</td>
</tr>
</table>

</body>
</html>

使用例の表示

[align属性の値を「center」に指定する前の表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 1つ目の見出しセル 1つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、2つ目のセル 3行目、3つ目のセル
↓
[align属性の値を「center」に指定した後の表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 1つ目の見出しセル 1つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、2つ目のセル 3行目、3つ目のセル

これで th 要素の文字列がそれぞれ右揃え、中央揃え、右揃えになりました!

関連情報ページ

このタグによく使われるCSS

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system