セルを結合する属性

■colspan 属性の例

colspan 属性は、横方向のセルを結合します。例えば、「colspan="2"」を 指定した場合は、そのセルと右側のセルの２つが結合します。 セルを結合したら、その分だけセルの数が減る事に注意しましょう。 仮に３行分のデータがあった場合はその行の<td>または<th>要素の数は２つになります。
<table border="1"> <tr> <td> A </td> <td> A </td> <td> B </td> </tr> <tr> <td> B </td> <td> B </td> <td> B </td> </tr> </table> A A B B B B		<table border="1"> <tr> <td colspan="2"> A </td> <td> A </td> <td> B </td> </tr> <tr> <td> B </td> <td> B </td> <td> B </td> </tr> </table> A B B B B

■rowspan 属性の例

rowspan 属性は、縦方向のセルを結合します。例えば、「rowspan="2"」を 指定した場合は、そのセルと下のセルの２つが結合します。 セルを結合したら、その分だけ次の行のセルの数が減る事に注意しましょう。 仮に３行分のデータがあった場合は次の行の<td>または<th>要素の数は２つになります。
<table border="1"> <tr> <td> A </td> <td> B </td> <td> B </td> </tr> <tr> <td> A </td> <td> B </td> <td> B </td> </tr> </table> A B B A B B		<table border="1"> <tr> <td rowspan="2"> A </td> <td> B </td> <td> B </td> </tr> <tr> <td> A </td> <td> B </td> <td> B </td> </tr> </table> A B B B B

■colspan 属性とrowspan 属性を組み合わせた例

colspan と rowspan の両方の属性を指定して、縦横にセルを結合する事もできます。 例えば、「colspan="2" rowspan="2"」を指定した場合は、 縦横の４つのセルが結合されます。
<table border="1"> <tr> <td> A </td> <td> A </td> <td> B </td> </tr> <tr> <td> A </td> <td> A </td> <td> B </td> </tr> <tr> <td> B </td> <td> B </td> <td> B </td> </tr> </table> A A B A A B B B B		<table border="1"> <tr> <td colspan="2"rowspan="2"> A </td> <td> A </td> <td> B </td> </tr> <tr> <td> A </td> <td> A </td> <td> B </td> </tr> <tr> <td> A </td> <td> B </td> <td> B </td> </tr> </table> A B B B B B