python html　動的にテーブルのセルの結合をしたい

テーブルをhtml側でforループで回して、生成しているのですがth（男女）を結合して表示したいです

ループで回して男女が増えるのですが
画像の下のように結合したいです
ループの回数で動的にrowspan等で結合できたらなと思っているのですが
やり方が分かりません。

pythonとjinja２を使っております。

どなたかご教授お願いいたします。

html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6</head>
7<body>
8<table border="1">
9<!--ループ-->
10    <tr>
11      <th>男</th>
12      <td>田中</td>
13      <td>27</td>
14    </tr>
15<!--ループ終わり-->
16<!--ループ-->
17    <tr>
18      <td>佐藤</td>
19      <td>16</td>
20    </tr>
21     <tr>
22      <th>女</th>
23      <td>田中</td>
24      <td>27</td>
25    </tr>
26<!--ループ終わり-->
27  </table>
28  
29</body>
30</html>

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは
ご質問のタグに JQuery があったので、JQuery を使う前提での回答になります。

同じ内容のセルを結合するコードを自分で書いてもよいですが、それなりに大変（そう）なので、便利なものがあれば使いましょうという方針であれば、過去に類似の質問 (xx_6_6_xx さん）があり、それに対するoikashinoaさんの回答にある、jquery.rowspanizer を使うと楽かもしれません。

手元で動作確認はしていませんが、こちらのデモの、10行目の長い行をコピペで拝借してきて、

$(function() {

 $("table").rowspanizer({vertical_align: 'middle'});

});

とすればよいのではと思います。参考になれば幸いです。

追記

rowspanizerを調べてみましたが、確かに、ご質問の要件では使えそうにないですね。ご質問の要件では、

th だけを結合する。
最初の行から、ある行までの th の内容は 男 であり、
その行より後の行の th の内容は 女 である。

というものと解釈しました。このような要件を満たせばよいのであれば、以下でいかがでしょうか？

javascript
1  const headersCount = $('th').length;
2  const malesCount = $('th').filter(function() { return $(this).text() === '男'; }).length;
3  
4  $('th').get(0).rowSpan = malesCount;
5  $('th').get(malesCount).rowSpan = headersCount - malesCount;
6  $('th:not([rowspan])').remove();