テーブルを使ってみましょう。(4)

「テーブルを使ってみましょう。(3)」では

<table border="1">
<tr>
<td>1行目1列</td>
<td>1行目2列</td>
</tr>
<tr>
<td>2行目1列</td>
<td>2行目2列</td>
</tr>
</table>

と記述することで、このような表が作成出来るというところまで進めました。

1行目1列	1行目2列
2行目1列	2行目2列

今回はセルの幅を指定してみます。

1列目の幅を100px（ピクセル）、2列目の幅を200pxにします。

<table border="1">
<tr>
<td width="100">1行目1列</td>
<td width="200">1行目2列</td>
</tr>
<tr>
<td width="100">2行目1列</td>
<td width="200">2行目2列</td>
</tr>
</table>

このようになります。





(A)セルの中身が1行で収まらない場合。

<table border="1">
<tr>
<td width="100">1行目1列</td>
<td width="200">長い文章が入った場合、このように折り返されます。</td>
</tr>
<tr>
<td width="100">2行目1列</td>
<td width="200">好きなところで<br>改行することも出来ます。</td>
</tr>
</table>

1行目1列	長い文章が入った場合、このように折り返されます。
2行目1列	好きなところで 改行することも出来ます。

(B)2列目の幅を指定しない場合。

<table border="1">
<tr>
<td width="100">1行目1列</td>
<td>長い文章が入った場合、それに合わせて幅が変わります。</td>
</tr>
<tr>
<td width="100">2行目1列</td>
<td>好きなところで<br>改行することも出来ます。</td>
</tr>
</table>

1行目1列	長い文章が入った場合、それに合わせて幅が変わります。
2行目1列	好きなところで 改行することも出来ます。

次回はまた少し見栄えを整えてみましょう。

「テーブルを使ってみましょう。(5)」につづく。