表のタグです。
<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 | F |
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=の指定だと色がつきません。