[html]colspanとrowspan属性でテーブルの行と列をつなぐサンプル
環境
Google Chrome 104.0.5112.102
書式
<td colspan="横につなげるセルの数" rowspan="縦につなげるセルの数">
colspanとrowspanを指定して、テーブルの行と列をcolspanとrowspanでつなげています。
セルを横に2つつなげる場合、colspan="2″とします。
セルを縦に2つつなげる場合、rowspan="2″とします。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
table{border-collapse:collapse;}
table td{border:2px solid}
.cft{background:yellowgreen}
</style>
</head>
<body>
<table style="width: 60%;">
<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%;">
<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%;">
<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>