タイトル

<table>

表のタグです。


<table>
<tr> <td>a</td> <td>b</td> </tr>
<tr> <td>c</td> <td>d</td> </tr>
<tr> <td>e</td> <td>f</td> </tr>
</table>

a b
c d
e f


<table border height="60" width="200">
<tr> <td>a</td> <td>b</td> </tr>
<tr> <td>c</td> <td>d</td> </tr>
<tr> <td>e</td> <td>f</td> </tr>
</table>

a b
c d
e f

heightで高さ指定。widthで幅指定。共に%で表記可能。
borderを指定しないと表が見えません。

セル結合
<table border>
<tr> <th colspan="2"> colspan="2"指定 </th> <td> A </td> </tr>
<tr> <th><th>で見出し指定</th><td rowspan="2"> rowspan="2"指定 </td> <td> B </td></tr>
<tr> <th> 見出し </th> <td> C </td> </tr>
<tr> <td>D</td> <td>E</td> <td nowrap>F</td> </tr>
</table>

colspan="2"指定 A
<th>で見出し指定 rowspan="2"指定 B
見出し C
D E

colspanで右のセルと結合。rowspanで下のセルと結合。

改行禁止
<table border>
<tr> <td > 狭いと見難いよぉ。 </td> <td nowrap> nowrapを指定すると、このセル内ではどんなに文字が長くなっても自動で改行(折り返し)をしなくなります。<br>タグを使えば強制的に改行します。 </td> </tr>
<tr> <td> あいうえお </td> <td> かきくけこ </td> </tr>
</table>

狭いと見難いよぉ。 nowrapを指定すると、このセル内ではどんなに文字が長くなっても自動で改行(折り返し)をしなくなります。<br>タグを使えば強制的に改行します。
あいうえお かきくけこ

セルの幅指定
<table border>
<tr> <td width="20">a</td> <td width="20%">b</td> </tr>
<tr> <td height="40">c</td> <td>d</td> </tr>
<tr> <td height="10%">e</td> <td>f</td> </tr>
</table>

a b
c d
e f

位置指定
<table border width="60%" height="40%">
<tr> <td align="right">a</td> <td valign="top">b</td> </tr>
<tr> <td align="center">c</td> <td valign="middle">d</td> </tr>
<tr> <td align="left">e</td> <td valign="bottom">f</td> </tr>
</table>

a b
c d
e f

余白
<table border cellpadding="15">
<tr> <td>a</td> <td>b</td> </tr>
<tr> <td>c</td> <td>d</td> </tr>
<tr> <td>e</td> <td>f</td> </tr>
</table>

a b
c d
e f

罫線の太さと影
<table border="5" cellspacing="13">
<tr> <td>a</td> <td>b</td> </tr>
<tr> <td>c</td> <td>d</td> </tr>
<tr> <td>e</td> <td>f</td> </tr>
</table>

a b
c d
e f


<table border bgcolor="337711">
<tr> <td>a</td> <td style="background:#446688">b</td> </tr>
<tr bgcolor="#bb7799"> <td>c</td> <td bgcolor="#773322">d</td> </tr>
<tr bgcolor="#443388"> <td>e</td> <td>f</td> </tr>
</table>

a b
c d
e f

セルにも<td style="background:#337711"> (<td bgcolor="#337711">)とすれば 個別に色を付けられます。
NNはstyle=の指定だと色がつきません。

前へ戻る 表紙に行く 次へ進む