③HTMLの基礎~rowspanとcolspan

スポンサーリンク

本当にわからないとこがあった場合一人では解決できません。
『teratail』とはエンジニア特化型のQ&Aサイトです。 すべてのエンジニアさんが抱えている悩みを共有して 解決するための質問サイトです
無料なのでまずは登録して使ってみてください。メールアドレスだけで登録可能です ----------------------------------------------------------------------------------------

HTMLの基礎~rowspanとcolspan

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


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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

次のページ

スポンサーリンク

プログラミングは独学からは挫折の可能性が高いです。まずは無料体験ができる
コードキャンプが本当におすすめ。無料体験でわからないところを聞きましょう。
転職補助つき。カリキュラム終了後に転職紹介をしてくれます。