Отступ между строк в таблице - HTML и CSS

Bugrimov · 06.04.2013, 11:06

Добрый день!
Может задание и не отличается сложность, но тем не менее

PHP код:


			
!doctype html>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <title>Таблица</title>

    </head> 

    <body>

        <table border="0" cellspacing="0" cellpadding="0" align="center" rules="none" frame="void">

            <caption align="center"><font size="+2"><b><i>Мозаика</i></b></font></caption><br>

        <tr>

            <td><img src="lab_4/r1.gif" width="90px" height="160px" alt="r1.gif"></td>

            <td><img src="lab_4/r3.gif" width="90px" height="160px" alt="r3.gif"></td>

        </tr>

        <tr>

            <td><img src="lab_4/r2.gif" width="90px" height="160px" alt="r2.gif"></td>

            <td><img src="lab_4/r4.gif" width="90px" height="160px" alt="r4.gif"></td>

        </tr>

        <table>

    </body>

</html>

В каждой ячейке таблицы картинка. Зазора между столбцами нет, а вот между строками - есть (проверяю на IE). Подскажите пожалуйста как можно справится с проблемой силами HTML (без участия CSS). Что убрать или может добавить....???

D!zel · 06.04.2013, 11:25

Между какими строками? Проверил в IE - все нормально.

Bugrimov · 06.04.2013, 11:30

мозаика.jpg Вот что у меня получилось...

D!zel · 06.04.2013, 11:38

Возможно глупость скажу, но попробуйте так:

Код:

<html> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
        <title>Таблица</title> 
    </head>  
    <body> 
        <table border="0" cellspacing="0" cellpadding="0" align="center" rules="none" frame="void"> 
            <caption align="center"><font size="+2"><b><i>Мозаика</i></b></font></caption><br> 
        <tr> 
            <td width="90" height="160"><img src="lab_4/r1.gif" width="90" height="160" alt="r1.gif"></td> 
            <td width="90" height="160"><img src="lab_4/r3.gif" width="90" height="160" alt="r3.gif"></td> 
        </tr> 
        <tr> 
            <td width="90" height="160"><img src="lab_4/r2.gif" width="90" height="160" alt="r2.gif"></td> 
            <td width="90" height="160"><img src="lab_4/r4.gif" width="90" height="160" alt="r4.gif"></td> 
        </tr> 
        <table> 
    </body> 
</html>

1. Пиксели (Npx) указываются только в CSS, в остальных случаях они только мешают, по-моему.
2. Выставляем нужную ширину и высоту для блоков. Грубо, но должно помочь.

Bugrimov · 06.04.2013, 11:45

Код:

 </table>

в конце.
Все без изменений, тоже самое
Может есть еще какие-нибудь варианты?

D!zel · 06.04.2013, 12:03

Самому уже интересно сделать без стилей

Попробуйте так:

Код:

<html> 
 <head> 
  <title>Таблица</title> 
 </head>  
 <body> 
  <table border="0" cellspacing="0" cellpadding="0" align="center"> 
   <tr>
    <td align="center">
     <font size="+2"><b><i>Мозаика</i></b></font>
    </td>
   </tr>
   <tr>
    <td width="180" height="320" align="center">
     <table border="0" cellspacing="0" cellpadding="0">
      <tr> 
       <td width="90" height="160"><img src="lab_4/r1.gif" width="90" height="160" alt="r1.gif"></td> 
       <td width="90" height="160"><img src="lab_4/r3.gif" width="90" height="160" alt="r3.gif"></td> 
      </tr> 
      <tr> 
       <td width="90" height="160"><img src="lab_4/r2.gif" width="90" height="160" alt="r2.gif"></td> 
       <td width="90" height="160"><img src="lab_4/r4.gif" width="90" height="160" alt="r4.gif"></td> 
      </tr> 
     </table>
    </td>
   </tr>
  </table> 
 </body> 
</html>

У меня заработало

Bugrimov · 06.04.2013, 12:21

Оно работает, если

Код:

<!doctype html>

убрать.
А можно как-нибудь вместе с ним реализовать, а то <caption> без doctype ведет себя не так как хотелось бы...

D!zel · 06.04.2013, 12:48

Попробуйте так:

Код:

<html> 
 <head> 
  <title>Таблица</title> 
 </head>  
 <body> 
  <table border="0" cellspacing="0" cellpadding="0" align="center"> 
   <caption align="center"><font size="+2"><b><i>Мозаика</i></b></font></caption>
   <tr>
    <td width="180" height="320" align="center">
     <table border="0" cellspacing="0" cellpadding="0">
      <tr> 
       <td width="90" height="160"><img src="lab_4/r1.gif" width="90" height="160" alt="r1.gif"></td> 
       <td width="90" height="160"><img src="lab_4/r3.gif" width="90" height="160" alt="r3.gif"></td> 
      </tr> 
      <tr> 
       <td width="90" height="160"><img src="lab_4/r2.gif" width="90" height="160" alt="r2.gif"></td> 
       <td width="90" height="160"><img src="lab_4/r4.gif" width="90" height="160" alt="r4.gif"></td> 
      </tr> 
     </table>
    </td>
   </tr>
  </table> 
 </body> 
</html>

Проверил в Хроме и ИЕ - результат идентичен, никаких "отступов", и без <!doctype>, но зато с <caption>.

skokshar · 06.04.2013, 17:25

Последний вариант, у меня тоже работает и в iE и в Firefox
=================================== ===========
Последний раз, отдыхал в Турции.

Bugrimov · 06.04.2013, 17:42

Работать, то работает. Почему вместе с <!doctype html> не работает?

06.04.2013, 11:06	#1
Bugrimov C/C++, Java Участник клуба Регистрация: 28.03.2012 Сообщений: 1,680	Отступ между строк в таблице Добрый день! Может задание и не отличается сложность, но тем не менее PHP код: !doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Таблица</title> </head> <body> <table border="0" cellspacing="0" cellpadding="0" align="center" rules="none" frame="void"> <caption align="center"><font size="+2"><b><i>Мозаика</i></b></font></caption><br> <tr> <td><img src="lab_4/r1.gif" width="90px" height="160px" alt="r1.gif"></td> <td><img src="lab_4/r3.gif" width="90px" height="160px" alt="r3.gif"></td> </tr> <tr> <td><img src="lab_4/r2.gif" width="90px" height="160px" alt="r2.gif"></td> <td><img src="lab_4/r4.gif" width="90px" height="160px" alt="r4.gif"></td> </tr> <table> </body> </html> В каждой ячейке таблицы картинка. Зазора между столбцами нет, а вот между строками - есть (проверяю на IE). Подскажите пожалуйста как можно справится с проблемой силами HTML (без участия CSS). Что убрать или может добавить....??? "Keep it simple" - придерживайтесь простоты! Уильям Оккам - "Не следует множить сущее без необходимости" Сложность - враг простоты и удобства!

06.04.2013, 11:30	#3
Bugrimov C/C++, Java Участник клуба Регистрация: 28.03.2012 Сообщений: 1,680	мозаика.jpg Вот что у меня получилось... "Keep it simple" - придерживайтесь простоты! Уильям Оккам - "Не следует множить сущее без необходимости" Сложность - враг простоты и удобства!

06.04.2013, 11:45	#5
Bugrimov C/C++, Java Участник клуба Регистрация: 28.03.2012 Сообщений: 1,680	Код: `</table>` в конце. Все без изменений, тоже самое Может есть еще какие-нибудь варианты? "Keep it simple" - придерживайтесь простоты! Уильям Оккам - "Не следует множить сущее без необходимости" Сложность - враг простоты и удобства!

06.04.2013, 12:21	#7
Bugrimov C/C++, Java Участник клуба Регистрация: 28.03.2012 Сообщений: 1,680	Оно работает, если Код: `<!doctype html>` убрать. А можно как-нибудь вместе с ним реализовать, а то <caption> без doctype ведет себя не так как хотелось бы... "Keep it simple" - придерживайтесь простоты! Уильям Оккам - "Не следует множить сущее без необходимости" Сложность - враг простоты и удобства!

06.04.2013, 17:25	#9
skokshar Новичок Джуниор Регистрация: 06.04.2013 Сообщений: 1	У меня - работает. Последний вариант, у меня тоже работает и в iE и в Firefox =================================== =========== Последний раз, отдыхал в Турции.

06.04.2013, 11:25	#2
D!zel Пользователь Регистрация: 23.12.2008 Сообщений: 74	Между какими строками? Проверил в IE - все нормально.

06.04.2013, 17:42	#10
Bugrimov C/C++, Java Участник клуба Регистрация: 28.03.2012 Сообщений: 1,680	Работать, то работает. Почему вместе с <!doctype html> не работает? "Keep it simple" - придерживайтесь простоты! Уильям Оккам - "Не следует множить сущее без необходимости" Сложность - враг простоты и удобства!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Отступ в таблице	Kasper1	HTML и CSS	1	31.03.2011 01:54
Группировка строк в таблице	Lara181278	SQL, базы данных	1	11.10.2010 12:31
Отступ таблице от странице	Qaliti	HTML и CSS	1	04.04.2010 10:06
Отступ между цифрами в консоле	Golovastik	Общие вопросы C/C++	4	15.07.2009 23:24
Отступ между абзацами.	Alenka2319	Microsoft Office Word	8	27.05.2008 14:49