テーブルは万能

テーブルレイアウトを利用するには、displayプロパティのtableという値を使います。
ul要素にdisplay: tableと指定し、li要素にはdisplay: table-cellと指定すれば、ul/li要素がtable/td要素さながらにレイアウトされます。

ul {
	list-style: none;
	display: table;
	margin: 0;
	padding: 0;
}
li {
	display: table-cell;
	text-align: center;
}

ナビゲーションを中央に配置するときも、tableならばmarginプロパティで左右にautoと指定すれば、中央に配置されるし、ul要素の横幅100%と指定すれば、親要素いっぱいに広がって。しかも、li要素の横幅はその要素の内容に合わせてよしなに伸縮してくれるんです:D。なによりclearfixしなくてよいのも良いです。

ul {
	list-style: none;
	display: table;
	margin: 0 auto;
	padding: 0;
}

ul {
	list-style: none;
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
}

もちろん、li要素の横幅を指定すれば、ボタンの横幅を統一することもできます。
td要素（＝table-cellを指定した要素）はvertical-alignプロパティで、横に並ぶ要素の縦方向の位置を制御することもできるから、下のサンプルみたくvertical-align: middleを指定すれば、要素を上下中央に揃えることができるのが特徴ですよね。けどやっぱりフロートの時と同じく、文字数によってボタンの高さはマチマチになっちゃいますね…:(。

li {
	display: table-cell;
	width: 20%;
	text-align: center;
	vertical-align: middle;
}

行数が違ってもボタンのサイズを揃える

a要素に敷いている背景色をli要素に敷くようにすれば、見ため的にはボタンの大きさは揃いますね。けれど、リンクエリア自体はさっきのままなので、文字数の少ないボタンは上の方と下の方がクリックできないまま。クリックできると思わせぶりな、意地悪ナビゲーションになっちゃいます…:(。

li {
	display: table-cell;
	width: 20%;
	text-align: center;
	vertical-align: middle;
	background: #86c0de;
}

やっぱり背景色はa要素に敷いておいて、それでいてボタンの大きさを揃えるためには、下記のようにCSSを指定します。

a要素の上下にpaddingプロパティで多めに余白を指定してa要素のリンクエリアを広げておいて、marginプロパティで上下にネガティブマージンを指定して、paddingで広げた分を元に戻します。ここでは、もともと1emだった上下のpaddingプロパティの値を5emに広げたので、marginプロパティでは上下に-4emを指定しています。
このままだとa要素の背景色が広がったままなので、li要素にoverflow: hiddenを指定することで、li要素からはみ出す部分を非表示にします。

パディングによってa要素の領域が広がるけれど、ネガティブマージンでは、親要素の領域だけ元に戻る、というトコがポイントです。
ボタンの大きさが揃って、それでいて、ボタンのどこもクリックできるようになりました:D！

li {
	display: table-cell;
	overflow: hidden;
	width: 20%;
	text-align: center;
	vertical-align: middle;
}
li a {
	cursor: pointer;
	display: block;
	margin: -4em 0;
	padding: 5em 1em;
	background: #86c0de;
}

レスポンシブにする

今のままだとスマホで見た時、いくらなんでもボタンが縦に長すぎなので、レスポンシブにデザインを調整する必要があります。とはいえ、こういったナビゲーションは、スマホで表示する際には、だいたいたて並びにすることが多いです。
下のサンプルでは、画面の横幅が767px以下の時には、ul要素もli要素もdisplay: blockにして、たて並びになるようにしてます。それから、よこ並びの時には左側に指定していた1pxのパディングは、上側に指定するように変更します。
あと、ボタンの高さを揃えるためにa要素に指定していた、ネガティブマージンや余計なパディングも必要なくなるので、元通りにしておきます。

@media screen and (max-width: 767px) {
	ul, li {
		display: block;
		width: auto;
	}
	li:nth-child(n+2) {
		padding: 1px 0 0;
	}
	li a {
		margin: 0;
		padding: 1em;
	}
}

よこ並びにするのは768px以上の時だけなので、テーブルレイアウトするためのスタイルはみんな、メディアクエリの(min-width: 768px)の中にまとめちゃえばいいですね。さすれば、(max-width: 767px)で元通りに指定し直す必要もないです！
ボタン同士の隙間は、最初に上側にパディングを指定しておいて、メディアクエリで左側に指定し直すことにします。

li:nth-child(n+2) {
	padding-top: 1px;
}
@media screen and (min-width: 768px) {
	ul {
		display: table;
	}
	li {
		display: table-cell;
		overflow: hidden;
		width: 20%;
		vertical-align: middle;
	}
	li:nth-child(n+2) {
		padding: 0 0 0 1px;
	}
	li a {
		margin: -4em 0;
		padding: 5em 1em;
	}
}

テーブルで商品一覧

テーブルレイアウトするには、displayプロパティで、ul要素にtable、li要素にtable-cellを指定するんでしたね。あとはフロートの時と全く同じく、li要素の横幅を33.333333%にしたり、10pxのパディングを指定したりします。

.itemlist {
	list-style: none;
	display: table;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0;
}
.itemlist li {
	display: table-cell;
	width: 33.333333%;
	padding: 10px;
	box-sizing: border-box;
}

テーブルなので改行しません…X0！table-cellは横へ伸び続けますが、横幅を33.333333%と指定してるからなるべくそうあろうと頑張るんだけれど、並びきらない分は小さくしてでも並ぼうと懸命で…、見てて申し訳ない気持ちでいっぱいですX(。
テーブルが折り返さないのは仕方のないことなので、ここはHTMLの構造を変更するしかないです。下のサンプルのように、ul要素をふたつに分けました。

とはいえ、幅が狭い時には、2列になったり1列になったり、とても対応しきれないー…X(。
テーブルレイアウトは、商品一覧みたいなレイアウトには向いてない、ということですね…。