Question

我对html表格布局有两个问题。

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

其次，我后来想要对表进行样式化，以便每个表行（或卡）都有自己的布局，可能是这样的

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

这是所有表格数据，但我不确定它是否应该仍然在表格中，或者是否应该在自定义视图中。

这是我目前的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

通常最好将按钮保持在桌子外面，从语义上讲，按钮在桌面上操作，因此它应该是一个单独的元素。

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

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

1 个答案: