Html 使用类div表

如何在不使用table而仅使用div的情况下进行布局？

为此使用css

dispay

属性：

`table`               Let the element behave like a <table> element 
`table-caption`       Let the element behave like a <caption> element
`table-column-group`  Let the element behave like a <colgroup> element  
`table-header-group`  Let the element behave like a <thead> element 
`table-footer-group`  Let the element behave like a <tfoot> element 
`table-row-group`     Let the element behave like a <tbody> element 
`table-cell`          Let the element behave like a <td> element    
`table-column`        Let the element behave like a <col> element   
`table-row`           Let the element behave like a <tr> element

`table`让元素的行为类似于元素
`表标题`让元素像元素一样运行
`表列组`让元素的行为类似于元素
`表标题组`让元素的行为类似于元素
`表尾组`让元素的行为类似于元素
`表行组`让元素的行为类似于元素
`table cell`让元素的行为类似于元素
`表列`让元素像元素一样工作
`表行`让元素像元素一样运行

---

来源：

您可以使用div和相应的css生成表布局。 比如说

<div class="table">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

---

你可以使用bootstrap使之成为可能。你也可以用它获得一个非常棒的页面。将bootstrap类应用于div元素。搜索bootstrap。这很简单，现在所有的Web开发人员都在公司使用它。好处是你可以用你需要的任何方式用简单的代码获得非常棒的页面。只需添加bootstrap即可文件，并使用它提供的css类。您可以根据需要使用div创建表。

您要查找的therme是或

如果你用谷歌搜索它，你会发现许多实现，但这里有一个：

HTML 结果

---

您是否试图避免使用

表
元素，因为您希望满足可访问性准则？如果是这样，请注意，简单地用
div
元素替换
表
，
tr
，
td
元素并不能解决可访问性问题。无法访问表的原因是，文本阅读器必须更加努力地工作，以使盲人能够理解您的页面。确保您的内容是可读的，没有任何列或行的概念。如果列和行是必需的，那么使用
表格
，但阅读有关标记表格以使文本阅读器能够访问该表格的内容。
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

<div id="table">
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
    <p><span class="col1">&nbsp;</span><span class="col2">&nbsp;</span><span class="col3">&nbsp;</span></p>
</div>

#table {
    width: 470px;
    border-top: 4px solid #e3e7e7;
    }

#table p {
    clear: both;
    width: 100%;
    margin: 0;
    }

#table span {
    float: left;
    padding: 0 10px;
    border-left: 1px solid #e3e7e7;
    border-bottom: 1px solid #e3e7e7;
    }

#table span.col1 {
    width: 110px;
    }

#table span.col2 {
    width: 186px;
    }

#table span.col3 {
    width: 110px;
    border-right: 1px solid #e3e7e7;
    }