テーブルを作成する (HTML)



HTML

CSS

公開日:2021/12/9    

■基本形

<table border="1">
<tr>                                              <!-- tr:行を定義 (table row)-->
    <th>動物</th><th>数(匹)</th> <!-- th:見出し (table header)-->
</tr>
<tr>
    <td>犬</td><td>10</td>         <!-- td:テーブルデータ (table data)-->
</tr>
<tr>
    <td>猫</td><td>20</td>
</tr>
</table>


結果は以下のとおり。

動物数(匹)
10
20


■応用形

<table border="1" width="300" height="150"> <!-- 横と縦の幅を指定 -->
<tr>
    <th colspan="2">あああ</th>                     <!-- 横に結合 -->
</tr>
<tr align="center">
    <td rowspan="2">いいい</td><td>10</td> <!-- 縦に結合 -->
</tr>
<tr>
    <td>20</td>
</tr>
</table>


結果は以下のとおり。

あああ
いいい10
20




関連記事一覧



HTML

CSS