♪ちょこっと気になるホムペ♪

♪ちょこっと気になるホムペ♪

<caption>



がい3 テーブルタグの基礎 がい3



次に表(テーブル)にタイトルをつける場合のタグを紹介します( ´・ω・`)
やり方がちょいと複雑なので、頑張って覚えてください♪



■<caption> ~ </caption>


<caption>タグ を指定すると、表にタイトルを付けられます。
標準では、表の上部中央にタイトルが表示されますが、この表示位置を変更したい場合には、 align="" や balign="" を追加して指定を行います。



align=""
"top"  ・・・ 表の上部中央に表示します(デフォルト)
"bottom"     ・・・ 表の下部中央に表示します
"center"    ・・・ 中央に表示します
"left"    ・・・ 左寄りに表示します
"right"    ・・・ 右寄りに表示します
valign=""
"top"  ・・・ 表の上部に表示します
"bottom"     ・・・ 表の下部中央に表示します


【位置の指定例】


<caption> 表の上部中央に表示 </caption>

<caption align="bottom"> 表の下部中央に表示 </caption>

<caption align="left"> 表の上部左寄りに表示 </caption>

<caption align="left" valign="bottom"> 表の下部左寄りに表示 </caption>







【使用例】



例1. 表の上部中央にタイトルを表示する場合

<table border="3" align="center" width="500">
<caption>タイトルをここに表示</caption>
<tr>
<td align="center">セル1</td>
<td align="center">セル2</td>
<td align="center">セル3</td>
<td align="center">セル4</td>
</tr>
</table>

↑のタグにより、↓のようにHP上に表示されるようになります


タイトルをここに表示
セル1 セル2 セル3 セル4



例2. 表の下部右寄りにタイトルを表示する場合

<table border="3" align="center" width="500">
<caption align="right" valign="bottom">タイトルをここに表示</caption>
<tr>
<td align="center">セル1</td>
<td align="center">セル2</td>
<td align="center">セル3</td>
<td align="center">セル4</td>
</tr>
</table>

↑のタグにより、↓のようにHP上に表示されるようになります


タイトルをここに表示
セル1 セル2 セル3 セル4



↓の画像をクリックするとトップページに戻ります。


↓↓↓   【CLICK HERE】   ↓↓↓


危険!


↑↑↑   【CLICK HERE】   ↓↓↓





© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: