セルの縦や横の一部分を結合した表
使うことがあるかもしれないセルの縦や横の一部分を結合した表です。
表の一部分を結合させてテキストの表示を中央揃えなどにしています。
セルの縦の一部分を結合した表
rowspanを使って縦に結合し、valign="middle"でテキストの表示位置を変えています。
<table border="1"> <tr> <td rowspan="4" valign="middle">テキスト</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"でテキストの表示位置を変えています。
<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>
(表示例)
テキスト | ||
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |