mamohoのHP作成講座

mamohoのHP作成講座

セルを連結してみよう

● セルを連結してみよう

表のセルを連結してみましょう
これは 表レイアウトでもよく使うやりかたなので
頑張って覚えてください 応用次2第では いろんな使い方ができます

セルを 横方向に連結してみます
<td> や <th> に  colspan  の属性をつけることで セルの横方向を
連結することができます

<table border="1" width="300">
<tf>
<td colspan="2" align="center">セル1</td>
</tr>
<tr>
<td align="center">セル2</td>
<td align="center">セル3</td>
</tr>
</table>

すると 下のようになります 上のセルの2つが連結してますね

セル1
セル2
セル3

今度は 縦方向に連結してみます
<th> や <td> に  rowspan  の属性をつけることで
セルの縦方向を連結させることができます

<table border="1" width="300">
<tf>
<td rowspan="2" align="center">セル1</td>
<td align="center">セル2</td>
</tr>
<tr>
<td align="center">セル3</td>
</tr>
</table>

すると 下のようになります 左の列が連結されていますね

セル1
セル2
セル3


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