[HTML]tableの右上の文字を右揃えにする

久しぶりにコーディングをしました。

HTMLソースを修正していく中で、「おっ！これは使えるな」と感動した書き方を共有したいと思います。

文字の右端を、表の右端に合わせる

今回はHTML。

やりたいことは「表の右上に表示されている文字の右端を、表の右端に合わせる」です。

こういう単純なことほど、どう実装すべきか悩みますよね。

修正前

<table width="80%" align=center border=1>
<div align=right>tableの右上に表示したい！</div>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>要素1</td>
<td>要素2</td>
</tr>
</table>

なるほど。

<table>内に<div>を作り、そこに表示したい文字列を書いているようです。

でもこれだと、<table>のwidth=”80%”が効かなくて、表を突き抜けて表示しちゃうみたいですね。

修正後

色々悩んだ結果、今回は<caption>を使用することにしました。

これなら<caption>を右寄せするだけで、表の右端に合わせて文字が表示されるはず。

<table width="80%" align=center border=1>
<caption style="text-align:right">tableの右上に表示したい！</caption>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>要素1</td>
<td>要素2</td>
</tr>
</table>

うまくいきました。

注意すべき点は、<caption>は<table>の直後に書くこと！

じゃないと認識されないみたいです。

ちなみに<table width=”100%”>の場合は、<div>でも<caption>でも見た目は変わりませんでした。

<div>はとても便利ですが、<table>内で使う時は要注意ですね。

<thead>を使うか迷ったのですが、それだと枠線が表示されてしまい、いちいち消すのが面倒だったのでやめました。

こんな方法もあるよ！とひらめいた方は是非教えてください。