Podczas korzystania z CSSdisplay:table-cell na elemencie jest to w jakiś sposób preferowane / wymagane, jakie mają elementy macierzystedisplay:table-row, idisplay:table?

Czy to może być samodzielne w dokumencie?

<div style="display:table-cell;">content</div>

Lub w stylu znaczników tabel, czy powinienem zagnieżdżać dodatkowe tagi nadrzędne za pomocą odpowiednich stylów?

<style>
.table {display:table;}
.tr {display:table-row;}
.td {display:table-cell}
}
</style>
<div class="table">
  <div class="tr">
    <div class="td">content</td>
  </div>
</div>

Używanie display: table-cell jest dobrą sztuczką do układania elementów na tej samej linii (zwłaszcza, że ​​nie jest między nimi renderowana biała przestrzeń), ale zastanawiam się, czy to tylko sztuczka. Czy mogę się spodziewać, że zachowanie może ulec zmianie w przyszłości?

Czy to stylistycznie niepoprawne? Wygląda na to, że wyświetla się konsekwentnie we wszystkich (nowoczesnych) przeglądarkach (IE7 i niższe nie obsługujądisplay:table-cell)

<style>
.cell {
  display:table-cell;
  padding:0px 5px;
  background-color:#aaaaaa;
}
</style>
<div>
  <span class="cell">option one</span>
  <span class="cell">option two</span>
  <span class="cell">option three</span>
</div>