「html」colgroup属性でテーブルのcolspanの列幅を指定する
環境
Google Chrome 104.0.5112.102
構文
1.colgroupの設定
<colgroup>
<col style="width:数値;">
</colgroup>
<colgroup>
<col style="width:数値;">
</colgroup>
<colgroup> <col style="width:数値;"> </colgroup>
colgroupを使って、colspanの列幅を指定します。
HTML の <colgroup> 要素は、表内の列のグループを定義します。
2.colspanとrowspanの設定
<td colspan="横につなげるセルの数" rowspan="縦につなげるセルの数">
colspanとrowspanを指定して、テーブルの行と列をcolspanとrowspanでつなげています。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
table{border-collapse:collapse;}
table td{border:2px solid}
.cft{background:yellowgreen}
</style>
</head>
<body>
<table style="width: 60%;">
<!-- colspanの列幅を指定-->
<colgroup>
<col style="width:15%;">
<col style="width:35%;">
<col style="width:35%;">
<col style="width:15%;">
</colgroup>
<tr>
<td>東京</td>
<!--colspanとrowspanを指定します -->
<td class="cft" colspan="2" rowspan="2">テーブルの行と列をつなぐ</td>
<td>大阪</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>55</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table{border-collapse:collapse;}
table td{border:2px solid}
.cft{background:yellowgreen}
</style>
</head>
<body>
<table style="width: 60%;">
<!-- colspanの列幅を指定-->
<colgroup>
<col style="width:15%;">
<col style="width:35%;">
<col style="width:35%;">
<col style="width:15%;">
</colgroup>
<tr>
<td>東京</td>
<!--colspanとrowspanを指定します -->
<td class="cft" colspan="2" rowspan="2">テーブルの行と列をつなぐ</td>
<td>大阪</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>55</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table{border-collapse:collapse;}
table td{border:2px solid}
.cft{background:yellowgreen}
</style>
</head>
<body>
<table style="width: 60%;">
<!-- colspanの列幅を指定-->
<colgroup>
<col style="width:15%;">
<col style="width:35%;">
<col style="width:35%;">
<col style="width:15%;">
</colgroup>
<tr>
<td>東京</td>
<!--colspanとrowspanを指定します -->
<td class="cft" colspan="2" rowspan="2">テーブルの行と列をつなぐ</td>
<td>大阪</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>55</td>
</tr>
</table>
</body>
</html>