453576 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

れびうぶろぐ　@楽天ブログ

れびうぶろぐ　@楽天ブログ

テーブルタグその4


7．テーブルタグその4

01.テキスト、フォント関係 02.画像の貼り方 03.リンクの貼り方 04.テーブルタグその1
05.テーブルタグその2 06.テーブルタグその3 07.テーブルタグその4 08.テーブルタグその5
09.テーブルタグその6 10.テンプレの作り方 11.テンプレの作り方-日記編 12.その他のタグ


まずテーブルの基本的な考え方が<tr></tr>で囲まれた横１行を
物事の基準に考えてるということを覚えていてください。


複数のセルを横にまたがる
<table border="1">

<tr>
<td colspan="またがる数">横2つにまたがる</td>
</tr>

<tr>
<td>1</td>
<td>2</td>
</tr>

</table>
横2つにまたがる
1 2
このようになります。

例えば <td colspan="2"></td>の場合<td></td>を2個消費したのと同じ意味合いです。
3を入力すれば3個分消費したことになります。
3を入力した場合もちろんその他の行は<td></td>が3個分なくてはいけません。


複数のセルを縦にまたがる
<table border="1">

<tr>
<td rowspan="またがる数">縦2つにまたがる</td>
<td>1</td>
</tr>

<tr>
<td>2</td>
</tr>

</table>
縦2つにまたがる 1
2
このようになります。


まずは横にまたがる場合のもう少し細かい説明をします。
1
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
2
1・2 3 4
5 6・7 8
9 10 11・12
13 14 15 16

1のソース
<TABLE border="1">

<TR>
<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD>
</TR>

<TR>
<TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD>
</TR>

<TR>
<TD>9</TD><TD>10</TD><TD>11</TD><TD>12</TD>
</TR>

<TR>
<TD>13</TD><TD>14</TD><TD>15</TD><TD>16</TD>
</TR>

</TABLE>

２のソース
<TABLE border="1">

<TR>
<TD colspan="2">1・2</TD><TD>3</TD><TD>4</TD>
</TR>

<TR>
<TD>5</TD><TD colspan="2">6・7</TD><TD>8</TD>
</TR>

<TR>
<TD>9</TD><TD>10</TD><TD colspan="2">11・12</TD>
</TR>

<TR>
<TD>13</TD><TD>14</TD><TD>15</TD><TD>16</TD>
</TR>

</TABLE>

今回の場合基本の形が4*4ですよね。
なので横にまたがる場合は横１行の<td></td>の数が全段揃えばいいわけです。
2のソースの１行目は
<TD colspan="2">1・2</TD>となっていてこれで<td></td>2つ分あり
残りの<TD>3</TD><TD>4</TD>で計4つ分ありますね。
２行目３行目も同様の考え方です。


次は縦にまたがる場合のもう少し細かい説明をします。
1
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
2
1・5 2 3 4
6・10 7 8
9 11・15 12
13 14 16

1のソース
<TABLE border="1">

<TR>
<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD>
</TR>

<TR>
<TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD>
</TR>

<TR>
<TD>9</TD><TD>10</TD><TD>11</TD><TD>12</TD>
</TR>

<TR>
<TD>13</TD><TD>14</TD><TD>15</TD><TD>16</TD>
</TR>

</TABLE>

２のソース
<TABLE border="1">

<TR>
<TD rowspan="2">1・5</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
</TR>

<TR>
<TD rowspan="2">6・10</TD>
<TD>7</TD>
<TD>8</TD>
</TR>

<TR>
<TD>9</TD>
<TD rowspan="2">11・15</TD>
<TD>12</TD>
</TR>

<TR>
<TD>13</TD>
<TD>14</TD>
<TD>16</TD>
</TR>

</TABLE>

こちらももちろん基本の形が4*4です。
基本的に考え方は横にまたがる場合とほとんど同じです。
まず1行目の1つ目のtdタグで縦に2つ分消費しています。
残り3つのtdタグは普通のままですね。
次に2行目ですが、すでに1行目の1個目のtdタグで
2行目の1個目のｔｄタグが消費されており
2行目で必要なtdタグは3個です。
3行目、4行目も同様の考え方です。


© Rakuten Group, Inc.