Contents
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
次のページ