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

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

Форум программистов > Вёрстка веб-сайтов > Альтернатива cellpadding cellspacing

Автор: Guedda 23.1.2006, 23:06

Уже постил по данному вопросу, но тему так и не нашел.
Вот. Вопрос, собственно:
Есть в css альтернатива cellpadding, cellspacing?

Заранее благодарен.

Автор: Illuminaty 24.1.2006, 08:26

http://loc.stack.ru/projects/CSS2/box.html#propdef-margin и http://loc.stack.ru/projects/CSS2/box.html#propdef-padding

Автор: Guedda 24.1.2006, 09:39

Не подходит.
Устанавливаю в css:

Код


table.main
{
  width : 100%;
  border : 0;
  margin : 0;
  padding : 0;
}

Таблица прорисовывается так, если бы я не применял стили и не установил значения cellpadding, cellspacing

Альтернативы есть?

Автор: o.s.a. 24.1.2006, 10:08

Код


td
{
  width : 100%;
  border : 0;
  margin : 0; // cellspacing
  padding : 0; // cellpadding
}

Автор: Guedda 24.1.2006, 10:14

Dыводится в браузер так, как будто нет этих cellpadding, cellspacing...
Так что не подходит это...
Мне нужна альтернатива cellpadding="0" cellspacing="0"...
Чтобы промежутков не было... А они есть...

Автор: o.s.a. 24.1.2006, 10:31

Проверил:
cellpadding="0" это точно

Код


td
{
  padding : 0; // cellpadding
}

а вот что делать с cellspacing="0" - даже не знаю

Автор: DENNN 24.1.2006, 12:55

Код


table.main
{
  border : 0;
  padding : 0;
  border-collapse:collapse;
}
table.main td
{
  border: 1px #000 solid;
  padding: 1em;
}

Сделает таблицу с бордюрами в 1пиксель между ячейками, cellspacing=0 и cellpadding=1em

Автор: Cheba 24.1.2006, 15:41

Код

<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
    <title>Cellspacing & cellpadding in CSS</title>
    <style type="text/css">
#cssed {
    border-spacing: 10px;
}

#cssed td {
    padding: 10px;
}

td {
    border: 1px solid;
}
    </style>
</head>
<body>
    <table id="cssed">
        <tr>
            <td>cell 1-1</td>
            <td>cell 11-2</td>
        </tr>
        <tr>
            <td>cell 2-1</td>
            <td>cell 2-2</td>
        </tr>
    </table>
    <table id="htmled" cellpadding="10" cellspacing="10">
        <tr>
            <td>cell 1-1</td>
            <td>cell 11-2</td>
        </tr>
        <tr>
            <td>cell 2-1</td>
            <td>cell 2-2</td>
        </tr>
    </table>
</body>
</html>

Альтернативу cellspacing призван составить border-spacing. Он применяется к таблице. Вот только проблема в том, что IE (даже 6) не понимает этот атрибут. Лиса 1.5 и Konqueror 3.4.2 это все понимают правильно - в них обе таблицы отображаются одинаково. А вот в IE применется только паддинг, а расстояние между ячейками в первой таблице (стилизированной через css) не изменяется.

Автор: Guedda 24.1.2006, 15:47

Да вот же... Значит, никакого другого метода нет?

Автор: Cheba 24.1.2006, 15:58

Ну, я дал тебе вполне реальный (и действенный) метод. А то, что ИЕ его не понимает, то это уже к МС претензии. Если нужно чтоб везде было, то, к сожалению, только через атрибуты.

Автор: Kludge 24.1.2006, 19:55

а нету ответа для ИЕ smile

нету

Автор: R.M. 25.1.2006, 02:01

Почему нету? дали же ответ и он для вмех браузеров

Код


border-collapse: collapse;

всегда его юзаю. А почему собственно обязательно надо искать обходные пути? так сложно прописать cellpadding=0 cellspacing=0 ?

Автор: Guedda 26.1.2006, 11:53

Просто задание было полностью написать атрибуты всех тегов в css...

Автор: Cheba 26.1.2006, 14:39

Ну, вот и пиши. Только чтобы не придрались можешь сказать, что в ИЕ не работает.

Автор: Guedda 26.1.2006, 14:49

Да у нас в универе на всех тачках стоят IE, а проверять будут без меня (т.е. сказали: "Отошлите нам на ящик то-то и то-то..")...
Ладно... Нельзя так нельзя...

Автор: 12345c 26.1.2006, 22:06

Статья об этом: http://htmlcoder.visions.ru/HTML/?21

Она не открывается из-за рекламы, поэтому копирую её содержание сюда:

Путь: Заметки HTML кодера > HTML > 21
Избавляемся от cellpadding и cellspacing
16 сентября 2005 г.
HTML атрибуты cellpadding и cellspacing уже давно никому не нужны.

Все правильные мальчики и девочки уже давно не пишут <table cellpadding="0" cellspacing="0" border="0">. Они знают, что лучше один раз написать стиль:

Код


table{
border:0px; /* border="0" */
border-collapse:collapse; /* cellspacing="0" */
}

table td{
padding:0px; /* cellspadding="0" */
}

HTML код:

Код


<table>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
</table>

Вид:

Foo Bar

Когда нужно получить другой вид таблицы, все правильные мальчики и девочки переопределяют этот базовый стиль, для верности иногда с помощью !important:

Код


table.stuff{
border-collapse:separate;
}

table.stuff td{
padding:5px 10px;
border:1px solid #666666;
}

HTML код:

Код


<table class="stuff">
<tr>
<td>Foo 2</td>
<td>Bar 2</td>
</tr>
</table>

Вид:

Foo 2 Bar 2

А некоторые мальчики и девочки даже знают, что есть такое CSS свойство, как border-spacing. Но они также знают, что оно совсем не работает в Internet Explorer. Поэтому растояние между ячейками при border-collapse:separate всегда в этом браузере одинаковое, равное 2 px.

Автор: Guedda 27.1.2006, 17:53

Спасибо. Вопрос решился.

Автор: slavonX86 4.7.2006, 17:00

А зачем все пишут border='0' ? Я попробовал, и без него работает !

Автор: R.M. 5.7.2006, 17:50

slavonX86, я так подозреваю на случай если браузер настроен так или на случай если другие стили могут этот бордер поставить.

Автор: InfMag 8.8.2008, 12:29

Народ, вот прописал я вот это:

Код


table
{
    border: 0;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}
table td
{
    border: 0;
    margin: 0;
    padding: 0;
}

Но теперь, то что указано ниже, там свои padding-и и так далее - это все сравнялось в 0, что же делать теперь?

Автор: webster 8.8.2008, 12:33

Вы глобально изменили все стили у всех таблиц, далее вы должны переопределить их для своих классов:

Код


table.myClass td.myClass {
...
}

Автор: K1ng 8.8.2008, 12:41

Действительно, webster +1
Используй классы!

Автор: InfMag 8.8.2008, 12:42

webster, спасиб. smile

просто перестали работать указанные html аттрибуты cellpadding, а вот через css работает все