table要素はレイアウトなどの本来の『表』以外の目的に使用することが望ましくありません。そこでレイアウト目的には他のブロック要素やリスト要素をdisplay属性と一緒に使うことでこの問題を回避できます。しかしいちいちCSSのクラスにこの属性を定義するのは面倒なので、mixinにまとめてみました。ついでにZen-CodingやEmmetのコマンドも書いておきます。

display-table.html

<!-- 1*3テーブル Zen-Coding: div.tabel>ul.tr>li.td{foo-$}*3 -->
<div class="tabel">
	<ul class="tr">
		<li class="td">foo-1</li>
		<li class="td">foo-2</li>
		<li class="td">foo-3</li>
	</ul>
</div>

<!-- 3*2テーブル Zen-Coding: ul.tabel>(li.tr>ul>(li.td>lorem3)*2)*3 -->
<ul class="tabel">
	<li class="tr">
		<ul>
			<li class="td">Lorem ipsum dolor.</li>
			<li class="td">Ipsa, ipsam, fugiat.</li>
		</ul>
	</li>
	<li class="tr">
		<ul>
			<li class="td">Lorem ipsum dolor.</li>
			<li class="td">Tenetur, esse architecto.</li>
		</ul>
	</li>
	<li class="tr">
		<ul>
			<li class="td">Lorem ipsum dolor.</li>
			<li class="td">Non, tempora, eos.</li>
		</ul>
	</li>
</ul>

display-table.scss

/* table要素を使わずに */
@mixin display-table(){
  .table{display: table;}
  .it{display: inline-table;}
  .rg{display: table-row-group;}
  .hg{display: table-header-group;}
  .fg{display: table-footer-group;}
  .tr{display: table-row;}
  .cg{display: table-column-group;}
  .tc{display: table-cell;}
  .tcap{display: table-caption;}
  
  /* 必要なら以下のようにタグ名に近いクラスを再定義 */
  .th, .td{display: table-cell;}
}