Если вам нужно сверстать меню, в котором расстояние между элементами должно быть одинаковое и при этом родительский блок меню имеет автоматическую ширину, то совсем необязательно использовать для этой цели таблицу. Всё оказывается достаточно просто: можно сверстать семантическое меню через UL-LI или любой другой набор элементов (в примере DIV-SPAN). Ключевыми свойствами CSS будут text-align:justify и display:inline-block. Но только лишь этого недостаточно. Выравнивание по ширине в CSS работает по умолчанию для всех строк, исключая последнюю.

Но что если у нас первая и последняя - одна и таже строка? В этом случае есть решение! Для всех современных браузеров (включая IE8), мы создадим псевдоэлемент через :after который будет иметь ширину 100%, тем самым гарантированно будет являтся последней строкой (той самой для которой правило выравнивания не будет действовать). IE6-7 не понимают псевдоэлементов CSS :after и :before, но у них есть специальное свойство, определяющее поведение последней строки при выравнивании текста. И это свойство text-align-last.

Таким образом, у нас получилось такое меню:

<style type="text/css">
	.menu { position:relative; text-align:justify; text-align-last:justify; border:1px solid silver; height:2.2em; min-width:800px; }
	.menu span { display:inline-block; background:silver; padding:.5em 1em; cursor:pointer; text-align:center; }
	.menu span:hover { background:black; color:white; }
	.menu:after { content:""; display:inline-block; width:100%; height:0; overflow:hidden; }
</style>

<div class="menu">
	<span>About</span>
	<span>Company</span>
	<span>Products</span>
	<span>Menu item</span>
</div>

Смотреть пример в действии