読者です 読者をやめる 読者になる 読者になる

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



スポンサーリンク

 

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

  

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

スラスラわかる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デザインの教科書

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

 

 

 

follow us in feedly


スポンサーリンク