htmlタグとcss−すぐに使えるサンプルと小技集

■Site_TOP htmlタグとcss ■Link_Page 相互リンクサイトさま

---

スポンサード リンク

---

◆HTML&CSS◆ table作成編

---

htmlでテーブルを自作する方法です。

使うhtmlタグは、 <table></table> <tr></tr> <th></th> <td></td> です。



テーブルを作ってみよう。

---

1、まずはtableタグ。
<table width=400 align=center border=0 cellspacing=0 cellpadding=0>
</table>

2、trとtdを追加 align=centerを削除。
<table width=400 border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=400>テーブル欄1</td>
</tr>
</table>

3、段数を増やしてみる。
<table width=400 border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=400>テーブル欄1</td>
</tr>
<tr>
<td width=400>テーブル欄2</td>
</tr>
<tr>
<td width=400>テーブル欄3</td>
</tr>
<tr>
<td width=400>テーブル欄4</td>
</tr>
</table>

4、一段に割り当てられる欄数を増やしてみる。
<table width=400 border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=100>テーブル欄1</td> <td width=100>テーブル欄5</td> <td width=100>テーブル欄9</td> <td width=100>テーブル欄D</td>
</tr>
<tr>
<td width=100>テーブル欄2</td> <td width=100>テーブル欄6</td> <td width=100>テーブル欄A</td> <td width=100>テーブル欄E</td>
</tr>
<tr>
<td width=100>テーブル欄3</td> <td width=100>テーブル欄7</td> <td width=100>テーブル欄B</td> <td width=100>テーブル欄F</td>
</tr>
<tr>
<td width=100>テーブル欄4</td> <td width=100>テーブル欄8</td> <td width=100>テーブル欄C</td> <td width=100>テーブル欄0</td>
</tr>
</table>

5、tdタグの一部をthタグへ。
<table width=400 border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=100>テーブル欄1</td> <th width=100>テーブル欄5</th> <th width=100>テーブル欄9</th> <th width=100>テーブル欄D</th>
</tr>
<tr>
<th width=100>テーブル欄2</th> <td width=100>テーブル欄6</td> <td width=100>テーブル欄A</td> <td width=100>テーブル欄E</td>
</tr>
<tr>
<th width=100>テーブル欄3</th> <td width=100>テーブル欄7</td> <td width=100>テーブル欄B</td> <td width=100>テーブル欄F</td>
</tr>
<tr>
<th width=100>テーブル欄4</th> <td width=100>テーブル欄8</td> <td width=100>テーブル欄C</td> <td width=100>テーブル欄0</td>
</tr>
</table>

6、colspanを導入。
<table width=400 border=0 cellspacing=0 cellpadding=0>
<tr>
<th width=300 colspan="3">テーブル欄1</th> <th width=100>テーブル欄D</th>
</tr>
<tr>
<th width=100>テーブル欄2</th> <td width=100>テーブル欄6</td> <td width=100>テーブル欄A</td> <td width=100>テーブル欄E</td>
</tr>
<tr>
<th width=100>テーブル欄3</th> <td width=100>テーブル欄7</td> <td width=100>テーブル欄B</td> <td width=100>テーブル欄F</td>
</tr>
<tr>
<th width=100>テーブル欄4</th> <td width=100>テーブル欄8</td> <td width=100>テーブル欄C</td> <td width=100>テーブル欄0</td>
</tr>
</table>

7、rowspanとvalign="top"を導入。
<table width=400 border=0 cellspacing=0 cellpadding=0>
<tr>
<th width=300 colspan="3">テーブル欄1</th> <th width=100>テーブル欄D</th>
</tr>
<tr>
<th width=100>テーブル欄2</th> <td width=100>テーブル欄6</td> <td width=100>テーブル欄A</td> <td width=100 rowspan="3" valign="top">テーブル欄E</td>
</tr>
<tr>
<th width=100>テーブル欄3</th> <td width=100>テーブル欄7</td> <td width=100>テーブル欄B</td>
</tr>
<tr>
<th width=100>テーブル欄4</th> <td width=100>テーブル欄8</td> <td width=100>テーブル欄C</td>
</tr>
</table>

8、色を付けてみる。
<table width=400 border=0 cellspacing=0 cellpadding=0>
<tr>
<th width=300 colspan="3" bgcolor="#88CC88">テーブル欄1</th> <th width=100 bgcolor="#AACCAA">テーブル欄D</th>
</tr>
<tr>
<th width=100 bgcolor="#AACCAA">テーブル欄2</th> <td width=100>テーブル欄6</td> <td width=100>テーブル欄A</td> <td width=100 rowspan="3" valign="top" bgcolor="#CCAAAA">テーブル欄E</td>
</tr>
<tr>
<th width=100 bgcolor="#AACCAA">テーブル欄3</th> <td width=100>テーブル欄7</td> <td width=100>テーブル欄B</td>
</tr>
<tr>
<th width=100 bgcolor="#AACCAA">テーブル欄4</th> <td width=100>テーブル欄8</td> <td width=100>テーブル欄C</td>
</tr>
</table>

9、完成したテーブル。


10、tableのborder=0 cellspacing=0 cellpadding=0をいじると見た目がちょっと変わります。



テーブルや表の作成法。

---

• 表のサンプルソース集
• tableの作成
• formの作成
• menuの作成

スポンサード リンク

---