| ■ テーブルを作る |
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
| ■ テーブルに枠線をつける |
<table border>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
| ■ 外枠線の幅を指定する |
<table border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border="5">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border="10">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
| ■ テーブルにタイトルをつける |
<table border>
<caption>title</caption>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
| ■ タイトルの位置を指定する |
<table border>
<caption align="top">title</caption>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border>
<caption align="bottom">title</caption>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
| ■ 見出しセルを指定する |
|
<th>で指定した見出しセルは、太字でセンタリングされます。
<table border>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
|
<table border>
<tr><th>1</th><td>2</td><td>3</td></tr>
<tr><th>4</th><td>5</td><td>6</td></tr>
<tr><th>7</th><td>8</td><td>9</td></tr>
</table>
|
| ■ セルとセルの間隔を指定する |
<table border cellspacing="0">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border cellspacing="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border cellspacing="5">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border cellspacing="10">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
| ■ セルとセルの中の文章との間隔を指定する |
<table border cellpadding="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border cellpadding="5">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border cellpadding="10">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
| ■ テーブルの大きさを指定する |
<table border width="200" height="100">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border width="100" height="200">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
| ■ セルの大きさを指定する |
<table border>
<tr><td width="100" height="50">1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td width="50" height="100">4</td></tr>
</table>
|
| ■ 見出しセルの大きさを指定する |
<table border>
<tr><th width="100" height="50">1</th><th>2</th><th>3</th></tr>
<tr><td>4</td><td>5</td>td>6</td></tr>
<tr><td>7</td><td>8</td>td>9</td></tr>
</table>
|
| ■ 列の中にある文章の位置を指定する |
<table border width="150" height="150">
<tr align="left" valign="top"><td>1</td><td>2</td><td>3</td></tr>
<tr align="center" valign="middle"><td>4</td><td>5</td>td>6</td></tr>
<tr align="right" valign="bottom"><td>7</td><td>8</td>td>9</td></tr>
</table>
|
| ■ セルの中にある文章の位置を指定する |
<table border width="100" height="100">
<tr><td>1</td><td align="left" valign="top">2</td></tr>
<tr><td align="center" valign="middle">3</td><td align="right" valign="bottom">4</td></tr>
</table>
|
| ■ 見出しセルの中にある文章の位置を指定する |
<table border width="150" height="150">
<tr><th align="left" valign="top">1</th><th align="center" valign="middle">2</th><th align="right" valign="bottom">3</th></tr>
<tr><td>4</td><td>5</td>td>6</td></tr>
<tr><td>7</td><td>8</td>td>9</td></tr>
</table>
|
| ■ テーブルの背景色を指定する |
<table border bgcolor="purple">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
| ■ セルの背景色を指定する |
<table border>
<tr><td bgcolor="#ffff00">1</td><td bgcolor="#00ff00">2</td></tr>
<tr><td bgcolor="#ff00ff">3</td><td bgcolor="#ff0000">4</td></tr>
</table>
|
|
背景色の応用で、テーブルに影をつけることができます。
<table cellspacing="0" cellpadding="0" width="50">
<tr>
<td width="5" height="5" bgcolor="#fed0e0"></td>
<td bgcolor="#fed0e0"></td>
<td bgcolor="#fed0e0"></td>
<td width="5"></td>
</tr>
<tr>
<td bgcolor="#fed0e0"></td>
<td bgcolor="#fed0e0">1</td>
<td bgcolor="#fed0e0">2</td>
<td bgcolor="#cccccc"></td>
</tr>
<tr>
<td bgcolor="#fed0e0"></td>
<td bgcolor="#fed0e0">3</td>
<td bgcolor="#fed0e0">4</td>
<td bgcolor="#cccccc"></td>
</tr>
<tr>
<td height="5"></td>
<td bgcolor="#cccccc"></td>
<td bgcolor="#cccccc"></td>
<td bgcolor="#cccccc"></td>
</tr>
</table>
|
| ■ テーブルの枠線の色を指定する |
<table border bordercolor="#0000ff">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>
|
<table border="5" bordercolor="green">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>
|
<table cellspacing="0" border="10" bordercolor="pink">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>
|
| ■ テーブルの枠線を立体的にする |
|
bordercolorlightで上と左の線、bordercolordarkで下と右の線の色を指定します。
テーブルの枠線だけじゃなく、セルの枠線の色も指定されます。
<table border="4" bordercolorlight="#66ccff" bordercolordark="#0000ff">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>
|
<table cellspacing="0" border="7" bordercolorlight="#ddb7ba" bordercolordark="#880033">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>
|
|
セルの枠線の色が指定されることを応用すると、こんなこともできます。
<table cellspacing="0" bgcolor="#ffcccc" border bordercolorlight="#000000" bordercolordark="#ffffff">
<tr><td>1</td><td >2</td></tr>
<tr><td >3</td><td >4</td></tr>
</table>
|
<table cellspacing="0" cellpadding="5" bgcolor="#66ccff" border bordercolorlight="#000000" bordercolordark="#ffffff">
<tr><td>1</td><td >2</td><td >3</td></tr>
<tr><td >4</td><td >5</td><td >6</td></tr>
</table>
|
| ■ テーブルの背景画像を指定する |
<table border cellpadding="10" cellspacing="5" background="sample/table_image1.gif">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
|
背景に写真を使うときは、テーブルの大きさに注意しましょう。
<table border cellspacing="10" background="sample/table_image2.jpg" width="250" height="187">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
|
| ■ セルの横連結 |
<table border>
<tr><td colspan="2">1</td><td>2</td></tr>
<tr><td>3</td><td>4</td><td>5</td></tr>
</table>
|
<table border>
<tr><td colspan="5">1</td></tr>
<tr><td>2</td><td>3</td><td>4</td>td>5</td><td>6</td></tr>
</table>
|
| ■ セルの縦連結 |
<table border>
<tr><td rowspan="3">1</td><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>
|
<table border="5" cellspacing="5" width="350" height="150">
<tr>
<td bgcolor="orange" align="left" colspan="2">２つのセルを横連結</td>
<td bgcolor="pink" align="right" rowspan="2">２つのセルを縦連結</td>
</tr>
<tr>
<td bgcolor="yellow" valign="top">上</td>
<td bgcolor="yellowgreen" align="center" valign="middle">真ん中</td>
</tr>
<tr>
<td background="sample/table_image3.gif" colspan="3">３つのセルを横連結</td>
</tr>
</table>
| ２つのセルを横連結 |
２つのセルを縦連結 |
| 上 |
真ん中 |
| ３つのセルを横連結 |
|
| ■ テーブルの背景画像を指定する [スタイルシート] |
<table border cellpadding="10" cellspacing="5" style="background-image:url('sample/table_image4.gif');">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
|
<table border cellspacing="10" style="background-image:url('sample/table_image5.jpg');" width="250" height="187">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
|
