Подскажите пожалуйста как переделать такую таблицу в блок:

<table><tr>
<td>1</td><td>2</td><td>3</td>
</tr></table>

При этом задать каждой ячейке нужные отступы сверху, снизу и по бокам.

Почитай про display

@Sven, других способов нет? Этот я знаю,спасибо. Но у него код еще длиннее, чем если таблицой верстать. Везде ведь пишут, что блочная верстка существенно облегчает страницы.

CSS разве отменили?

@inso,

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

и CSS, соответственно.

Originally Posted by inso

Везде ведь пишут, что блочная верстка существенно облегчает страницы.

По количеству тегов, но при этом, как правило, растет CSS. Однако, если таблица нужна для отображения табличных данных, то не стоит верстать её блоками.

Еще одна задачка, которую не получается сделать. Есть вот такая блочная таблица, нижний элемент надо выравнять по правому краю основного блока. Как это сделать? На margin и padding никакой реакции.

<div style="display: table;">
	
		
		<div style="display: table-row;">
                        <div style="display: table-cell">1</div>
			<div style="display: table-cell">2</div>
			<div style="display: table-cell">3</div>
                </div>
			
		
		<div style="display:table-row;">
                        <div style="display: table-cell">4</div>
               </div>
		
</div>

Вот что нужно (без подчеркиваний):
1__2__3
______4

а костыль? =)

<div style="display: table;">
    <div style="display: table-row;">
        <div style="display: table-cell;">1</div>
        <div style="display: table-cell;">2</div>
        <div style="display: table-cell;">3</div>
    </div>
    <div style="display:table-row;">
        <div style="display: table-cell; width: 50%;"></div>
        <div style="display: table-cell; width: 50%;"></div>
        <div style="display: table-cell;">4</div>
    </div>
</div>

Вариант, как альтернатива "display:table":

<style type="text/css">
.container div { display:inline-block; }
</style>
<div class="container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div style="text-align:right; display:block;">4</div>
</div>

Если в планах перепись форума на блоки, то лучший вариант подключить бустрап и вперед)

Нужна помощь - голову уже сломал. У меня в хедере одной строкой идут логотип, основное меню по сайту, и окно логин. Переделал из таблицы в блоки, но все расползается беспощадно, пункты меню и окно логин съехали вниз гораздо ниже нижней границы блока. Даже когда присваиваю им vertical-align:top, они смещаются вверх, но высота таблицы отображается все равно больше чем должна быть (щель снизу). Если убираю ячейку с логотипом, то все нормализуется. Где тут ошибка? Высота таблицы должна быть 66px.

<div class="logo_table" style="display:table;">

	<div style="display: table-cell; text-align:left; height:66px;">ЛОГОТИП</div>
	
	<div style="display: table-cell;" align="$stylevar[right]" id="header_right_cell">
<if condition="$ad_location['ad_header_logo']">
		$ad_location[ad_header_logo]<else />&nbsp;
	</if></div>
	
<div style="display: table-cell; width:95%;"></div>
<div class="main_menu" style="display:table-cell;">
	<strong>Меню1</strong></div>
<div class="main_menu2" style="display:table-cell;">
	<strong>Меню2</strong></div>
<div class="main_menu2" style="display: table-cell;">
<strong>Меню3</strong></div>
<div class="main_menu2" style="display: table-cell;">
	<strong>Меню4</div>
<if condition="$show['guest']">
<div class="main_menu2" style="display: table-cell;">
	<strong>Меню5</strong></div></if>
<div style="display: table-cell; width:5%;"></div>

<div style="display: table-cell;">
<!-- login, pm info -->
Тут окно входа/мини кабинет
<!-- / login, pm info -->
</div>
</div>

.main_menu
{
	color: #ECEEEF;
        padding: 7px 15px 0px 15px;
        font-size: 12px;
        font-family: Helvetica, Geneva, Arial, Calibri, Tahoma, Verdana, sans-serif;
white-space:nowrap;
}
.main_menu2
{
	color: #ECEEEF;
        padding: 7px 15px 0px 15px;
        font-size: 12px;
        font-family: Helvetica, Geneva, Arial, Calibri, Tahoma, Verdana, sans-serif;
background-image: url(images/menu.png);
background-repeat: no-repeat;
white-space:nowrap;
}