mamohoのＨＰ作成講座

mamohoのＨＰ作成講座

セルを連結してみよう

●　セルを連結してみよう

表のセルを連結してみましょう
これは　表レイアウトでもよく使うやりかたなので
頑張って覚えてください　応用次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>

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

セル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
セル２
セル3

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