Что такое cellpadding в html
Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
Синтаксис
Значения
Любое целое значение в пикселах или процентах от доступного пространства.
В HTML атрибуты cellpadding и cellspacing можно установить следующим образом:
Если нужно полностью убрать расстояние между ячейками ( установить cellspacing=»0″ ), не забудьте задать свойство border-collapse: collapse . Но как реализовать cellspacing в CSS ?
Рабочий CSS-эквивалент cellspacing – это border-spacing , но при этом он не работает в браузере Internet Explorer . Можно установить border-collapse: collapse, что также приведет к нулевым промежуткам между ячейками.
Но единственным полностью кроссбраузерным решением остается применение атрибута cellspacing :
Также можно просто использовать cellpadding=»0″ cellspacing=»0″ , так как эти атрибуты еще не считаются устаревшими.
Чтобы контролировать промежутки между ячейками с помощью CSS , можно использовать отступы ( padding ), выставленные для ячеек таблицы:
Что касается эквивалентов CSS table cellspacing , то можно использовать свойство border-spacing , примененное к таблице. Например:
Данное свойство также позволит получить горизонтальные и вертикальные промежутки. То есть, реализовать то, что невозможно при помощи атрибута cellspacing .
Проблемы с IE ниже 7 версии
Эти методы будут работать практически во всех современных браузерах, за исключением Internet Explorer 7 . Все они поддерживают свойство border-collapse , которое объединяет границы смежных ячеек в таблице. Если попробовать убрать промежутки между ячейками ( cellspacing=»0″ ), то у border-collapse:collapse будет тот же эффект: отсутствие расстояния между ячейками.
Стоит обратить внимание, что поддерживается этот вариант « криво », так как существующий HTML-атрибут cellspacing в CSS не переписывается.
Если вы не работаете с Internet Explorer 5-7 , используйте border-spacing . Если же вам не повезло, то используйте cellspacing:0 или border-collapse:collapse :
Если же вам не нужно нулевое значение cellspacing , то попробуйте то, что сработало у меня. Но имейте в виду, что этот вариант был протестирован только в Firefox :
Этот хак cellpadding cellspacing CSS работает в IE 6 и выше, Google Chrome , Firefox и Opera :
Объявление * предназначено для Internet Explorer 6 и 7 , а также всех остальных браузеров, которые могут проигнорировать это свойство. expression(‘separate’, cellSpacing = ’10px’) возвращает значение ‘ separate ‘, но выполняются оба состояния, так как в JavaScript можно передать больше аргументов, и все они будут использованы.
У этой проблемы есть простое решение:
Установки по умолчанию
Стандартное поведение браузера эквивалентно следующему:
Позволяет задать расстояние между содержимым ячеек:
Cellspacing
cellspacing CSS отвечает за расстояние между самими ячейками:
Комбинация свойств
Комбинация свойств (дополнительно)
Примечание: если установлен атрибут border-spacing , то это указывает на то, что border collapse CSS имеет значение separate .
Можете попробовать в действии !
Оберните содержимое ячейки в div , и сможете сделать что угодно, но тогда придется оборачивать каждую ячейку в колонке. Например, чтобы получить более широкие левое и правое поля, нужно использовать следующий CSS-код :
А также следующий HTML-код :
Здесь можно опробовать код в действии.
Этот подход работает в IE ! На самом деле, я и тестировал его только в Internet Explorer . Из W3C-спецификации я понял, что тег <table> предназначался исключительно для отображения контента.
Гораздо проще создать <div> с нужными фонами, а затем поверх этого элемента позиционировать таблицы с использованием position: absolute и background: transparent . Данный метод работает в Chrome , IE ( 6 и выше ), а также Mozilla ( 2 и выше ).
Отступы ( margin ) предназначены для создания промежутков между контейнерными элементами <table>, <div>, <form>, а не для <tr>, <td>, <span> или <input>.
Применение их для чего-то другого потребует много времени на подготовку сайта ко всем последующим обновлениям браузеров.
После border-collapse я использовал атрибут !important , чтобы получилось border-collapse: collapse !important . В IE 7 этот вариант отлично работал. Он переписывал исходный атрибут cellspacing .
HTML атрибуты cellpadding и cellspacing уже давно никому не нужны.
Все правильные мальчики и девочки уже давно не пишут <table cellpadding=»0″ cellspacing=»0″ border=»0″> . Они знают, что лучше один раз написать стиль:
table border:0px; /* border=»0″ */
border-collapse:collapse; /* cellspacing=»0″ */
>
Когда нужно получить другой вид таблицы, все правильные мальчики и девочки переопределяют этот базовый стиль, для верности иногда с помощью !important :
table. stuff border-collapse:separate;
>
table. stuff td padding:5px 10px;
border:1px solid #666666;
>
| Foo 2 | Bar 2 |
А некоторые мальчики и девочки даже знают, что есть такое CSS свойство, как border-spacing.
Но они также знают, что оно совсем не работает в Internet Explorer. Поэтому растояние между ячейками при border-collapse:separate всегда в этом браузере одинаковое, равное 2 px.
В общем и целом, пора уже всем забыть об HTML атрибутах cellpadding и cellspacing.
Для начала, Вы можете контролировать cellspacing через применение CSS-свойства border-spacing к Вашей таблице. Это сработает в большинстве популярных браузеров, кроме IE 7-й версии и ниже. Для браузеров, которые поддерживают это свойство, оно даже позволяет задать горизонтальный и вертикальный промежуток. Если Вам нужна поддержка Internet Explorer 5, 6, или 7 версии — тогда Вам, коротко говоря, не повезло.
Я сказал «коротко говоря», потому что эти браузеры поддерживают свойство border-collapse , которое полностью разрушает рамки между смежными ячейками в таблице. Задание этого свойства даёт тот же эффект, что и cellspacing:0 (между ячейками таблицы не будет никаких промежутков). При таком подходе не будет вытесняться установленный в HTML атрибут cellspacing на элемент таблицы.
Короче: для браузеров, кроме IE 5-7, Вы задаёте border-spacing . Для IE, в ситуации, когда Вы хотите установить cellspacing в 0 и в Вашей таблице это не определено заранее, вы можете использовать border-collapse:collapse .
Адаптивная верстка писем, всё о ней и не только
Адаптивная верстка писем отличается от привычной веб-вёрстки из-за особенностей интерпретирования в различных веб-интерфейсах и почтовых клиентах.
Давайте на примерах рассмотрим, как добиться хорошего отображения письма во всём разнообразии ISP и почтовых клиентов.
Как выглядит общий шаблон адаптивного письма:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="x-apple-disable-message-reformatting">
<title> - </title>
<style type="text/css">
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
</style>
</head>
<body>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0"><tr><td align="center" bgcolor="#ffffff">
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0"><tr><td>
<![endif]-->
<div>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td align="center">
<!--head-->
</td></tr>
<tr><td align="center">
<!--main -->
</td></tr>
<tr><td align="center">
<!--footer -->
</td></tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]-->
</td></tr></table>
</div>
</body>
</html>
Разберём по этапам код: что и зачем мы добавили.
Чтобы решить проблему с автомасштабированием писем в iOS 10 и iOS 11, мы добавили:
<meta name="x-apple-disable-message-reformatting">Пример ошибки автомасштабирования
Следующий хак:
-webkit-text-size-adjust:none; -ms-text-size-adjust: none;не даёт устройствам на iOS изменять контент письма для удобства чтения. Обычно это противоречит дизайну и может поломать вёрстку:
Перейдём к телу письма — раздел body. Цвет фона веб-интерфейса может быть различным, поэтому необходимо всё обернуть в таблицу с желаемым цветом фона, даже если он белый, как в данном случае:
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0"><tr><td>
<![endif]-->
…
<!--[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]-->
Из-за ограниченной поддержки стилевых свойств, например max-width, почтовыми клиентами Outlook 2007–2016, а также IE-подобными почтовыми клиентами Outlook 2003 и Lotus Mail в условных комментариях необходимо построить вспомогательную табличную структуру, которая ограничит ширину письма в этих почтовых клиентах:
<table border="0" cellspacing="0" cellpadding="0">После этого следует основная контентная таблица с шириной 100% и ограничением максимальной ширины в 600 px.
Что нужно помнить при емейл-вёрстке:
- Используйте максимально простую структуру таблиц. Сложные таблицы не всегда верно воспроизводит Outlook.
- Старайтесь избегать объединения ячеек (colspan, rowspan). Вместо этого используйте вложенные таблицы.
- Значения атрибутов cellpadding, cellspacing и border у таблицы следует обнулять.
- Указывайте в явном виде выравнивание внутри ячеек, как горизонтальное, так и вертикальное (align, valign), так как значения по умолчанию могут отличаться. Это негативно сказывается на отображении письма.
- В Outlook (2007/2010) могут появляться «разрывы» страниц, которые выглядят как пространство, разрывающее таблицу или изображение. Они возникают, если высота таблицы превышает 1800 px. Чтобы избавиться от этой проблемы, закройте все таблицы (включая родительскую) и откройте заново, чтобы высота каждой из таблиц не превышала 1800 px.
- Код должен легко читаться. Большое число таблиц часто затрудняет ориентирование в структуре.
- Отбивка вложенных элементов должна присутствовать, но при этом не стоит ей злоупотреблять, как и переносом строк и растягиванием блока в высоту. Логический блок в идеальном варианте должен целиком помещаться на экран.
- Используйте комментарии с обозначением назначений блока и его начала/конца.
- Размер html-кода письма не должен превышать 100 КБ, иначе он будет обрезан в некоторых веб-интерфейсах и почтовых клиентах, в частности, в Gmail. После того как письмо свёрстано и настроено, проверяйте размер получившегося html-файла. Для сокращения размера письма можно исключить все символы табуляции, переноса строк и все комментарии (кроме условных).
- Используйте медиазапросы аккуратно и помните о тех подписчиках, чьи почтовые клиенты их не воспринимают.
Адаптивная верстка писем. Основные элементы
Отступы
Платформы по-разному работают с вертикальными и горизонтальными отступами.
Например, в начале 2013 года оutlook.com начал вырезать отступы margin из кода емейлов.
В результате для создания в емейле необходимых интервалов по горизонтали приходится использовать свойство отступов padding. Осложняет ситуацию то, что почтовый клиент Outlook не поддерживает отступы padding для div, а отступы margin — поддерживает. В связи с этим лучше отказаться от использования как padding, так и margin.
Горизонтальный отступ можно сделать с помощью пустой ячейки с символом неразрывного пробела. Чтобы задать отступ справа и слева, можно создать вложенную таблицу меньших размеров. Вертикальный отступ можно задать следующим образом:
<div> </div>Outlook 2013 имеет ещё одну интересную особенность: при создании ячейки меньше 19 пикселей в высоту она растянется до 19 пикселей. Чтобы этого избежать, вы можете добавить стилевое свойство line-height при описании стиля ячейки.
Текст
При оформлении текста также есть ряд особенностей. Используйте теги, не имеющие специфического оформления по умолчанию, — span.
Для родительской ячейки или блока следует указать line-height. Так как в различных веб-интерфейсах и почтовых клиентах отображение по умолчанию для текста может отличаться, необходимо в явном виде прописывать следующие стилевые свойства:
- Цвет (color). Цвет необходимо прописывать у каждого текстового элемента, при этом, как упоминалось ранее, он должен быть задан в виде шестнадцатеричного кода, например #4676a9.
- Размер шрифта (font-size). Размер обычно указывается в px или pt. Предпочтительней использовать первый вариант.
- Гарнитура (font-family). В письмах следует использовать только стандартные шрифты. Обычно под стандартными подразумевают предустановленные шрифты в ОС Windows XP. Существует два семейства шрифтов — с засечками (serif) и без засечек (sans-serif). Чаще всего используются: Courier, Georgia, Times, Times New Roman, Arial, Verdana, Tahoma, Trebuchet MS.
Если учесть эти рекомендации, то оформление текстового блока будет иметь следующий вид:
<div>
<span>
Пример текста
</span>
</div>
- Высота строки (line-height).
- Спецсимволы. Все спецсимволы (параграфы, сердечки, элементы псевдографики и т. д.) в письме следует заменить на соответствующие html-сущности. Их можно легко найти, например на сайте html5book. Говоря о спецсимволах, стоит также упомянуть о борьбе с «висячими» союзами и предлогами. Их наличие некорректно с точки зрения типографики и не поощряется с точки зрения вёрстки, поэтому следует использовать символ неразрывного пробела, чтобы исключить их.Реже бывает и обратная ситуация, когда встречаются очень длинные слова, которые могут не поместиться на экран мобильного телефона. Чтобы обеспечить корректное отображение и грамотный перенос, можно воспользоваться символом «мягкого переноса»
Ссылки
Оформление ссылок аналогично оформлению обычного текста, соответственно, используется тег «a» и появляется атрибут href.
А также для ссылок в письмах необходимо указывать атрибут target со значением _blank для открытия их в новом окне.
Цвет ссылок следует задать в явном виде и прописать стилевое свойство text-decoration с желаемым значением, так как во многих почтовых клиентах и веб-интерфейсах данное свойство имеет значение по умолчанию underline у ссылок.
Ссылка будет иметь вид:
<a href="#"" target="_blank">
Пример текста
</a>
Изображения и фон
Работа с изображениями в письмах также имеет ряд особенностей. Помимо обязательных атрибутов (src и alt), здесь необходимо в явном виде указывать размеры (width и height) изображения, а также для исключения нежелательных отступов прописывать стилевое свойство display со значением block:
<img src="img/img01.jpg" alt="Акция" border="0" />Если в ячейке содержится только одно изображение, которое в высоту не превышает 19 px, то у этой ячейки следует прописать стилевое свойство line-height с указанием необходимой высоты — для исключения проблем отображения в Outlook 2013.
В большинстве почтовых клиентов и в некоторых веб-интерфейсах (outlook.com, в некоторых случаях yahoo и в некоторых случаях gmail) изображения по умолчанию не загружаются, поэтому необходимо обеспечить приемлемое отображение без картинок, для этого используйте альтернативный текст (alt), стилизованный под дизайн письма, фоновые цвета и т. д.
Так как речь идёт о современных адаптивных письмах, нельзя не упомянуть про Retina-адаптацию. Под этим термином подразумевают подготовку изображений для чёткого отображения на экранах с повышенной плотностью пикселей.
При вставке изображений в адаптивное письмо не всегда можно указать размеры width и height в пикселах, иногда приходится указывать в процентах: часто у креативов прописывается ширина 100%. При этом большинство веб-интерфейсов и почтовых клиентов растянут данное изображение на 100% ширины родительского блока, однако Outlook 2007–2016 отобразит изображение в масштабе 1:1. Поэтому ширина такой картинки должна совпадать с выводимой шириной.
Фоновые изображения
Outlook 2007–2016 не поддерживает фоновые изображения. Исключением является фоновое изображение, прописанное в body. Однако применение данного приёма сильно повышает риск попадания письма в спам, так что использовать его не рекомендуется.
Данное ограничение можно обойти, используя VML. Для удобного его применения можете воспользоваться нашим сервисом.
Товарная сетка
Базовым подходом при адаптации писем является «резиновая» вёрстка. Для обеспечения удобного взаимодействия с письмом на небольшом экране мобильного устройства и на экране стационарного компьютера или ноутбука часто применяется приём блочного перестроения.
Он основан на применении инлайновых блоков. При уменьшении экрана, когда блоки перестают помещаться, они перестраиваются один под другой:
Так как Outlook 2007–2016 не поддерживает плавающие блоки, то специально для них строится вспомогательная структура в условных комментариях:
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0"><tr><td>
<![endif]-->
Блок1
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
Блок2
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->Код, заключённый между:
<!--[if (gte mso 9)|(IE)]><![endif]-->будет проигнорирован всеми почтовыми клиентами, кроме Оutlook 2007–2016 и IЕ-подобными почтовыми клиентами.
А каждый из блоков будет иметь следующую структуру:
<div>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tr><td align="left" valign="middle">
Блок
</td></tr>
</table>
</div>Также в письмах иногда встречается ситуация, когда блоки расположены в шахматном порядке, однако при перестроении желательно сохранить логическое следование блоков и перестраивать не правый блок под левый, а наоборот — левый блок под правый. Это можно сделать, поменяв направление текста, выглядеть это будет следующим образом:
<table border="0" cellspacing="0" cellpadding="0">
<tr><td dir="rtl" align="center"><!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td dir="rtl">
<![endif]--><!--
Item --><div>
<table cellpadding="0" cellspacing="0" border="0" dir="ltr">
<tr><td align="center">
Блок 2
</td></tr>
</table>
</div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
</td><td>
<![endif]--><!--
Item --><div>
<table border="0" cellspacing="0" cellpadding="0" dir="ltr">
<tr><td align="center">
Блок 1
</td></tr>
</table>
</div><!--[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]--></td>
</tr>
</table>Адаптивная верстка писем.
Прочие элементы и приёмыНевидимый прехедер
Практически все веб-интерфейсы выводят рядом с темой письма также и первый текст:
В рассылках это обычно техническая информация, вроде «отписаться» и «открыть в браузере», что явно не мотивирует подписчика открыть письмо, однако, контролируя выводимый текст, можно значительно повысить шанс открытия письма.
Для этого следует добавить в самое начало html-тела письма код со следующей структурой:
<!--[if !mso]><!-->
<div>
4 варианта майских праздников от Localway. Сидеть дома в майские праздники — грех.
</div>
<!--<![endif]-->
Использование невидимого прехедера может негативно сказаться на доставляемости, поэтому используйте данный приём аккуратно и тщательно следите через постмастер за доставляемостью.
Видео в письмах
С выходом iOS 10 стандартный почтовый клиент Mail вновь стал воспроизводить html5-видео, однако оптимальный вариант вставки видео в письмо — прямая ссылка на youtube-видео, поставленная на изображение.
При такой реализации видео отобразится на слое в веб-интерфейсах Mail.ru (около 55%) и Gmail (около 14%). При этом на большинстве мобильных устройств видео будет открыто в приложении Youtube, без открытия браузера.
Недостатком такого подхода является невозможность собрать статистику кликов, т. к. ссылка на Youtube должна быть прямой, и отслеживание кликов у данной рассылки придётся отключить в вашей ESP.
Тестирование
Важнейший этап вёрстки — тестирование писем. Лучший способ по-прежнему — ручная проверка отображения письма в различных веб-интерфейсах и почтовых клиентах, в этом может помочь наш бесплатный сервис для отправки «сырой» вёрстки писем в виде архива. Необходимо знать, какие платформы используют ваши подписчики, каким почтовым провайдерам отдают предпочтение, и провести ручную проверку хотя бы в самых популярных из них.
Для ускорения процесса тестирования можно воспользоваться сервисами Litmus и EmailOnAcid, однако это не отменяет необходимости проверки отображения каждого отдельного письма вручную.
В статье упоминались некоторые сервисы, ресурсы и инструменты, которые несомненно будут полезны верстальщику писем и не только. Приведу небольшой список полезных ресурсов.
Инструменты и сервисы:
Email buttons — генератор кнопочек с использованием VML.
Background generator — вставка фоновых изображений в письма с использованием VML.
Litmus — тестирование отображения писем.
Email On Acid — альтернатива Litmus: тестирование отображения писем.
Полезные материалы:
Блог Litmus — лидер рынка емейл-тестирования. Интересные кейсы и последние новости из мира емейл-маркетинга и вёрстки емейл-писем.
Блог Email On Acid — интересные кейсы и последние новости из мира емейл-маркетинга и вёрстки емейл-писем.
EmailsLab — первый блог о емейл-маркетинге, рассказывает о том, как сделать письма эффективными.
Tod’s blog — интересные кейсы и полезные материалы о вёрстке и разработке.
Невозможно установить поле для тега ‹td› без атрибутов CSS или cellspacing [html, css, html-table, margin, cellspacing]
По какой-то причине мне не удалось добиться, чтобы какие-либо ячейки таблицы имели маржу между ними.
Я хочу, чтобы ячейки таблицы имели серый цвет фона (на белом фоне страницы), чтобы они выглядели как плитки с белым между ними.
Я пробовал в HTML,
<table cellspacing="3">
Также в CSS
table td {
margin:3px;
}
Ничего не работает. Клетки все еще слиплись, как одна большая серая капля. Мне здесь не хватает чего-то очень простого?
Вот фактический код:
<table cellspacing="3">
<tr>
<th>Document Number</th>
<th>BP Reference No.</th>
<th>Posting Date</th>
<th>Posting Week</th>
<th>Customer/Vendor Code</th>
<th>Customer/Vendor Name</th>
<th>Item No.</th>
<th>Item/Service Description</th>
<th>Item Group</th>
<th>Warehouse Code</th>
<th>Remaining Open Quantity</th>
<th>Line No.</th>
<th>Sales Employee Name</th>
<th>Stock</th>
<th>Fill Rate</th>
<th>1046</th>
<th>1047</th>
<th>1048</th>
<th>1049</th>
<th>1050</th>
<th>1051</th>
<th>1052</th>
<th>1053</th>
<th>1054</th>
<th></th>
</tr>
<tr>
<td>17272</td>
<td>2244100</td>
<td>5/24/2010</td>
<td>22</td>
<td>NYST</td>
<td>NYSTROM INC. </td>
<td>NYM118SX26DSTKS01</td>
<td>Nystrom, Mort. 1-1/8'', Schl C~K, US26D, ST cam, 5pin, KS #43758</td>
<td>Mort Cylinders</td>
<td>US1</td>
<td>1000</td>
<td>3</td>
<td>KRE Management 1</td>
<td>0</td>
<td>100</td>
<td>1000</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
</tr>
</table>
</td>
<td>NYM118SX26DSTKS01</td>
<td>Nystrom, Mort. 1-1/8'', Schl C~K, US26D, ST cam, 5pin, KS #43758</td>
<td>Mort Cylinders</td>
<td>US1</td>
<td>1000</td>
<td>3</td>
<td>KRE Management 1</td>
<td>0</td>
<td>100</td>
<td>1000</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
</tr>
</table>
html css html-table margin cellspacing
person jeffkee
schedule 09.
12.2010
source источник
Ответы (7)
arrow_upward
93
arrow_downward
Если у кого-то все еще есть эта проблема, попробуйте это в своей таблице стилей CSS:
table {
border-collapse: separate;
border-spacing: 10px 5px;
}
Значения для расстояния между границами — это два измерения длины. Горизонтальное значение идет первым и применяется между столбцами. Второе измерение применяется между рядами.
Если вы укажете одно значение, оно будет использоваться как по горизонтали, так и по вертикали. Значение по умолчанию — 0, в результате чего границы на внутренней сетке таблицы увеличиваются вдвое.
person sebastian schedule 14.04.2011
arrow_upward
7
arrow_downward
Если вы используете сброс CSS в начале таблицы стилей, проверьте, есть ли в нем следующий код.
table {
border-collapse: collapse;
}
Если это так, попробуйте переопределить его с помощью:
border-collapse: separate;
person Sam Nabi schedule 09.12.2010
arrow_upward
4
arrow_downward
сделать стиль тд с блоком. Попробуй это,
<table border="0" cellpadding="2" cellspacing="1">
<tbody>
<tr>
<td>Please Re-enter login information</td>
</tr>
</tbody>
</table>
.SlateGridDataError {
border-radius: 2px;
display: block;
font-size: 14px;
color: #999999;
display:block;
border: 1px solid #dd3c39;
border-left: 5px solid #dd3c39;
padding: 12px 5px;
margin-bottom: 20px;
cursor: default;
outline: none;
}
person Falah
schedule 02.
05.2016
arrow_upward
0
arrow_downward
Я думаю, cellspacing принимает тот же цвет, что и цвет фона таблицы.
Итак, у вас есть два варианта:
1. Применить цвет фона к tds, а не к самому <table>.
2. Возможно, вы захотите использовать белая рамка (border для <td> с border-collapse: collapse для таблицы)
person Nivas schedule 09.12.2010
arrow_upward
-1
arrow_downward
Попробуйте добавить td между двумя TD, у которых вы хотите иметь запас. Установите для него отсутствие фона (просто не используйте «background: something;») и установите желаемую ширину. Если вы хотите поместить отступ между двумя TR, просто добавьте еще один tr между ними и поставьте td с высотой, которую вы хотите, чтобы это поле было.
Вы даже можете использовать один и тот же класс для TD и установить CSS только один раз.
person Breno schedule 16.08.2014
arrow_upward
-3
arrow_downward
Это грубое исправление, но оно работает.
Если вы создаете <table> с полями нужного вам размера … содержащую ваш существующий, оба с использованием одного и того же фона или цвета, вы можете установить поля внешней таблицы, как вы хотите.
Если у вас есть серия из <TD> элементов, создайте <table> внутри <TD>, для которого вы хотите иметь поле, и снова убедитесь, что и внешний <table>, и внутренний <TD> имеют одинаковый фон или цвет.
пример из моего блога на http://harrolds.blogspot.com, который включает скрипт для отображения цитат . ..
Основная таблица:
<table bgcolor="lightblue" border=1>
<tbody>
<tr>
<td align="left"><span><small><a href="http://en.wikipedia.org/wiki/Zell_Miller" target="_new">Sen. Zell Miller</a> <small>(D-GA) RNC'04</small></small></span><br /><object><param name="movie" value="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&hl=en&fs=1&border=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&hl=en&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed></object><br /><font size="-1"><spansylfaen";><a href="http://www.harrold.org/rfhextra/support_our_Troops.html" target="_new"><b><small>Liberators & Defenders</small></b></a></span></font>
</td>
<td background="http://harrold. org/rfhextra/images/bgparchmentlight.jpg">
<table border=0>
<tr>
<td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg"><script language="javascript" src="http://www.harrold.org/rfhextra/quote.js" type="text/javascript"></script>
</td>
</tr>
</table>
</td>
<td align="right"><a href="http://www.cafepress.com/rightwingstuff" target="_new"><small><small>RightWingStuff</small></small></a><br /><a href="http://www.gadsdenandculpeper.com/" target="_new"><img src="http://harrold.org/rfhextra/images/GadsdenFlag98x130.gif" alt="link source http://www.cafepress.com/rightwingstuff" border="0" /></a>
</td>
</tr>
</tbody>
</table>
org/rfhextra/images/bgparchmentlight.jpg">
<table border=0>
<tr>
<td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg"><script language="javascript" src="http://www.harrold.org/rfhextra/quote.js" type="text/javascript"></script>
</td>
</tr>
</table>
</td>
<td align="right"><a href="http://www.cafepress.com/rightwingstuff" target="_new"><small><small>RightWingStuff</small></small></a><br /><a href="http://www.gadsdenandculpeper.com/" target="_new"><img src="http://harrold.org/rfhextra/images/GadsdenFlag98x130.gif" alt="link source http://www.cafepress.com/rightwingstuff" border="0" /></a>
</td>
</tr>
</tbody>
</table>
person rharrold
schedule 22.
08.2011
arrow_upward
arrow_downward
person schedule
Как сделать HTML-таблицы – Создать веб-сайт
Перейти?
Обзор
Основная таблица
Теги, которые можно добавить к командам TR/TD
Часто задаваемые вопросы
Таблицы и фреймы являются одними из наиболее часто используемых функций на хорошей веб-странице. Эта страница состоит из 3-х таблиц и множества ячеек, я избавился от некрасивых бордюров.
Код:
| Бла-бла-бла |
Как выглядит:
| Бла бла бла |
Расшифровка тегов:
BORDER=1 Может изменить толщину линии, окружающей таблицу.
Вы можете поставить 0, если не хотите, чтобы у вашей таблицы была граница.
Пример:
Код:
3
0 Бла-бла-бла
Блахх
Результат:
| Бла бла бла | Блахххх |
CELLSPACING=0 Вставляет пробелы между ячейками таблицы.
Пример:
Код:
| Бла-бла-бла | Blahhh |
Результат:
| Бла бла бла | Блаххх |
CELLPADDING=1 Добавляет пробелы между краем ячейки и текстом.
Пример:
Код:
| Бла-бла-бла | Blahhh |
Результат:
| Бла бла бла | Блаххх |
WIDTH=150 Определяет, какую часть экрана он занимает. Вы также можете указать процент экрана в качестве ширины, чтобы он растягивался при большем или меньшем разрешении экрана.
Пример:
Код:
| Бла-бла-бла | Blahhh |
Результат:
| Бла бла бла | Блаххх |
BGCOLOR=»#ffffff» Управляет цветом фона таблицы с помощью шестнадцатеричного цвета.
Пример:
Код:
| Бла-бла-бла | Blahhh |
Результат:
| Бла бла бла | Блаххх |
align=»center» Выравнивает таблицу по определенной стороне доступного пространства.
Есть много вещей, которые вы добавляете к своим командам TR или TD, чтобы сделать таблицу именно такой, какой вы хотите.
Дополнительные теги TR
VALIGN=?TOP? Он говорит браузеру переместить все содержимое таблиц в ВЕРХ ячейки.
Дополнительные команды TD
Ширина=?Число? Он изменяет размер таблицы на количество пикселей, указанное в кавычках.
ВЫРАВНИВАНИЕ=?ЦЕНТР или ВПРАВО? Он центрирует или сдвигает содержимое таблицы вправо. Текст автоматически располагается слева, если вы его не добавляете.
Пример:
| Середина | Направо | Слева |
COLSPAN=?Количество ячеек, которое вы хотите охватить? Я не совсем уверен, как объяснить это словами, поэтому я покажу вам.
Пример:
| COLSPAN=”3″ 3 для 3 ячеек | ||
| 1 ячейка | 2-я ячейка | 3-я ячейка |
ROWSPAN=?Количество строк, которые вы хотите, чтобы ячейка занимала?
Пример:
| ROWSPAN=”4″ 4 для 4 TR |
| 1 ячейка |
| 2-я ячейка |
| 3-я ячейка |
Могу ли я использовать все теги TD/TR одновременно?
Да, конечно можно!
Есть ли другие теги, которые я могу поместить в команды TR/TD?
Да, но большинство из них недействительны в HTML.
Можно поставить стол в стол?
Да, можете. Просто закодируйте полную таблицу внутри таблицы, и она должна работать. Не забудьте закрыть обе таблицы!
Перейти к…
Руководство по HTML
Руководство по фреймам
Шестнадцатеричные коды цветов
ПРОБЛЕМА-155: приведите в соответствие
table-border
приведите
com от 21 сентября 2012 г.)
com от 15 сентября 2012 г.)
net 16 апреля 2011 г.)
no от 15 апреля 2011 г.)
net от 30 марта 2011 г.)
com от 25 марта 2011 г.)
com от 23 марта 2011 г.)
: Действия и вопросы (от 
Среди этих тегов есть специфичные для браузера расширения . Используйте их с осторожностью. В первую очередь, но не только, Netscapes «поспешил»
раннее использование предложений HTML 3.0 всегда создавало проблемы для дизайнеров веб-страниц. Там
нет ратифицированного HTML 3.0 , и это предложение было изменено И затем ратифицировано
W3C как HTML 3.2 . Соображения для самых последних браузеров
следует игнорировать, если только вы не хотите ограничить эффективный просмотр только частью
посетителей вашего сайта! «Игрушки» — это одно, а эффективная передача информации должна
ваша главная забота еще какое-то время. | ||
| <ТАБЛИЦА> | ||
| Тег таблицы Характеристики, применимые ко всей таблице, включены в тег таблицы. Таблица теги должны включать закрывающую пару |
Характеристики включают: границу или отсутствие границы; граница
ширина; размер заполнения ячейки; размер интервала между ячейками; ширина стола. Некоторые последние браузеры также будут
принимать цвета и изображения фона таблицы, а также значения высоты таблицы. Эти атрибуты
не являются обычными атрибутами HTML 3.2 и должны использоваться с осторожностью — многие люди будут
не вижу этих Расширения MS и Netscape . Большие таблицы, из которых можно сделать страницу
очень долго надо разбивать на отдельные таблицы. При загрузке таблиц браузер будет ждать
пока все объекты в каждой таблице не будут получены с сервера перед их отображением.
Поэтому дайте зрителю что-то, на что он может посмотреть, а не пустое окно браузера. Просто
ожидание на телефонных линиях может быть достаточно большой проблемой.
| Foo Bar and Waffle |
При использовании атрибута «Граница» без параметров будет отображаться значение по умолчанию.
граница шириной «1».
т.е. <граница таблицы>. ( Пара тегов …
без
атрибуты вообще не будут показывать никаких границ. Следующие атрибуты и характеристики
тоже не будет по умолчанию )
| 0 | 0 |
| 0 | 0 |
| 1 | 1 |
| 1 | 1 |
| 5 | 5 |
| 5 | 5 |
| 0 | 0 |
| 0 | 0 |
| 1 | 1 |
| 1 | 1 |
| 8 | 8 |
| 8 | 8 |
Может использоваться для размещения пробела между ячейками/объектами в невидимых таблицах — т.е. border=0 .
| 0 | 0 |
| 0 | 0 |
| 3 | 3 |
| 3 | 3 |
| 9 | 9 |
| 9 | 9 |
Может использоваться для размещения пробела между ячейками/объектами в невидимых таблицах — т.е. border=0 .
| * | * |
| * | * |
| * | * |
| * | * |
| * | * |
| * | * |
| * | * |
| * | * |
| * | * |
| * | * |
| * | * |
| * | * |
Поэтому проценты относятся к
ширина скрытых ячеек. Ширина может представлять полное окно браузера, а таблицы изменятся в размере , если окно браузера изменится. см. образцы на
внизу этой страницы
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Чтобы иметь ячейку данных, вы должны сначала иметь таблицу, a Строка < tr > и затем ячейки данных | . В других
словами, все ячейки данных должны содержаться в строках таблицы (см. TD ниже).
Зачастую это сложная комбинация строк таблицы и ячеек данных внутри строк, которая
позволяет конкретное размещение объектов, кроме самого основного слева, справа и по центру
атрибуты объекта. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <ТД> | (должен появляться в строках таблицы)|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Ячейки данных таблицы содержат объекты, помещенные в стол. Ячейки данных таблицы | должны быть заключены в теги строки таблицы | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| … | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||
Объекты, содержащиеся в ячейках данных, могут быть текстовыми,
растровые изображения или любой другой объект, который можно поместить на веб-страницу (например, апплеты Java,
Формы, встроенные звуковые устройства/объекты и т. д.) | ||||||||||||||||||||
| <ТД ВЫРАВНИВАТЬ=влево|вправо|по центру> | ||||||||||||||||||||
Выравнивание управляет выравниванием объектов
в ячейке данных.
| ||||||||||||||||||||
| Атрибуты выравнивания, перечисленные в заголовке должно быть понятно. | ||||||||||||||||||||
| <ТД VALIGN=верхний|средний|нижний> | ||||||||||||||||||||
Выравнивание по вертикали контролирует положение
объекты в ячейке данных.
| ||||||||||||||||||||
| Атрибуты вертикального выравнивания, перечисленные в заголовок должен быть понятным. | ||||||||||||||||||||
| | | |||||||||||||||||||
Nowrap означает отсутствие разрывов строк в текстовых объектах.
| ||||||||||||||||||||
| Здесь таблица уменьшена до минимального размера 100 пикселей, хотя он не может уменьшиться до этого размера, потому что установлена правая ячейка с атрибутом | nowrap >… | . Текст слева ручная ячейка завернута, потому что ее ширина сведена к минимуму силой текста в ячейка «сейчас».|||||||||||||||||||
| | | |||||||||||||||||||
Сделать одну ячейку данных шире , чем
другие выше и/или ниже. ( охватывает несколько столбцов )
| ||||||||||||||||||||
Верхняя строка содержит две ячейки данных. Чтобы заставить
нижняя одиночная ячейка данных равна ширине двух верхних (и ширине таблицы в
в этом случае) используется атрибут colspan= . Обратите внимание на этот порядок TR и
ТД. Каждая ячейка данных в таблице (по горизонтали) представляет столбец . | ||||||||||||||||||||
| | | |||||||||||||||||||
Сделать одну ячейку столбца выше чем другие рядом с ним. ( охватывает несколько строк )
| ||||||||||||||||||||
Левый столбец содержит две ячейки данных
по сравнению с одной ячейкой данных в правом столбце. Обратите внимание на этот порядок TR и TD.
Ячейка данных старшего уровня описывается в первой строке, аналогично «colspan».
образец выше. Но атрибут rowspan создает совсем другой результат. | ||||||||||||||||||||
| <ШИРИНА ТД=?> | (в пикселях)||||||||||||||||||||
Установить ширину отдельных ячеек таблицы в
пикселей .
| ||||||||||||||||||||
| Тег | каждой ячейки данных включает
ширина=??? атрибут. (минимальная ширина в пикселях экрана) | |||||||||||||||||||
| <ТД > | (процент от таблицы)||||||||||||||||||||
Равные ячейки данных таблицы.
| Неравномерные ячейки
| Неравномерные ячейки
| ||||||||||||||||||
Каждая из этих таблиц находится внутри ячеек таблицы
скрытая таблица фиксированной ширины, используемая для этого списка, и каждая таблица была установлена на 70% от
ширина скрытой ячейки. Проценты, отображаемые в каждой ячейке, относятся к ширине
таблица, в которой находится ячейка. Следовательно, если бы каждая таблица находилась на странице, а не в скрытых ячейках, как
они здесь, эти ячейки таблицы изменились бы по ширине, если бы окно браузера и таблица
изменился по ширине. см. образцы внизу этой страницы | ||||||||||||||||||||
| <ТД BGCOLOR="#rrggbb"> | ||||||||||||||||||||
Установка цвета фона отдельных
Таблица Ячейки данных
| ||||||||||||||||||||
Этот атрибут является последним NS & MSIE
расширение, а не стандартный HTML 3. 2. Используйте его осторожно. т.е. темный цвет со светлым текстом скроет ваш текст во многих браузерах | ||||||||||||||||||||
| <ТН> (то же, что и TD, за исключением того, что текст выделен жирным шрифтом) | ||||||||||||||||||||
Ячейка заголовка таблицы.
| ||||||||||||||||||||
Тег TH можно использовать вместо тега TD. Все атрибуты такие же, как у | , за исключением того, что все текстовые объекты выделены полужирным шрифтом. Используется не очень часто. | |||||||||||||||||||
| <ТН ВЫРАВНИВАТЬ=влево|вправо|по центру> | ||||||||||||||||||||
| По умолчанию Полужирный текст, иначе обратитесь к атрибутам | ||||||||||||||||||||
| <ТН VALIGN=верхний|средний|нижний> | ||||||||||||||||||||
| По умолчанию Полужирный текст, иначе обратитесь к атрибутам | ||||||||||||||||||||
| | | |||||||||||||||||||
| По умолчанию Полужирный текст, иначе обратитесь к атрибутам | ||||||||||||||||||||
| | | |||||||||||||||||||
| По умолчанию Полужирный текст, иначе обратитесь к атрибутам | ||||||||||||||||||||
| | | |||||||||||||||||||
| По умолчанию Полужирный текст, иначе обратитесь к атрибутам | ||||||||||||||||||||
| <ШИРИНА=?> (в пикселях) | ||||||||||||||||||||
| По умолчанию Жирный текст, иначе обратитесь к атрибутам | ||||||||||||||||||||
| <ТН > (процент от таблицы) | ||||||||||||||||||||
| По умолчанию Полужирный текст, иначе обратитесь к атрибутам | % . | |||||||||||||||||||
| <ТН BGCOLOR="#rrggbb"> | ||||||||||||||||||||
| По умолчанию Полужирный текст, иначе обратитесь к атрибутам | расширение. | |||||||||||||||||||
| <ЗАГОЛОВОК> (над или под таблицей) | ||||||||||||||||||||
A Заголовок таблицы отображается без таблицы
границы .
| ||||||||||||||||||||
Этот тег таблицы и его атрибуты используются для
размещайте подписи вверху или внизу таблиц. | ||||||||||||||||||||
д.!