Tableのセルを結合するぞ！

こんにちは皆さん、今回は前回学習したテーブルタグから少しだけHTMLを足してさらにオリジナル感を出せるようにパワーアップしていこうと思います。

01テーブルの位置と名前

テーブルの位置と名前を忘れた方はこれをチラ見しながら進んでください。

thead	<tr1><th1>	<tr2><th2>	<tr3><th3>	<tr4><th4>
tbody tr 1st	<td1>	<td2>	<td3>	<td4>
tbody tr 2nd	<td1>	<td2>	<td3>	<td4>

01実際に結合してみるよ

水平方向に結合してみる

属性はcolspan="＃"を使用します。＃には結合するセルの数を入力します。

水平方向に結合したよ
男性トイレ	女性トイレ	共同トイレ

HTML

<table>
  <tr>
    <td colspan="3">水平方向に結合したよ</td>
  </tr>
  <tr>
    <td>男性トイレ</td><td>女性トイレ</td><td>共同トイレ</td>
  </tr>
 </table>

垂直方向に結合してみる

属性はrowspan="＃"を使用します。＃には結合するセルの数を入力します。
最初の<tr>の中だけ気をつけて入力するようにしてください。

　

垂直方向に結合したよ	男性トイレ
	女性トイレ
	共同トイレ

HTML

<table>
  <tr>
    <td rowspan="3">垂直方向に結合したよ</td>
    <td>男性トイレ</td>
  </tr>
　<tr>
    <td>女性トイレ</td>
  </tr>
  <tr>
    <td>共同トイレ</td>
  </tr>
</table>

縦も横も結合してみる

属性はcolspanとrowspanを使用します。
最初の<tr>の中に結合部分を作ってみます。

　

縦3つ、横2つを結合 トイレの配置		個室1
		個室2
		個室3
男性用	男子用	個室4

HTML

<table>
  <tr>
    <td colspan="2" rowspan="3">縦3つ、横2つを結合<br>トイレの配置</td>
   <td>個室1</td>
  </tr>
　<tr>
    <td>個室2</td>
  </tr>
  <tr>
    <td>個室3</td>
  </tr>
<!--ここからは最後の一列になります-->
  <tr>
    <td>男性用</td>
    <td>男子用</td>
    <td>個室4</td>
</tr>
</table>

---