Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как в CSS прописать cellspacing

Автор: Mal Hack 7.2.2005, 15:05

Как в CSS прописать для таблицы свойства cellspacing ???
cellpadding - понятно, padding & margin, а с cellspacing как быть? Уж больно не хочется в HTML вставлять элементы форматирования...
css.manual.ru ответа не дал.

В догонку...
Таблица лежит в <span>:

Код


<span class='form'>
<table{$lst}>
 <form method='POST' action='admin.php?task=tv'><input type='hidden' name='action' value='{$action}'>
  {$form}
 </form>
</table>
</span>

Как сделать, чтобы ее длина была 98% от длины слоя <span>.
width: 100% не помогат, он считает о экрану.

Автор: Mal Hack 7.2.2005, 16:09

cellspacing нашел. В таблицу пишем:
border-collapse : collapse;
Работает во всех браузерах (проверял лисой, ИЕ, Опера).

Автор: Gold Dragon 7.2.2005, 16:18

у <span> нет width.

Автор: IZ@TOP 8.2.2005, 12:58

Цитата(Mal @ 7.2.2005, 16:05)

Как сделать, чтобы ее длина была 98% от длины слоя <span>.
width: 100% не помогат, он считает о экрану.

Зачем это нужно? Может есть способ решить задачу иначе?

Цитата(Mal @ 7.2.2005, 16:05)

css.manual.ru ответа не дал.

Юзайте DreamWeaver, там все свойства стилей есть.

Автор: Mal Hack 8.2.2005, 13:12

Цитата(IZ @ 8.2.2005, 12:58)

Зачем это нужно?

Чтобы таблица, которая лежит на слое была у него посередине, а не слева (визуально).

Цитата(IZ @ 8.2.2005, 12:58)

Может есть способ решить задачу иначе?

Может

Как правда, не знаю smile

Извращаться таблицами не хочу.

Цитата(IZ @ 8.2.2005, 12:58)

Юзайте DreamWeaver, там все свойства стилей есть.

Тогда уж w3.org smile

Автор: Cheba 8.2.2005, 15:26

Span - инлайновый элемент. Не гоже относительно него таблицы ровнять. Да и сами таблицы в него всовывать не понятно зачем... Давай код. И опиши что хочешь сделать, плз.

Автор: GoodBoy 8.2.2005, 15:33

Цитата(Mal @ 7.2.2005, 16:09)

cellspacing нашел. В таблицу пишем:
border-collapse : collapse;

Ты не прав! Таким образом можно имитировать cellspacing=0 и всё! А если нужно наоборот cellspacing=10?

И вообще, читаем:
border-collapse - Задаёт, будут ли границы ячеек и общая граница таблицы сливаться в одну или нет. Доступны два значения: separate (значение по умолчанию) - разделяет рамку тавлицы и границы её ячеек; collapse - по возможности объединяет их.

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/bordercollapse.asp

Автор: Mal Hack 8.2.2005, 18:32

Цитата(GoodBoy @ 8.2.2005, 15:33)

Ты не прав! Таким образом можно имитировать cellspacing=0 и всё! А если нужно наоборот cellspacing=10?

Мне-то как раз 0 нужен, и я всегда для всех таблиц 0 ставилю (редкие исключения бывают).
Для указания точного размер надо: border-spacing.

Цитата(Cheba @ 8.2.2005, 15:26)

Span - инлайновый элемент. Не гоже относительно него таблицы ровнять.

Red Dragon меня уже вразумил по этому поводу smile

Цитата(Cheba @ 8.2.2005, 15:26)

Давай код. И опиши что хочешь сделать, плз.

Итак. админка. Слева - меню, справа - область работы. Шапка и низ - само собой.
Ширина меню - статична 200px.
Ширина области работы должна быть все оставшееся справа расстояние, ну минус отступы, но это не суть проблемы.
Да, это можно сделать двумя столбцами таблицы, но не хочу. Если есть решение с помощью слоев, то делаем на них.

Код


  <span class='menu'><%MENU%></span>
  <span class='content'>
     <span class='formtitle'>текст</span>
     <span class='form'>
        <table> ИЛИ <table class='list'> 
             ***** СОДЕРЖИМОЕ ТАБЛИЦЫ *****
        </table>
     </span>
  </span>

Второй момент. Необходимо, чтобы эта самая таблица а) располагалась по середине слоя облати работы (content) или занимала 100% шириный слоя области работы.
Вот что в CSS

Код


span.menu
 {
  margin-left : 10px;
  float: left;
  width: 220px;
  padding: 10px 10px 10px 10px;
  background-color: #F8F8F8;
  border: solid 1px #DADADA;
 }

span.content
 {
  float: right;
  width: 75%;
  padding: 0px 8px 0px 8px;
  text-align: justify;
 }

table
 {
  padding: 2px;
  margin: 0px;
  width: 100%;
  vertical-align: middle;
  border-spacing : 0px;
 }

table.list
 {
  padding: 0px;
  margin: 10px;
  width: 95%;
  border-bottom: solid 1px #C9C9C9;
  border-left: solid 1px #C9C9C9;
 }

text-align: center; у content'a не срабатывает.
width: 100%; у list'a вытягивает таблицу за рамки слоя.

Автор: Cheba 8.2.2005, 23:44

Учила меня мама: юзай div'ы...

Ключевые слова: http://www.google.com/search?sourceid=mozclient&ie=utf-8&oe=utf-8&q=css+layout.
Вот http://glish.com/css/9.asp

Автор: Mal Hack 8.2.2005, 23:57

Cheba
пока быстро пробежался, завтра более детально посмотрю.
Спасибо.

Автор: Mal Hack 9.2.2005, 19:27

Cheba
Сделал как там. Два дива.
Вот имеем код:

Код


  <div id='menu'><%MENU%></div>
  <div id='content'>
     <div class='formtitle'>òåêñò</div>
     <div class='form'>
        <table> ÈËÈ <table class='list'>
             ***** ÑÎÄÅÐÆÈÌÎÅ ÒÀÁËÈÖÛ *****
        </table>
     </div>
  </div>

Код


#menu
 {
  margin-left : 10px;
  float: left;
  width: 220px;
  padding: 10px 0px 10px 10px;
  margin-right: 20px;
  background-color: #F8F8F8;
  border: solid 1px #DADADA;
 }

div.form
 {
  text-align: center;
  float: left;
  width: 100%;
  padding: 4px;
  background-color: #FAFAFA;
  border: solid 1px #C9C9C9;
 }

div.formtitle
 {
  float: left;
  font-style: italic;
  font-weight: bold;
  padding: 5px 0px 5px 8px;
  background-color: #E0E0E0;
  border: solid 1px #C9C9C9;
  border-bottom-width: 0px;
 }

#content
 {
  padding: 0px 8px 0px 8px;
  text-align: justify;
 }

Как итог. На ширину слоя контент при указании у классов form & formtitle ничего не растягивается, а слой контента съезжает ПОД слой меню и расширяется на 100%.
Убрав width: 100% получаем скомканную таблицу....

Неучто без таблиц никак не обойтись?

Автор: Cheba 9.2.2005, 22:38

Заезжает под слой меню из-за маргинов и паддингов. Если поиграться с цифрвми, то можно нормально все поровнять.

Автор: Mal Hack 9.2.2005, 22:58

Ясно. Вобщем сделаю таблицу из двух столбцов и не буду париться...
Поскольку

Цитата(Cheba @ 9.2.2005, 22:38)

поиграться с цифрвми,

Не катит, много проблем на кроссплатформеноости будет...

+ за разъяснения и хороший пример, который все равно пригодится.

Автор: GoodBoy 10.2.2005, 13:22

Цитата(Mal @ 9.2.2005, 22:58)

Вобщем сделаю таблицу из двух столбцов и не буду париться...

С этого и надо было начинать!!! :-))))

Автор: Mal Hack 10.2.2005, 17:26

Цитата(GoodBoy @ 10.2.2005, 13:22)

С этого и надо было начинать!!! :-))))

Да понимаешь, в чем фишка... Нового захотелось smile

А со слоями я мало очень работал... Фактически не работал вообще...
Вот и захотелось попробовать реализовать.. Не получилось.
Зато мног о слоях узнал smile

За что всем подсказавшим спасибо.