|
表の作り方
|
・<table>～</table> … 罫線なし（枠なし）の表
・<table>～</table border> … 罫線あり（枠あり）の表
<table>～</table>内に<tr>と<td>を記述していく
・<tr>と<td>の違い
<tr>～</tr> … 行
<td>～</td> … 列
必要な数だけ、<tr>と<td>を追加する。
|
例）
・タグの記述 → 詳細な例
<table border>
<tr>
<td>1行目の1列目</td>
<td>1行目の2列目</td>
</tr>
<tr>
<td>2行目の1列目</td>
<td>2行目の2列目</td>
</tr>
</table>
・InternetExploreで見たとき
| 1行目の1列目 |
1行目の2列目 |
| 2行目の1列目 |
2行目の2列目 |
|
・幅や高さの変え方
縦幅 ･･･ <td height="30"> （30という数値を変更することで縦幅が変わる）
横幅 ･･･ <td width="100"> （100という数値を変更することで横幅が変わる）
両方 ･･･ <td height="30" width="100"> （数値を変えることで横幅、縦幅が変わる）
※同じ行で、高さを変えた場合は、最大の値が適用されます。
※同じ列で、幅を変えた場合は、最大の値が適用されます。
|
例）
・タグの記述
<table border>
<tr>
<td height="40" width="100">１行目の１列目</td>
<td width="200">１行目の2列目</td>
</tr>
<tr>
<td height="80">2行目の1列目</td>
<td>2行目の2列目</td>
</tr>
</table>
・InternetExploreで見たとき
| １行目の１列目 |
１行目の2列目 |
| 2行目の1列目 |
2行目の2列目 |
|
・表の文字列の位置の変更
右寄せ ･･･ <td align="right">
中央寄せ ･･･ <td align="center">
左寄せ ･･･ <td align="left">
※デフォルトでは左寄せになっている
|
例）
・タグの記述
<table border>
<tr>
<td width="200">何も書かない場合</td>
<td align="right" width="200">右寄せ</td>
</tr>
<tr>
<td align="center" width="200">中央寄せ</td>
<td align="left" width="200">左寄せ</td>
</tr>
</table>
・InternetExploreで見たとき
|
・表を画面の中央に寄せる場合
<table>～</table>を<center>タグで囲う。
|
例）
・タグの記述
<center>
<table border>
<tr>
<td width="200">何も書かない場合</td>
<td align="right" width="200">右寄せ</td>
</tr>
<tr>
<td align="center" width="200">中央寄せ</td>
<td align="left" width="200">左寄せ</td>
</tr>
</table>
</center>
・InternetExploreで見たとき
|