日々のこと

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

表を横に結合する方法

スポンサーリンク

HTMLで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>
 <tr>
 <td>テキスト</td>
 <td>テキスト</td>
 <td>テキスト</td>
 </tr>
 </table>

(表示例)

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

結合したセルの中のテキストの位置を中央に表示したい場合

align="center"でテキストの表示位置を変えることができます。

<table border="1">
<tr>
 <td colspan="3" align="center">テキスト</td>
 </tr>
 <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>

(表示例)

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

まとめ

colspanを使うことで表を横に結合させることができます。
align="center"を使うことで、テキストの位置を変えることができます。

関連記事
www.hibinokoto01.com
www.hibinokoto01.com