您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

JSP 九九乘法表輸出位置錯誤修正

編輯：程式設計疑難解答

問題現象

使用者在 JSP 中撰寫九九乘法表，發現標題「九九乘法表」跑到表格下方，而非表格上方。

錯誤程式碼分析


<table>
    <tr>
        <td>九九乘法表</td>  <!-- 錯誤：直接放在 tr 裡，無 td 包裹 -->
    </tr>
    <% for (int i=1; i<=9; i++) { %>
    <tr>
        <% for (int j=1; j<=i; j++) { %>
        <td><%= i %> x <%= j %> = <%= i*j %></td>
        <% } %>
    </tr>
    <% } %>
</table>

HTML 表格結構規則

`` 直屬子元素只能是：``、``、``、``、``

` 直屬子元素只能是：`` 或 `

`、`
`、`	` **文字節點不能直接放在 `

` 下**

修正方案

方案一：使用 `

` 跨欄


<table border="1">
    <tr>
        <th colspan="9">九九乘法表</th>
    </tr>
    <% for (int i=1; i<=9; i++) { %>
    <tr>
        <% for (int j=1; j<=i; j++) { %>
        <td><%= i %> × <%= j %> = <%= i*j %></td>
        <% } %>
    </tr>
    <% } %>
</table>

方案三：表格外獨立標題


<h3 style="text-align:center;">九九乘法表</h3>
<table border="1">
    <% for (int i=1; i<=9; i++) { %>
    <tr>
        <% for (int j=1; j<=i; j++) { %>
        <td><%= i %> × <%= j %> = <%= i*j %></td>
        <% } %>
    </tr>
    <% } %>
</table>

完整可執行 JSP 範例


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>九九乘法表</title>
    <style>
        table { border-collapse: collapse; margin: 20px auto; }
        td, th { border: 1px solid #333; padding: 8px 12px; text-align: center; }
        caption { font-size: 1.2em; font-weight: bold; margin-bottom: 8px; }
    </style>
</head>
<body>
    <table>
        <caption>九九乘法表</caption>
        <%
            for (int i = 1; i <= 9; i++) {
        %>
        <tr>
            <%
                for (int j = 1; j <= i; j++) {
            %>
            <td><%= i %> × <%= j %> = <%= i*j %></td>
            <% } %>
        </tr>
        <% } %>
    </table>
</body>
</html>