ブログ、Webページで表組を作る方法、表を描く方法（HTMLのtable組）

ブログ、Webページで表組を作る方法、表を描く方法を紹介。

スラスラわかるHTML&CSSのきほん

例1：2行2列（見出し有り）

1行1列（見出し1）	1行2列（見出し2）
2行1列	2行2列

HTMLソース

<table>

<tbody>

<tr><th> 1行1列（見出し1）</th><th>1行2列（見出し2）</th></tr>

<tr>

<td>2行1列</td>

<td>2行2列</td>

</tr>

</tbody>

</table>

例2：2行2列（見出し無し）

1行1列	1行2列
2行1列	2行2列

HTMLソース

<table>

<tbody>

<tr>

<td>1行1列</td>

<td>1行2列</td>

</tr>

<tr>

<td>2行1列</td>

<td>2行2列</td>

</tr>

</tbody>

</table>

例3：7行2列（見出し有り）

1行1列（見出し1）	1行2列（見出し2）
2行1列	2行2列
3行1列	3行2列
4行1列	4行2列
5行1列	5行2列
6行1列	6行2列
7行1列	7行2列

HTMLソース

<table>

<tbody>

<tr><th> 1行1列（見出し1）</th><th>1行2列（見出し2）</th></tr>

<tr> 

<td>2行1列</td>

<td>2行2列</td>

</tr>

<tr>

<td>3行1列</td>

<td>3行2列</td>

</tr>

<tr>

<td>4行1列</td>

<td>4行2列</td>

</tr>

<tr>

<td>5行1列</td>

<td>5行2列</td>

</tr>

<tr>

<td>6行1列</td>

<td>6行2列</td>

</tr>

<tr>

<td>7行1列</td>

<td>7行2列</td>

</tr>

</tbody>

</table>

例3：7行2列（見出し無し）

1行1列	1行2列
2行1列	2行2列
3行1列	3行2列
4行1列	4行2列
5行1列	5行2列
6行1列	6行2列
7行1列	7行2列

HTMLソース

<table>

<tbody>

<tr>

<td>1行1列</td>

<td>1行2列</td>

</tr>

<tr>

<td>2行1列</td>

<td>2行2列</td>

</tr>

<tr>

<td>3行1列</td>

<td>3行2列</td>

</tr>

<tr>

<td>4行1列</td>

<td>4行2列</td>

</tr>

<tr>

<td>5行1列</td>

<td>5行2列</td>

</tr>

<tr>

<td>6行1列</td>

<td>6行2列</td>

</tr>

<tr>

<td>7行1列</td>

<td>7行2列</td>

</tr>

</tbody>

</table>

例5：7行3列（見出し有り）

1行1列（見出し1）	1行2列（見出し2）	1行3列（見出し3）
2行1列	2行2列	2行3列
3行1列	3行2列	3行3列
4行1列	4行2列	4行3列
5行1列	5行2列	5行3列
6行1列	6行2列	6行3列
7行1列	7行2列	7行3列

HTMLソース

<table>

<tbody>

<tr><th> 1行1列（見出し1）</th><th>1行2列（見出し2）</th><th>1行3列（見出し3）</th></tr>

<tr>

<td>2行1列</td>

<td>2行2列</td>

<td>2行3列</td>

</tr>

<tr>

<td>3行1列</td>

<td>3行2列</td>

<td>3行3列</td>

</tr>

<tr>

<td>4行1列</td>

<td>4行2列</td>

<td>4行3列</td>

</tr>

<tr>

<td>5行1列</td>

<td>5行2列</td>

<td>5行3列</td>

</tr>

<tr>

<td>6行1列</td>

<td>6行2列</td>

<td>6行3列</td>

</tr>

<tr>

<td>7行1列</td>

<td>7行2列</td>

<td>7行3列</td>

</tr>

</tbody>

</table>

作りながら学ぶ HTML/CSSデザインの教科書