« 動画で覚える。 | トップページ | さてHOVERの応用 »

2009年5月20日 (水)

table

本日もECサイトの続きです。
非常に tableは面白いのです。
まぁ、暇ならこんなこともできる。


●colspan

td colspan=xは、x個分の<td></td>を取り入れて右に広がります。

<table border=1>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td colspan=2>B1</td><td>B3</td></tr>
<tr><td colspan=3>C1</td></tr>
</table>

A1 A2 A3
B1 B3
C1

●rowspan

td rowspan=xは、x個分の<td></td>を取り入れて下に広がります。

<table border=1>
<tr><td>A1</td><td>A2</td><td rowspan=3>A3</td></tr>
<tr><td>B1</td><td rowspan=2>B2</td></tr>
<tr><td>C1</td></tr>
</table>

A1 A2 A3
B1 B2
C1

●colspan、rowspan

colspan、rowspanは同じtd内で使用できます。

例1)
<table border=1>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td colspan=2 rowspan=2>B2</td></tr>
<tr><td>C1</td></tr>
</table>

A1 A2 A3
B1 B2
C1

例2
<table border=1>
<tr><td colspan=2 rowspan=2>A1</td><td>A3</td></tr>
<tr><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
</table>
A1 A3
B3
C1 C2 C3

●サンプル

参考になるようなtableを作ってみました。

<table border=1>
<tr><td>A1</td><td colspan=2>A2</td><td rowspan=3>A4</td></tr>
<tr><td rowspan=2>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C2</td><td>C3</td></tr>
<tr><td colspan=3>D1</td><td>D4</td></tr>
</table>

A1 A2 A4
B1 B2 B3
C2 C3
D1 D4

◆複雑なtableを作ろう

colspanとrowspanを使いこなして複雑なtableを考えてみよう。

●サンプル


●解説

1
rA
1-cA
2
r8
2-c8 2
rA
3
r6
3-c6 3
r9
4
r4
4-c4 4
r7
5
r2
5-c2 5
r5
6_ 6
r3
7-c2
8-c3
9-c5
10-c7
11-c9

最初の数字は行数で、同行は同じ色です。
cはcolspan、rはrowspan
数は大きさを表します。(このページでは10をAで説明します)

例)3-r6 は「3行目のrowspan=6」

 

|

« 動画で覚える。 | トップページ | さてHOVERの応用 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1194467/29709913

この記事へのトラックバック一覧です: table :

» Amoxicillin and clavulanate potassium. [Amoxicillin and saliva tests.]
Amoxicillin. When amoxicillin works for acne. Amoxicillin side effects. Amoxicillin no prescription. Amoxicillin soar throat. [続きを読む]

受信: 2009年6月18日 (木) 21時24分

« 動画で覚える。 | トップページ | さてHOVERの応用 »