[HTML]tableの右上に文字を表示する

久しぶりにコーディングをしました。
ソースを修正していく中で、「おっ!これは使えるな」と感動した書き方を共有したいと思います。

スポンサーリンク

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

今回は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>を使用することにしました。
これなら右寄せするだけで、表の右端に合わせて表示されるはず。

修正後

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

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

タイトルとURLをコピーしました