HTML+CSS+JavaScript

Здравтствуйте. Помогите пожалуйста с татаблицами на div и span

Мне нужна 5-6 колончатая таблица, не резиновая, не изменяющая размеры при изменении размеров браузера
3 ячейки прижаты в лево до упора
3 ячейки прижаты в права до упора
по середине остается свободное пространство

------ --------- ------            -------- --- --- |     |         |     |            |       |   |   |     ------ -------- -------            -------- --- ---

Извините эскиз не получился полностью, только 3 прижатые в лево до упора,
другую тройку прижатую вправа не выходит правильно отобразить.

Я задаю ширину и использую

<div style="width: 500px;"> <div   style="width:10px; float:left;" onclick="javascript:... " style="cursor: pointer;"> 1</div>  <div   style="width:50px; float:left;" onclick="javascript:... " style="cursor: pointer;"> 2</div>  <div   style="width:100px; float:left;" onclick="javascript:..." style="cursor: pointer;"> 3</div>  <div  style="width:10px;float:right" nowrap"  onclick="javascript:..." style="cursor: pointer;"> 4</div>  <div  style="width:50px;float:right" nowrap"  onclick="javascript:..." style="cursor: pointer;"> 5</div>  <div  style="width:100px;float:right" nowrap"  onclick="javascript:..." style="cursor: pointer;"> 6</div>  </div>

Но в разных браузерах начинаетет по разному показывать, если в ячейку вствавить еще кнопку или div или еще что то и снова все разъехалось

Пытаюсь использовать

style=padding..... style=margin....

не выходит. Бьюсь, бьюсь, только время убил

Подскажите пожалуйста, если знаете какой выход в этой ситуации

А если в середине вставить див и все семь прижать влево float:left?

техзадание изначально противоречивое
вы либо сами не представляете себе - что именно вам нужно
либо не смогли сформулировать

цитирую вас:

таблица, не резиновая, не изменяющая размеры при изменении размеров браузера 3 ячейки прижаты в лево до упора 3 ячейки прижаты в права до упора по середине остается свободное пространство

если таблица "не резиновая", то "упоров" не будет ни слева, ни справа

поясняю:
представьте себе, что вы такого добились, но для определённого (по ширине) размера окна браузера
теперь представьте, что окно браузера начинает уменьшаться или увеличиваться
таблица у вас "не резиновая", следовательно, её общий размер по ширине должен остаться тот же

спрашивается - какой именно?
единственно правильный ответ заключается в том, что посередине тогда должно быть не "свободное пространство", а див с заранее заданной ПОСТОЯННОЙ шириной

либо иначе - чтобы срединное пространство было "свободным", надо, чтобы таблица была "резиновой"

так что разберитесь СНАЧАЛА в себе сами, а потом уж задавайте свой вопрос :)

В слово уперлись, "не резиновая". Оно не несет главную смысловую нагрузку.

Главная проблема красной нитью и каленым железом всегда прошивается вот тут.
Но в разных браузерах начинает по разному показывать,.А если в ячейку вствавить еще кнопку или div или еще что то и снова все разъехалось

ДАЛЕЕЕ...
Пытаюсь использовать

style=padding.....  style=margin....

===========================================
Конечно я расплывчато написал, (так указал причину, что запарился)
Но если воспроизвести экспериментально код, который я привел, то можно словами ошибочными не питаться и не травться (извините, если шутка неудачная)
1. По сути вопрос сводится о надобности использования style=padding..... , style=margin...., style=float.... или других тегов
2. Пока пытался объянить многое исправил, ситуация изменилась на проблему кроссбраузерности с IE, ноэто уже другая проблема( http://vk.com - обявляет этот браузер устаревшим и просто требует загрузить другой, но может сейчас не так)
3. Конечно правильно для критики сформулировать альтернативу, например <TABLE>....
Какие достоинства и недостатки у <TABLE> и <div> с точки зрения кроссбраузерности, ощутимой скорости или других критериев
4. Основная заварушка перелилась в другую.
Почему то последовательность ячеек самопроизвольно меняют места

Извиняюсь, что сразу не смог, да и не могу изящно разглагольствовать о проблеме, - не спец
Сожале, что все пошло на прочь, из-за слова "резиновая" и которое оказалось вязкой топью и засасывает, как болото, незадачливых спецов (про себя)

А так, Вы мне часто помогали реально, спасибо Вам.
Но эта задачка оказалась не по зубам. Жаль, извините

ещё раз повторю, раз до вас с первого раза не дошло

+---------------------------+ |                           |<-- граница окна браузера | +-+-+-+-----------+-+-+-+ | | | | | |    ваши   | | | | | при данных размерах окна | | | | |     7     | | | | | условия "до упора" оба | | | | |   дивов   | | | | | раза выполняются | | | | |           | | | | | | +-+-+-+-----------+-+-+-+ | |                           | +---------------------------+ +------------------------------+ |                              | ширина окна УВЕЛИЧИЛАСЬ  | +-+-+-+-----------+-+-+-+    | | | | | |    ваши   | | | |    | при "НЕрезиновости" таблицы | | | | |     7     | | | |    | должно получиться ТАК | | | | |   дивов   | | | |    | условие "правого упора"  | | | | |           | | | |    | выполняться ПЕРЕСТАЛО | +-+-+-+-----------+-+-+-+    | |                              | +------------------------------+ вы до сих пор уверены, что ВЫ САМИ понимаете - что именно вам нужно?

вопросы использования внешних (margin) и внутренних (padding) отступов имеют смысл тогда,
когда ВАМИ будет ВНЯТНО объяснена общая структура

а далее уже посмотрим - "по зубам" эта задачка кому-либо или не "по зубам"

Вторая строчка сверху.
... не резиновая, не изменяющая размеры при изменении размеров браузера

Я возможно не по вашему применил термин, но контекстно я дал пояснения.

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

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

ДОЧИТАЙТЕ ХОТЬ ДО КОНЦА

Извините, мне больше не интересно и обидно, что вы так заноситесь, а вам лучше отдохнуть

завтра с утра перечитайте эту тему с начала и до конца

и попробуйте подумать:
-- кого именно из нас двоих заклинило
-- кто именно из нас двоих оскорбляет другого

За слабость художественного произведения я извинился, пояснил что, замучился.
Я же признал свою ошибку, пояснил, что я не прав.
Что же вас так сосет и ест изнутри.
Что же вы не хотите про кроссбраузерность.

У вас семантика захромала так сильно, что соввсем запятых не пишите

+------------------------------+  |                              | ширина окна УВЕЛИЧИЛАСЬ   | +-+-+-+-----------+-+-+-+    |  | | | | |    ваши   | | | |    | при "НЕрезиновости" таблицы  | | | | |     7     | | | |    | должно получиться ТАК  | | | | |   дивов   | | | |    | условие "правого упора"   | | | | |           | | | |    | выполняться ПЕРЕСТАЛО  | +-+-+-+-----------+-+-+-+    |  |                              |  +------------------------------+

Я смысл не могу понять этого Вашего предложения без знаков препинания

Я не собираюсь выяснять кто из нас умней.
Я плохой и неудачный по жизни, у меня не получается, можете не помогать, но обижать не надо.
Вы хороший, когда все уляжется, все образуется и спокойненько разберемся

Тут вопрос о кросбраузерности, другой проблемы нет.

Так, что ли?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title></title>     <style type="text/css">         div.sidediv{             border:1px solid green;             margin:2px;             max-width:100px;             width:100px;             float:left;             }         div#l-spanner{width:318px; border:1px solid blue; position:absolute; left:0; top:0}         div#r-spanner{width:318px; border:1px solid blue; position:absolute; right:0; top:0}         div#free{border:1px solid red; margin:0 auto; width:360px;}         div#spanner{width:1200px; border:1px solid yellow; position:relative;}     </style> </head> <body>     <div id=spanner>         <div id=l-spanner>             <div class=sidediv>1</div>             <div class=sidediv>2</div>             <div class=sidediv>3</div>         </div>         <div id=free>свободное пространство</div>         <div id=r-spanner>             <div class=sidediv>4</div>             <div class=sidediv>5</div>             <div class=sidediv>6</div>         </div>     </div> </body> </html>

а чего вы паритесь???
используйте <ul>
и делов.

Чем это выгоднее? Пример — в студию, пожалуйста.

3 минуты писанины

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>:)</title> <style type="text/css"> .list { padding:0; margin:0; list-style:none; } .b { width:300px; margin:0 20px; border:1px solid green; margin:0 10px; } .list li { float:left; height:50px; } .a { border:1px solid red; width:100px; margin:0 2px; } </style> </head> <body> <ul class="list"> <li class="a"></li> <li class="a"></li> <li class="a"></li> <li class="b"></li> <li class="a"></li> <li class="a"></li> <li class="a"></li> </ul> </body> </html>

гораздо проще для понимания и создания... у человека проблемы с понимание float и им прочим...
<ul> хороший аналог табличного представления.
если надо чтоб не резаизилось подправьте как вам угодно.

Забавно.
Но плюсы-минусы оценить не могу.

Интересно.
Я отказался от DIV , все сделал на TABLE.
1. Стало красиво выглядеть
2. Не разваливается.
3. Кроссбраузерность
4. Скорость возрасла
5 В IE работает быстрее, чем в других браузерах
6. Текст проще воспринимается, т.к строки TR от ячеек TD отличаются. Начало TABLE , конец, шапка и тело видны

Не понятно, почему стремятся на DIV делать

Может кто подскажет, чем DIV , чем TABLE хуже.
Каие у них все таки есть недостатки и достоинства

http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=75798

сама по себе задача - полный идиотизм.