Отступ между строками таблицы

Victor Ananiev · June 23, 2008

Как добавить отступ между строками в таблице, но не между ячейками? Заранее спасибо)

klierik · June 23, 2008

td {padding: 10px 0;}

по другому, вроде никак

Victor Ananiev · June 23, 2008

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

Victor Ananiev · June 23, 2008

Идеально, вот код:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> 
<head>
<title></title>
<style type="text/css">
#links_block
{
width:70%;
margin:0 auto;
}
.link
{
width:100%;
background-color:brown;
color:white;
} 
.link TD
{
width:50%; 
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<table id="links_block" cellspacing="5px" cellpadding="0" border="0">
<tr>
 <td>
 <table class="link"><tr><td>http://forum.htmlbook.ru</td><td>Форум HTML</td></tr></table>
 </td>
<tr>
<tr>
 <td>
 <table class="link"><tr><td>http://forum.htmlbook.ru</td><td>Форум HTML</td></tr></table>
 </td>
<tr>
<tr>
 <td>
 <table class="link"><tr><td>http://forum.htmlbook.ru</td><td>Форум HTML</td></tr></table>
 </td>
<tr>
</table>
</body>
</html>

Меня устраивает.

klierik · June 23, 2008

да.. но это отступ между ячейками

http://htmlbook.ru/html/table.html

а Вы, собственно говоря, ясно написали:

Как добавить отступ между строками в таблице, но не между ячейками?

в следующий раз задавайте вопрос более корректно ))

Victor Ananiev · June 23, 2008

Хм, между ячейками мне отступ не нужен, нужен только между строками, при добвалении селлспейсинга, добавляется отступ между ячейками. В следующий раз постараюсь поточнее сформулировать))

P.S. да, это отступ между ячейками, но этим достигается отступ между строкаи(сама задача).

Crasheris · June 23, 2008

Зачем столько таблиц?

Может быть использовать бордюр для реализации вертикального отступа между ячейками.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> 
<head>
<title></title>
<style type="text/css">
#links_block {
 background-color: #FFF;
 border: 0;
 width: 70%;
 margin: 0 auto;
}

#links_block td {
 background-color: brown;
 border-bottom: 10px solid #FFF;
 color: #FFF;
 font-weight: bold;
 text-align: center;
 padding: 5px;
}
</style>
</head>
<body>
<table id="links_block" cellspacing="0" cellpadding="0">
<tr><td>http://forum.htmlbook.ru</td><td>Форум HTML</td></tr>
<tr><td>http://forum.htmlbook.ru</td><td>Форум HTML </td></tr>
<tr><td>http://forum.htmlbook.ru</td><td>Форум HTML</td><tr>
</table>
</body>
</html>

Victor Ananiev · June 23, 2008

Да, ты прав, но я еще с фоном не определился, пока однотонный, а если станет градиентом ил вообще картинкой... По этому когда столько таблиц, код универсальней, но в случае с однотонным фоном бордюр правда выигрывает. Спасибо)

Crasheris · June 23, 2008

Ну да... Решение с бордюром не очень гибкое, точнее бордюр не может иметь прозрачную основу, это конечно неудобно, тогда придется изворачиваться.

sergiyko911 · April 10, 2009

Стыдно не знать такого!

да еще людям который считают себя гуру в html и по 1500+ постов уже на этом форуме понаписывали.

Спецификации хоть иногда открывайте

[b]css[/b]

table {
	border-collapse:separate;
		border-spacing: 10px;
	border:1px solid red;
}
table td {
	border:1px solid red;
}

[b]html[/b]

<table width="200" >
  <tr>
	<td>sdf</td>
	<td>dfasdf</td>
	<td>asdfasd</td>
  </tr>
  <tr>
	<td>fsdfgsdfg</td>
	<td>asdf</td>
	<td>fasd</td>
  </tr>
  <tr>
	<td>asdfas</td>
	<td>fasd</td>
	<td>asfdf</td>
  </tr>
</table>

s0rr0w · April 10, 2009

Стыдно не знать такого!
да еще людям который считают себя гуру в html и по 1500+ постов уже на этом форуме понаписывали.
Спецификации хоть иногда открывайте

IE7 border-spacing не понимать, шайтан.

SelenIT · April 10, 2009

Есть мнение, что самое применимое на практике решение (пока живы IE <8) — отдельная строка требуемой высоты с за'colspan'енной пустой ячейкой + empty-cells:show. Да, уродливо, да, несемантично... но не мы ж такие, это жизнь такая...

Victor Ananiev · April 12, 2009

Стыдно не знать такого!
да еще людям который считают себя гуру в html и по 1500+ постов уже на этом форуме понаписывали.
Спецификации хоть иногда открывайте

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

ззы я давно на дивы перешел)

Edited April 12, 2009 by Victor Ananiev

dikayalizzz · April 8, 2011

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

<table>

<td align="center">ОПЕРАТОР:</td>

<td align="center">АБОНЕНТ:</td>

</tr>

<tr>

<td align="left">реквизиты</td>

<td align="left">адрес</td>

</tr>

</table>

psywalker · April 8, 2011

А вот так ещё можно

<tr>
<td class="add" colspan="2"></td>
</tr>

SelenIT · April 8, 2011

Однако, по состоянию на сегодняшний день IE6+IE7 в сумме составляют меньше 10%... может, в таких вещах, как обгламуривание таблиц, и впрямь приходит пора на них подзабивать и полностью переходить на border-spacing?..

Great Rash · April 8, 2011

А чем cellspacing не угодил?

SelenIT · April 8, 2011

Тем, что он не позволяет регулировать отступы между строками и между столбцами по раздельности (с чего этот топик-то начался). Ну и просто — несолидно как-то в эпоху ЖHTML и массового поклонения идолам семантичности хранить оформление в атрибутах разметки...

Sign In

Отступ между строками таблицы

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information