Html 使用div创建表时的表对齐方式？

我有一个使用div创建的表，随着列的增长，很难识别它是表还是其他什么

       <div class="spacer">&nbsp; </div>

   <div class="tabularStructure">   
<div  id="token2">
    <div class="cell">
    <label><bdi>${Date_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="date">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token3">
        <label><bdi>${DayRange_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="dayRange">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token5">
        <label for="idFromDate"><bdi>${From_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idFromDate" name="toDate" class="date" />
    </div>

    <div class="cell" id="token4">
        <label for="idToDate"><bdi>${To_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idToDate" name="to" class="date" />
    </div>
        </div>
             </div> 

我想要什么

       <div class="spacer">&nbsp; </div>

   <div class="tabularStructure">   
<div  id="token2">
    <div class="cell">
    <label><bdi>${Date_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="date">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token3">
        <label><bdi>${DayRange_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="dayRange">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token5">
        <label for="idFromDate"><bdi>${From_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idFromDate" name="toDate" class="date" />
    </div>

    <div class="cell" id="token4">
        <label for="idToDate"><bdi>${To_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idToDate" name="to" class="date" />
    </div>
        </div>
             </div> 

我希望每行中的所有列都与另一行对齐，而不考虑宽度？ 就像一张普通的桌子

       <div class="spacer">&nbsp; </div>

   <div class="tabularStructure">   
<div  id="token2">
    <div class="cell">
    <label><bdi>${Date_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="date">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token3">
        <label><bdi>${DayRange_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="dayRange">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token5">
        <label for="idFromDate"><bdi>${From_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idFromDate" name="toDate" class="date" />
    </div>

    <div class="cell" id="token4">
        <label for="idToDate"><bdi>${To_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idToDate" name="to" class="date" />
    </div>
        </div>
             </div> 

我拥有的

<div class="tabularStructure">  
<div id="token1">
    <div class="cell">
         <label><bdi>${PredefinedSearch_Label}</bdi></label>
    </div>
    <div class="cell">
         <select id="predefineSrch">
            <option value="default">(None)</option>
        </select>   
    </div>

    <div class="cell">&nbsp;
    </div>
    <div class="cell">&nbsp;
    </div>
    <div class="cell">&nbsp;
    </div>
    <div class="cell">&nbsp;
    </div>
    <div class="cell">&nbsp;
    </div>
    <div class="cell">&nbsp;
    </div>

</div>

       <div class="spacer">&nbsp; </div>

   <div class="tabularStructure">   
<div  id="token2">
    <div class="cell">
    <label><bdi>${Date_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="date">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token3">
        <label><bdi>${DayRange_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="dayRange">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token5">
        <label for="idFromDate"><bdi>${From_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idFromDate" name="toDate" class="date" />
    </div>

    <div class="cell" id="token4">
        <label for="idToDate"><bdi>${To_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idToDate" name="to" class="date" />
    </div>
        </div>
             </div> 

${PredefinedSearch\u Label}
（无）

       <div class="spacer">&nbsp; </div>

   <div class="tabularStructure">   
<div  id="token2">
    <div class="cell">
    <label><bdi>${Date_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="date">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token3">
        <label><bdi>${DayRange_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="dayRange">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token5">
        <label for="idFromDate"><bdi>${From_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idFromDate" name="toDate" class="date" />
    </div>

    <div class="cell" id="token4">
        <label for="idToDate"><bdi>${To_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idToDate" name="to" class="date" />
    </div>
        </div>
             </div> 

${Date_Label}
（无）
${DayRange_Label}
（无）
${From_Label}
${To_Label}

---

检查小提琴上是否有完整的代码

不要像大家说的那样使用表格：p实际上你应该使用表格来处理表格数据，你不必用它来设计布局你不应该用

div

来处理表格数据，用

div

来设计布局，现在你看，这里的div太乱了，对于这个特定的示例，最好使用

表

？为什么不使用

创建表？我想要的是。。。就像普通桌子一样，然后使用一张请为您的任务使用表格。这就是为什么要发明桌子。如果您想使用div，我建议您使用一个框架，如.@Mr.Alien如果您同意使用表进行布局，那就是您的选择。只是不要假装在这个特定的实例中包含了表格数据，因为没有。W3C说你不应该这样做，并给出了令人信服的理由。在一天结束时，如果桌子是实现这一目标的绝对100%的唯一方式，那么没有人会用干草叉把你赶出城镇。

       <div class="spacer">&nbsp; </div>

   <div class="tabularStructure">   
<div  id="token2">
    <div class="cell">
    <label><bdi>${Date_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="date">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token3">
        <label><bdi>${DayRange_Label}</bdi></label>
    </div>
    <div class="cell">
        <select id="dayRange">
             <option value="default">(None)</option>
        </select>
    </div>

    <div class="cell" id="token5">
        <label for="idFromDate"><bdi>${From_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idFromDate" name="toDate" class="date" />
    </div>

    <div class="cell" id="token4">
        <label for="idToDate"><bdi>${To_Label}</bdi></label>
    </div>
    <div class="cell">
        <input type="text" id="idToDate" name="to" class="date" />
    </div>
        </div>
             </div>