我如何用最佳实践div来表示这一点？

I have this table in our front end and I've been reading that DIV is the better way to code this, how would you represent the same structure in DIVs ?

我在前端有这个表,我一直在读DIV是更好的编码方式,你如何在DIV中表示相同的结构?

<table>
        <tr>
            <td colspan="6" class="title"><strong>Choose Dates</strong></td>
            <td colspan="2" class="title"><strong>Search by Name</strong></td>
            <td class="title"><strong>Status</strong></td>
        </tr>
        <tr>

            <td><input type="text" id="dateFrom" /></td>
            <td><strong>To</strong></td>
            <td></td>
            <td><input type="text" id="dateTo" /></td>

            <td><input type="checkbox"id="pendResCheckID" />Pending</td>
            <td><input type="checkbox"id="ConfResCheckID" />Confirmed</td>
            <td><input type="checkbox"id="CancResCheckID" />Canceled</td>

        </tr>
</table>

1 个解决方案

#1

You don't neccessarily need any <div>s, just make better use of the existing form elements;

您不一定需要任何

,只需更好地利用现有的表单元素;

<form>
    <fieldset>
        <legend>Choose Dates</legend>
        <input> To <input>
    </fieldset>
    <fieldset>
        <legend>Status</legend>
        <label><input type="checkbox"> Pending</label>
        <label><input type="checkbox"> Confirmed</label>
        <label><input type="checkbox"> Canceled</label>
    </fieldset>
</form>

Now, the real work lies in writing the css to style it to look like you want. I'd start with removing the border from the <fieldset> and float them next to each other.

现在,真正的工作在于编写css,使其看起来像你想要的样式。我首先从

中删除边框并将它们彼此相邻浮动。

fieldset {
    float: left;
    border: none;
}

Check out http://jsfiddle.net/ZqQRh/1/

查看http://jsfiddle.net/ZqQRh/1/

(I have left out some of the essential details and attributes as the question is primarily about the structure)

(我遗漏了一些基本的细节和属性,因为问题主要是关于结构)

#1