html - HTML Button 应该在表格内还是标签外？

Question

我有两个关于 html 表格布局的问题。

首先，我将提供一些背景知识，我正在设计一个 Django Web 应用程序，作为其中的一部分，我将列出用户在表格中存档的卡片列表。我希望这是一个允许用户添加卡片的按钮 - 这个元素应该在最终表格行内还是应该在表格之后？我只是想找出什么是常见/标准的做事方式。

其次，我稍后想对表格进行样式化，以便每个表格行(或卡片)都有自己的布局可能是这样的

************************
Card Name
***********************
Number:#####      Date:#####
other details blah, blah, blah
Manage Buttons (Edit/Delete/Etc..)
***********************

这都是表格数据，但我不确定它是否仍应在表格中或是否应在自定义 View 中。

这是我当前的 django 模板

{% include "base.html" %}
<p>Credit Cards</p>
{% if credit_cards %}
    <table border="1">
        <tr>
            <th>Name On Card</th>
            <th>Card Number</th>
        <th>Contact Number On Card</th>
        <th>Lost Button</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    {% for card in credit_cards %}
    <tr>
        <td>{{ card.name_on_card }}</td>
        <td>{{ card.card_number }}</td>
        <td>{{ card.contact_number_on_card }}</td>
        <td>
            <form action="" method="post"> {% csrf_token %}
                {% if card.is_lost %}
                    <p><input type="submit" value="I Found My Card"></p>
                {% else %}
                    <p><input type="submit" value="I Lost My Card"></p>
                {% endif %}
            </form>
        </td>
        <td>
            <form action="" method="post"> {% csrf_token %}
                <p><input type="submit" value="Edit"></p>
            </form>
        </td>
        <td>
            <form action="" method="post"> {% csrf_token %}
                <p><input type="submit" value="Delete"></p>
            </form>
        </td>
    </tr>
    {% endfor %}
    <tr><td colspan="6">Test</td></tr>
</table>
{% else %}
<p>No Credit Cards inserted yet.</p>
{% endif %}
<hr>
<p>ID Cards</p>
{% if id_cards %}
<table border="1">
    <tr>
        <th>Name On Card</th>
        <th>Card Number</th>
        <th>Issue Date</th>
        <th>Country</th>
        <th>Address</th>
    </tr>
    {% for card in id_cards %}
    <tr>
        <td>{{ card.name_on_card }}</td>
        <td>{{ card.card_number }}</td>
        <td>{{ card.issue_date }}</td>
        <td>{{ card.country }}</td>
        <td>{{ card.address }}</td>
    </tr>
    {% endfor %}
</table>    
{% else %}
    <p>No ID Cards inserted yet.</p>
 {% endif %}

<ul>
<li><a href="{% url crds_newCredit %}">Add Credit Card</a></li>
<li><a href="{% url crds_newID %}">Add ID Card</a></li>
</ul>

这仍然很粗略，但您大概可以了解总体思路。

Answer 1

通常最好将按钮放在表格之外，因为从语义上讲，按钮是在表格上操作的，因此应该是一个独立的元素。

在显示卡片 View 方面，这是个人偏好，我可能会尝试 div，因为我不想反复创建成百上千个嵌套表格。另一方面，从语义上讲，表格数据应始终在表中。