表を縦に結合する方法

スポンサーリンク

HTMLでtableタグなどで作った表を縦に結合する方法です。

表を縦に結合するには

表を縦に結合するにはrowspanを使います。
下記の表を書きかえてみます。

<table border="1">
<tr>
 <td>テキスト</td>
 <td>テキスト</td>
 <td>テキスト</td>
 </tr>
 <tr>
 <td>テキスト</td>
 <td>テキスト</td>
 <td>テキスト</td>
 </tr>
 <tr>
 <td>テキスト</td>
 <td>テキスト</td>
 <td>テキスト</td>
 </tr>
 </table>

(表示例)

テキスト テキスト テキスト
テキスト テキスト テキスト
テキスト テキスト テキスト

rowspanを使って表を縦に結合させます。

<table border="1">
<tr>
 <td rowspan="3">テキスト</td>
 </tr>
 <tr>
 <td>テキスト</td>
 <td>テキスト</td>
 <td>テキスト</td>
 </tr>
 <tr>
 <td>テキスト</td>
 <td>テキスト</td>
 <td>テキスト</td>
 </tr>
 </table>

(表示例)

テキスト
テキスト テキスト テキスト
テキスト テキスト テキスト

表を横に結合する場合

別記事でも少し書いた表を横に結合する方法です。
横に結合するにはcolspanを使います。

<table border="1">
<tr>
 <td colspan="3">テキスト</td>
 </tr>
 <tr>
 <td>テキスト</td>
 <td>テキスト</td>
 <td>テキスト</td>
 </tr>
 <tr>
 <td>テキスト</td>
 <td>テキスト</td>
 <td>テキスト</td>
 </tr>
 </table>

(表示例)

テキスト
テキスト テキスト テキスト
テキスト テキスト テキスト

まとめ

rowspanを使うことで表を縦に結合させることができます。
表を横に結合させるにはcolspanを使います。

関連記事
www.hibinokoto01.com