как расположить две таблицы рядом друг с другом?

Тема в разделе "Веб-дизайн", создана пользователем Juri, 6 сен 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Juri

    Juri

    Заблокирован
    Регистр.:
    5 окт 2007
    Сообщения:
    1.065
    Симпатии:
    197
    нужно что б в одной строке было две таблицы, и между ними скажем небольшое растояние. ума не преложу как это сделать(( все время новую таблицу на новую строку скидывает. помогите нубу((
     
  2. Odium

    Odium

    Регистр.:
    26 мар 2006
    Сообщения:
    153
    Симпатии:
    81
    пробуй через стили. float: left/right
    Размер таблиц делай по 45-48%
     
  3. PhantomUA

    PhantomUA Инквизитор

    Moderator
    • Супермодератор
    Регистр.:
    2 июл 2006
    Сообщения:
    759
    Симпатии:
    1.639
    Ну например так:
    Код:
    <div>
    <div style="float:left;" width="50%">
    	<table border="1" width="100%">
    		<tr>
    			<td>&nbsp;</td>
    			<td width="50%">&nbsp;</td>
    		</tr>
    		<tr>
    			<td>&nbsp;</td>
    			<td width="50%">&nbsp;</td>
    		</tr>
    	</table>
    </div>
    <div style="float:left;" width="50%">
    	<table border="1" width="100%">
    		<tr>
    			<td>&nbsp;</td>
    			<td width="50%">&nbsp;</td>
    		</tr>
    		<tr>
    			<td>&nbsp;</td>
    			<td width="50%">&nbsp;</td>
    		</tr>
    	</table>
    </div>
    </div>
    
     
  4. parempi

    parempi Спецкор

    Регистр.:
    10 окт 2006
    Сообщения:
    157
    Симпатии:
    226
    Сделай вложенные таблицы
    PHP:
    <table cellpadding=3 cellspacing=3><tr>
    <
    td><table>сюда таблицу1</table></td>
    <
    td><table>сюда таблицу2</table></td>
    </
    tr></table>
    Расстояние:
    cellpadding="3" - отступы внутри ячеек
    cellspacing="3" пространство между ячейками

    или в стиле:
    padding:3px;
    margin:3px;
     
  5. jugene

    jugene Прохожие

    Та просто те две таблицы, вставь в третью, с тремя столбцами и одной строкой. Средний столбец - сделай такой, как расстояние тебе нужно.
     
  6. dianastorner

    dianastorner Создатель

    Регистр.:
    16 окт 2007
    Сообщения:
    28
    Симпатии:
    3
    Есть способ намного проще.
    Просто пропиши у первой таблицы стиль <table style="float:left">. И всё, вторая таблица будет отображаться рядом, а не под ней.
     
  7. lestatbbk

    lestatbbk Создатель

    Регистр.:
    10 май 2007
    Сообщения:
    15
    Симпатии:
    0
    Можно сделать через вложеные таблицы, но так увеличивается код, можно сделать Float'om

    Если вы используете float, то в любом случае для общего блока, в котором лежат таблици, нужно применить clear: both;
     
  8. Nighilanth

    Nighilanth Создатель

    Регистр.:
    7 окт 2007
    Сообщения:
    24
    Симпатии:
    0
    Если делать float, то неизбежны косяки на разных броузерах. (что для Нуба серьёзная проблема) С помощью таблиц, как показал parempi, удобнее, а код увеличится незначительно.
     
  9. Frize

    Frize Создатель

    Регистр.:
    18 ноя 2008
    Сообщения:
    42
    Симпатии:
    6
    если делать таблицу в таблице, как предложил parempi , то при растяжении одной из внутренних таблиц колонки потеряют симметричность. Если она необходима, то лучше делать блоками, тоесть, например
    Код:
    <div class="table-left"></div>
    <div class="table-right"></div>
    
    .table-left { float: left; width: 48%; }
    .table-right { float: right; width: 48%; }
    48% - по 2 % отступа между блоками в центре, в сумме 4%.
     
  10. rastarevol

    rastarevol Писатель

    Регистр.:
    9 дек 2008
    Сообщения:
    5
    Симпатии:
    2
    вот так тоже непотеряется симметричность :)

    <table cellpadding="число" cellspacing="число"><tr>
    <td width="40%"><table width="100%">сюда таблицу1</table></td>
    <td width="60%"><table width="100%">сюда таблицу2</table></td>
    </tr></table>
     
Статус темы:
Закрыта.