使用Thymeleaf的th:block实现合并单元格表格遇语法错误求助

遇到的错误 #

尝试用Thymeleaf的th:block标签生成目标表格时，先后出现两个语法错误：

• 错误1：The element type "th:block" must be terminated by the matching end-tag "</th:block>"
• 错误2：The end-tag for element type "tr" must end with a '>' delimiter.

期望的表格格式 #

------------------------------------------------------
  Map Name  |  Sub Name  |  Now  |  Past  |  Future  |
------------------------------------------------------
  First     |    time    | asfas | lsefa  | saeflkjle|
            ------------------------------------------
            |    sleifj  | dsff  | sfesf  | sefasefa |
------------------------------------------------------
  Second    |    time    | asfas | lsefa  | saeflkjle|
            ------------------------------------------
            |    sleifj  | dsff  | sfesf  | sefasefa |
------------------------------------------------------

数据结构 #

Java定义 #

Map<String, Map<String, Map<String, Long>>> result = new HashMap<>();

（注：原代码中Maps为笔误，修正为标准Map）

JSON示例 #

{
  "First": {
    "time": {
      "now": "",
      "past": "",
      "future": ""
    },
    "sleifj": {
      "now": "",
      "past": "",
      "future": ""
    }
  },
  "Second": {
    "time": {
      "now": "",
      "past": "",
      "future": ""
    },
    "sleifj": {
      "now": "",
      "past": "",
      "future": ""
    }
  }
}

正确实现代码 #

要实现跨行的Map Name列，同时避免标签语法错误，可使用如下Thymeleaf代码：

<table border="1" cellpadding="4" cellspacing="0">
  <thead>
    <tr>
      <th>Map Name</th>
      <th>Sub Name</th>
      <th>Now</th>
      <th>Past</th>
      <th>Future</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历外层Map（First、Second） -->
    <th:block th:each="entry : ${result}">
      <tr>
        <!-- Map Name单元格跨行，行数等于内层Sub Name的数量 -->
        <td th:rowspan="${entry.value.size()}" th:text="${entry.key}"></td>
        <!-- 处理第一个Sub Name -->
        <td th:text="${entry.value.keySet().toArray()[0]}"></td>
        <td th:text="${entry.value.get(entry.value.keySet().toArray()[0]).get('now')}"></td>
        <td th:text="${entry.value.get(entry.value.keySet().toArray()[0]).get('past')}"></td>
        <td th:text="${entry.value.get(entry.value.keySet().toArray()[0]).get('future')}"></td>
      </tr>
      <!-- 处理剩余的Sub Name -->
      <th:block th:each="subEntry, stat : ${entry.value}" th:if="${!stat.first}">
        <tr>
          <td th:text="${subEntry.key}"></td>
          <td th:text="${subEntry.value.get('now')}"></td>
          <td th:text="${subEntry.value.get('past')}"></td>
          <td th:text="${subEntry.value.get('future')}"></td>
        </tr>
      </th:block>
    </th:block>
  </tbody>
</table>

错误原因说明 #

1. 第一个错误是因为th:block是闭合标签，必须明确书写</th:block>，不能使用自闭合写法。
2. 第二个错误是由于tr标签的结束符书写不规范（比如漏写>），需确保所有HTML标签的开闭符合标准语法。

样式匹配说明 #

如果需要和期望格式完全一致的分隔线样式，可添加CSS调整：

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #000;
  text-align: center;
}

内容的提问来源于stack exchange，提问作者StevePark