テーブルタグその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>
<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>
<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>
<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>
<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行目も同様の考え方です。
ジャンル別一覧
人気のクチコミテーマ
-
-
- しんくぱっど
- E490のNVMe-ssdカード発熱の問題を解…
- (2026-05-01 07:03:11)
-
-
-
- 楽天ブログいろいろ
- 8月こんにちはしてました8/2に251万…
- (2026-08-03 12:00:06)
-
-
-
- 携帯電話のこと
- 楽天モバイルのつながる未来を支える…
- (2026-07-25 08:00:06)
-
© Rakuten Group, Inc.
