tableタグを使った表の作り方
HTMLでtableタグを使って表を作る方法です。
今回はtableタグ、thタグ、tdタグ、trタグで表を作っています。
タグを使って作った表
見出しのある表です。thタグで囲んだ部分が見出しとなり、tdタグで囲んだ部分が通常のテキストとなります。
<table> <tr> <th>見出しテキスト</th> <th>見出しテキスト</th> <th>見出しテキスト</th> </tr> <tr> <td>通常テキスト1行目</td> <td>通常テキスト1行目</td> <td>通常テキスト1行目</td> </tr> <tr> <td>通常テキスト2行目</td> <td>通常テキスト2行目</td> <td>通常テキスト2行目</td> </tr> </table>
（表示例）
| 見出しテキスト1 | 見出しテキスト2 | 見出しテキスト3 |
|---|---|---|
| 通常テキスト1行目 | 通常テキスト1行目 | 通常テキスト1行目 |
| 通常テキスト2行目 | 通常テキスト2行目 | 通常テキスト2行目 |
見出し部分のセルを結合させたい場合
colspanを使うことで、セルを結合させることもできます。
<table> <tr> <th colspan="3">見出しテキスト1</th> </tr> <tr> <td>通常テキスト1行目</td> <td>通常テキスト1行目</td> <td>通常テキスト1行目</td> </tr> <tr> <td>通常テキスト2行目</td> <td>通常テキスト2行目</td> <td>通常テキスト2行目</td> </tr> </table>
（表示例）
| 見出しテキスト1 | ||
|---|---|---|
| 通常テキスト1行目 | 通常テキスト1行目 | 通常テキスト1行目 |
| 通常テキスト2行目 | 通常テキスト2行目 | 通常テキスト2行目 |
