日々のこと

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

日々のこと

HTMLやCSSのことも書いています。

tableタグを使った表の行や列の増やし方

スポンサーリンク

tableタグを使った表の行や列の増やし方について

tableタグを使って作成した表の行や列の増やし方です。

(例)

<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 通常テキスト1行目3
通常テキスト2行目1 通常テキスト2行目2 通常テキスト2行目3

行を増やす場合

<tr>
 <th>テキスト1</th>
 <th>テキスト2</th>
 <th>テキスト3</th>
 <th>ここを増やしていく</th>
</tr>

行を増やした表示例

テキスト1 テキスト2 テキスト3 増やした部分
テキスト4 テキスト5 テキスト6 増やした部分
テキスト7 テキスト8 テキスト9 増やした部分

列を増やす場合

trタグの終わりとtableタグの終わりの間に書きます。

 <tr>
 <td>増やす部分</td>
 <td>増やす部分</td>
 <td>増やす部分</td>
 </tr>

列を増やした表示例

テキスト1 テキスト2 テキスト3
テキスト4 テキスト5 テキスト6
テキスト7 テキスト8 テキスト9
増やした部分 増やした部分 増やした部分

まとめ

tableタグを使った表の行や列の増やし方について書きました。

関連記事
www.hibinokoto01.com