テーブルタグ｜テーブルの配置

1. 水平方向の配置について
   • テーブルを中央に配置する
   • テーブルを右に配置する
   • テーブルを左に配置する
2. 水直方向の配置について
   • テーブルを中央に配置する
   • テーブルを上に配置する
   • テーブルを下央に配置する

テーブルの配置（水平方向）

align="配置"

テーブルを中央に配置する

文字・データなど

<table border="1" align="center">
<tr>
<td>文字・データなど</td>
</tr>
</table>

テーブル自体を中央寄せする場合はalign="center"を使います。

テーブルを右に配置する

文字・データなど

<table border="1" align="right">
<tr>
<td>文字・データなど</td>
</tr>
</table>

テーブル自体を右寄せする場合はalign="right"を使います。

テーブルを左に配置する

文字・データなど

<table border="1" align="left">
<tr>
<td>文字・データなど</td>
</tr>
</table>

テーブル自体を左寄せする場合はalign="left"を使います。

テーブルの配置（垂直方向）

テーブルを単体で垂直方向に対して指定する事は出来ません。

考えられる場面としてはテーブルの中にテーブルを入れた場合です。この場合、大外枠のテーブルの方に指定します。

今までの説明では<td>の中に文字とかデータを入力する形で説明してましたが、このパターンでは<td>の中にさらにテーブルを入れています。よって、大外枠の<td>の中に入るデータの配置をどうするか・・・・という考え方になります。

valign="配置"で指定します。

テーブルを中央に配置する

文字・データなど

<table border="1">
<tr>
<td valign="middle">
  <table border="1">
  <tr>
  <td>テーブル</td>
  </tr>
  </table>
</td>
</tr>
</table>

テーブルを垂直方向に対し中央寄せする場合はvalign="middle"を使います。

テーブルを上に配置する

文字・データなど

<table border="1">
<tr>
<td valign="top">
  <table border="1">
  <tr>
  <td>テーブル</td>
  </tr>
  </table>
</td>
</tr>
</table>

テーブルを垂直方向に対し上寄せする場合はvalign="top"を使います。

テーブルを下に配置する

文字・データなど

<table border="1">
<tr>
<td valign="bottom">
  <table border="1">
  <tr>
  <td>テーブル</td>
  </tr>
  </table>
</td>
</tr>
</table>

テーブルを垂直方向に対し下寄せする場合はvalign="bottom"を使います。

• 目次
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8