HTMLの基礎～rowspanとcolspan

rowspan(縦にセルを連結する数を指定します)とcolspan(横にセルを連結する数を指定します)を確認していきます

<th>タグ、<td>タグにrowspan属性を入力すると、セルを横方向に連結することができます。　colspan属性の値には、「つなげられるセルの数」を数字で指定できる様になります

<th>タグ、<td>タグにrowspan属性を入力すると、セルを縦方向に連結することができます。　rowspan属性の値には、「つなげられるセルの数」を数字で指定できる様になります

このようにボックスを作ることができるのがrowspanとcolspan、２つ一気に使うと上記の様になります。

上記のコードになります。

table>
    <tr>
        <th>Column 1 </th>
        <th>Column 2 </th>
        <th>Column 3 </th>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>
    </tr>
    <tr>
        <td rowspan="2">Row 3cell 1,also spanning Row 4, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row4cell 2</td>
        <td>Row4cell 3</td>
    </tr>
</table>

例えば他にもこの様な例があります。

ROWSPANのみ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
<table>
 <BODY>

<TABLE border="1">
<TR>
<TD rowspan="3">商品一覧</TD>
<TD>焼き肉のタレ</TD>
<TD>100</TD>
<TD>300円</TD>
</TR>
<TR>
<TD>しゃぶしゃぶのタレ</TD>
<TD>200</TD>
<TD>700円</TD>
</TR>
<TR>
<TD>ポン酢</TD>
<TD>300</TD>
<TD>200円</TD>
</TR>
</TABLE>
#

</BODY>
</table>
</body>
</html>

これは以下の様になる

colspan

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
<table>
 <BODY>

<TABLE border="1">
<TR>
<TD colspan="3">商品一覧</TD>
</TR>
<TR>
<TD>焼き肉のタレ</TD>
<TD>100</TD>
<TD>300円</TD>
</TR>
<TR>
<TD>しゃぶしゃぶのタレ</TD>
<TD>200</TD>
<TD>700円</TD>
</TR>
<TR>
<TD>ポン酢</TD>
<TD>300</TD>
<TD>200円</TD>
</TR>
</TABLE>
</BODY>
</table>
</body>
</html>

前のページ②HTMLの基礎～abbrとblockquoteとciteとcode

③HTMLの基礎～rowspanとcolspan

HTMLの基礎～rowspanとcolspan

rowspan(縦にセルを連結する数を指定します)とcolspan(横にセルを連結する数を指定します)を確認していきます

ROWSPANのみ

colspan

スポンサーリンク