HTML | Таблицы | Проблемы с отступом

Дизайн, программирование, CMS, верстка, хостинг, домены
Ответить
Аватара пользователя
ukhov
Модератор
Модератор
Сообщения: 1343
Зарегистрирован: 04 янв 2011, 21:19

HTML | Таблицы | Проблемы с отступом

Сообщение ukhov »

Появилась проблема с отступом в таблице.

Код: Выделить всё

<html><body bgcolor=#000000 > <table style="width: 0%; border-collapse: collapse;" CELLPADDING=0 ><tbody>   <tr>  <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_1.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px'><br></td> <td style='letter-spacing: 0px; word-spacing: 0px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_5.png"); background-repeat: repeat-x; background-position: 0% 0%'><br></td> <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_3.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px'><br></td>  </tr>  <tr>  <td style='width: 10px; background-image: url("http://readyhw.ru/img/c_t_k_6.png"); background-repeat: repeat-y; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px'><br></td> <td align="center" style="text-align: center; background-color: rgb(255, 255, 255); letter-spacing: 0px; word-spacing: 0px; width: 0px; height: 0px;">OLOLO =)<br></td> <td style='width: 10px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://readyhw.ru/img/c_t_k_7.png"); background-repeat: repeat-y; background-position: 0% 0%'><br></td>  </tr>   <tr>  <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_2.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px'><br></td> <td style='height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_8.png"); background-repeat: repeat-x; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px'><br></td> <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_4.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px'><br></td>  </tr>   </tbody></table> </body></html>
Должно вывести так:
Изображение
А выводит так:
Изображение
Alazaur
Разработчик
Разработчик
Сообщения: 1001
Зарегистрирован: 16 окт 2011, 20:25

Re: HTML | Таблицы | Проблемы с отступом

Сообщение Alazaur »

Добавьте к этим ячейкам font-size: 5pt; должно помочь
Аватара пользователя
ukhov
Модератор
Модератор
Сообщения: 1343
Зарегистрирован: 04 янв 2011, 21:19

Re: HTML | Таблицы | Проблемы с отступом

Сообщение ukhov »

Alazaur писал(а):Добавьте к этим ячейкам font-size: 5pt; должно помочь
а причём тут размер шрифта, и почему именно 5?
Alazaur
Разработчик
Разработчик
Сообщения: 1001
Зарегистрирован: 16 окт 2011, 20:25

Re: HTML | Таблицы | Проблемы с отступом

Сообщение Alazaur »

Да бывает такой косяк, когда размер шрифта по умолчанию больше, чем высота ячейки. А размер 5 я от балды взял, по-меньше уж чтоб наверняка :)
Аватара пользователя
ukhov
Модератор
Модератор
Сообщения: 1343
Зарегистрирован: 04 янв 2011, 21:19

Re: HTML | Таблицы | Проблемы с отступом

Сообщение ukhov »

Alazaur писал(а):Да бывает такой косяк, когда размер шрифта по умолчанию больше, чем высота ячейки. А размер 5 я от балды взял, по-меньше уж чтоб наверняка :)
нет, дело те в размере шрифта. даже без текста остаётся что и было.
Alazaur
Разработчик
Разработчик
Сообщения: 1001
Зарегистрирован: 16 окт 2011, 20:25

Re: HTML | Таблицы | Проблемы с отступом

Сообщение Alazaur »

Ну тк это да будет там текст или не будет, проблема все равно останется. Но если размеры шрифта прописать то все на свои места встанет. Попробуйте:

Код: Выделить всё

    <html>    <body bgcolor=#000000 >         <table style="width: 0%; border-collapse: collapse;" CELLPADDING=0 >    <tbody>                   <tr>              <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_1.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; font-size: 5pt;'>    <br>    </td>         <td style='letter-spacing: 0px; word-spacing: 0px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_5.png"); background-repeat: repeat-x; background-position: 0% 0%; font-size: 5pt;'>    <br>    </td>         <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_3.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; font-size: 5pt;'>    <br>    </td>              </tr>              <tr>              <td style='width: 10px; background-image: url("http://readyhw.ru/img/c_t_k_6.png"); background-repeat: repeat-y; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px'>    <br>    </td>         <td align="center" style="text-align: center; background-color: rgb(255, 255, 255); letter-spacing: 0px; word-spacing: 0px; width: 0px; height: 0px;">    OLOLO =)    <br></td>         <td style='width: 10px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://readyhw.ru/img/c_t_k_7.png"); background-repeat: repeat-y; background-position: 0% 0%'>    <br>    </td>              </tr>                   <tr>              <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_2.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; font-size: 5pt;'>    <br>    </td>         <td style='height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_8.png"); background-repeat: repeat-x; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; font-size: 5pt;'>    <br>    </td>         <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_4.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; font-size: 5pt;'>    <br>    </td>              </tr>                   </tbody>    </table>         </body>    </html>
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: HTML | Таблицы | Проблемы с отступом

Сообщение Александр »

ukhov
<br> - убери

Это зачем?

Код: Выделить всё

width: 0%;

Код: Выделить всё

CELLPADDING=0
зачем в ячейке 10х10?

Код: Выделить всё

letter-spacing: 0px; word-spacing: 0px
Лучше выноси стили в отдельный блок <style></style> или даже отдельный файл css.
Аватара пользователя
ukhov
Модератор
Модератор
Сообщения: 1343
Зарегистрирован: 04 янв 2011, 21:19

Re: HTML | Таблицы | Проблемы с отступом

Сообщение ukhov »

Александр писал(а):ukhov
<br> - убери

Это зачем?

Код: Выделить всё

width: 0%;

Код: Выделить всё

CELLPADDING=0
зачем в ячейке 10х10?

Код: Выделить всё

letter-spacing: 0px; word-spacing: 0px
Лучше выноси стили в отдельный блок <style></style> или даже отдельный файл css.
CELLPADDING - отступ. остальное всё редактор виноват :D
Аватара пользователя
ukhov
Модератор
Модератор
Сообщения: 1343
Зарегистрирован: 04 янв 2011, 21:19

Re: HTML | Таблицы | Проблемы с отступом

Сообщение ukhov »

Alazaur писал(а):Ну тк это да будет там текст или не будет, проблема все равно останется. Но если размеры шрифта прописать то все на свои места встанет. Попробуйте:

Код: Выделить всё

    <html>    <body bgcolor=#000000 >         <table style="width: 0%; border-collapse: collapse;" CELLPADDING=0 >    <tbody>                   <tr>              <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_1.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; font-size: 5pt;'>    <br>    </td>         <td style='letter-spacing: 0px; word-spacing: 0px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_5.png"); background-repeat: repeat-x; background-position: 0% 0%; font-size: 5pt;'>    <br>    </td>         <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_3.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; font-size: 5pt;'>    <br>    </td>              </tr>              <tr>              <td style='width: 10px; background-image: url("http://readyhw.ru/img/c_t_k_6.png"); background-repeat: repeat-y; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px'>    <br>    </td>         <td align="center" style="text-align: center; background-color: rgb(255, 255, 255); letter-spacing: 0px; word-spacing: 0px; width: 0px; height: 0px;">    OLOLO =)    <br></td>         <td style='width: 10px; letter-spacing: 0px; word-spacing: 0px; background-image: url("http://readyhw.ru/img/c_t_k_7.png"); background-repeat: repeat-y; background-position: 0% 0%'>    <br>    </td>              </tr>                   <tr>              <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_2.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; font-size: 5pt;'>    <br>    </td>         <td style='height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_8.png"); background-repeat: repeat-x; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; font-size: 5pt;'>    <br>    </td>         <td style='width: 10px; height: 10px; background-image: url("http://readyhw.ru/img/c_t_k_4.png"); background-repeat: no-repeat; background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; font-size: 5pt;'>    <br>    </td>              </tr>                   </tbody>    </table>         </body>    </html>
помогло)
Ответить