表を横に結合する方法
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"を使うことで、テキストの位置を変えることができます。