日々のこと

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

セルの縦や横の一部分を結合した表

スポンサーリンク

使うことがあるかもしれないセルの縦や横の一部分を結合した表です。
表の一部分を結合させてテキストの表示を中央揃えなどにしています。

セルの縦の一部分を結合した表

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>

(表示例)

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

まとめ

たまに使うかもしれないセルの縦や横の一部分を結合した表について書いてみました。

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