Css выравнивание таблицы по центру: Как выровнять таблицу по центру окна браузера?

выравнивание по центру таблицы — CodeRoad

как выровнять таблицу по центру в середине страницы с помощью css. Вот что у меня есть http://jsfiddle.net/m5uEr/

<div>
    <table>
        <tr>
            <td>test</td>
        </tr>
    </table>
</div>

html

css

Поделиться

Источник

clarity    

12 декабря 2012 в 22:54

4 ответа

• UIView-выравнивание по центру всего содержимого UIView?

  Как центрировать выравнивание всего содержимого вида. Когда я вращаю iPad содержимое не выравнивается по центру, как решить эту проблему?? Спасибо!!!

• qt выравнивание строки состояния по центру?

  Как я могу выровнять текст по центру в QStatusBar? По умолчанию он всегда выровнен по левому краю. Я знаю, что могу добавить QLabel и установить выравнивание, но я хочу использовать обычный текст и метод .showMessage(QString, int), чтобы добавить значение тайм-аута.

2

table.center {
    margin-left:auto; 
    margin-right:auto;
  }

<table>
    <tr>
        <td>test</td>
    </tr>
</table>

Ваш обновленный fiddle

Google нашел его для меня с этим текстом: «center align table css»

Поделиться

gdoron is supporting Monica    

12 декабря 2012 в 22:56

1

Установите ширину на вашем столе и установите

margin:auto

Поделиться

jordan    

12 декабря 2012 в 22:57

1

css не работал, поэтому я сделал <table align="center">

это на IE8

Поделиться

clarity    

12 декабря 2012 в 23:04

1

Вы поместили margin-left:auto, margin-right:auto в свойства div?

Это легко сделать.

Эти свойства должны принадлежать таблице

<div>
    <table>
        <tr>
            <td>tdddest</td>
        </tr>
    </table>
</div>​

Поделиться

mr mojo risin    

13 декабря 2012 в 04:24

Похожие вопросы:

Div выравнивание по центру

У меня есть div, в котором все содержимое выровнено по центру: <div align=center> <table><tr><td>….. Но выравнивание не является более допустимым атрибутом. Итак, я перешел…

Выравнивание текста по вертикали по центру в UITextView

Я устанавливаю некоторый приписываемый текст на textview и даю строку. Я пытаюсь установить выравнивание базовой линии по вертикали по центру, но не могу этого сделать. Как я могу установить…

Выравнивание текста по вертикали и Центру

У меня есть h2 внутри body ,и я хочу выровнять этот текст по вертикали и по центру. Я знаю, что могу использовать position: absolute; , а затем margin-top: HALF OF HEIGHT; , но этот h2 меняется при…

UIView-выравнивание по центру всего содержимого UIView?

Как центрировать выравнивание всего содержимого вида. Когда я вращаю iPad содержимое не выравнивается по центру, как решить эту проблему?? Спасибо!!!

qt выравнивание строки состояния по центру?

Как я могу выровнять текст по центру в QStatusBar? По умолчанию он всегда выровнен по левому краю. Я знаю, что могу добавить QLabel и установить выравнивание, но я хочу использовать обычный текст и…

Таблица выравнивание по центру не выравнивает по центру

Я строю простую таблицу в CKEditor. Если я выберу выравнивание по левому или правому краю, то при сохранении он выровняется по ожидаемой стороне вида. Однако при сохранении это не удается, если я…

Как добавить панель инструментов выравнивания(выравнивание по левому краю, выравнивание по центру, выравнивание по правому краю) в Редакторе Summernote

Я делаю некоторые POC в Редакторе summernote HTML и использую пользовательскую панель инструментов, но я не понимаю, как добавить выравнивание(выравнивание по левому краю, выравнивание по центру,…

JavaFX CSS выравнивание по центру

Я создаю пользовательскую тему в JavaFX, используя CSS, и пытаюсь сделать так, чтобы все HBoxes и VBoxes имели выравнивание по центру. Я искал везде, чтобы найти, есть ли класс укладки для родителей…

Выравнивание по центру

Если у меня есть тег div. <div id=length></div> Я хочу, чтобы его содержимое было сосредоточено. Я также хочу, чтобы ширина div была уменьшена(достаточно, чтобы вместить число). #length{…

Выравнивание формы по центру, находящемуся внутри VBox

У меня есть простая форма, которая находится внутри VBox. Теперь, если я попытаюсь установить выравнивание элементов по центру, форма в режиме рабочего стола разбивается на метки и ввод в отдельные…

Разбираемся в семантической вёрстке таблиц / Skillbox Media

Структура таблиц очень похожа на структуру HTML-страницы. Только для страницы мы используем теги <header>, <main> и <footer>, а для таблицы — <thead>, <tbody> и <tfoot>.

Согласно стандарту HTML5, в таблице может быть только по одной секции thead и tfoot, а вот tbody — несколько.

Эти элементы полезны не только для доступности, но и для стилизации (как логичные точки добавления CSS к таблице).

Этим тегом задают заголовочную секцию таблицы. Чаще всего речь идёт о первой строке — содержащей заголовки столбцов.

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

В <thead> для ячеек используют тег <th>. Контент в ячейке th браузер выравнивает по центру, а текст к тому же отображает жирным шрифтом.

Например:

Сaption

 <table>
        <caption>Caption</caption>
        <thead>
            <tr>
                <th>th</th>
                <th colspan="4">th</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>td</td>
                <td>td</td>
                <td>td</td>
                <td>td</td>
                <td>td</td>
            </tr>
            <tr>
                <td>td</td>
                <td>td</td>
                <td>td</td>
                <td>td</td>
                <td>td</td>
            </tr>        
        </tbody>
    </table>

Из примера видно, что первая строка объединяет две ячейки <th>. Первая ячейка первой строки — это заголовок для других ячеек первого столбца, а вторая ячейка первой строки — это заголовок четырёх оставшихся столбцов.

Тег <th> задаёт особые ячейки, с которых начинаются строки или столбцы. В такой ячейке обычно хранится атрибут для всех данных строки или столбца.

Как мы и говорили выше, к содержимому таких ячеек применяется определённый стиль: по умолчанию это выделение жирным шрифтом и выравнивание по центру ячейки.

Благодаря заголовочным ячейкам таблица выглядит лучше, а искать данные в ней становится проще.

Важно. Не применяйте <th> для визуального форматирования — только для выделения ячейки-заголовка. Этот принцип касается всех элементов разметки, которые обладают семантикой.

Тег <th> даёт ещё одно преимущество: вместе с атрибутом scope он связывает каждый заголовок со всеми данными строки или столбца. То есть добавляет к интуитивной, визуально считываемой связи такую, которую понимают и программы.

К тегу <th> и атрибуту scope мы вернёмся ближе к концу статьи, где подробнее поговорим о доступности таблиц для пользователей с ограниченными возможностями.

Секция <tbody> содержит основную часть информации и группирует главные части таблицы. То есть можно использовать <tbody> сколько угодно раз, чтобы разбивать основной контент таблицы на части, данные которых связаны общей логикой.

Тег <tbody> семантически важен: браузер, поисковые роботы и помощники для людей с ограниченными возможностями благодаря ему понимают, где находится основное содержимое таблицы.

Тело таблицы располагается после заголовка <caption> и шапки <thead>.

Пример:

Здесь нет заголовка <caption>, поэтому нужно его придумать и скрыть с помощью CSS (для доступности веб-содержимого).

Данные основной части таблицы надо сгруппировать по смыслу. У нас сначала идёт январь, затем февраль. Значит, для данных каждого месяца логично использовать свой <tbody>:

• в первом <tbody> будут январские строки;
• во втором <tbody> — февральские.

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

Семантически это итог таблицы (например, результат подсчёта сумм по столбцам).

А ещё это нижний колонтитул таблицы, браузер выводит его после <tbody>, а при печати таблицы содержимое <tfoot> может быть как на каждой напечатанной странице, так и только на последней (это зависит от браузера).

Важно. Чтобы предотвратить проблемы с доступностью (клавиатурная навигация и специальные возможности), размещать <tfoot> следует после <tbody>.

Для ячеек в секции <tfoot> следует использовать тег <td>.

Пример:

Таблица чисел

<table>
        <caption>Таблицa чисел</caption>
        <thead>
            <tr>
                <th>Нечётное</th>
                <th>Чётное</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">
                   Вы узнали, что такое чётные и нечётные числа
                </td>
            </tr>
        </tfoot>
    </table>

Последняя строка нашего примера — это по смыслу итог таблицы. Поэтому её вполне уместно обернуть тегом <tfoot>, превратив в нижний колонтитул.

Справка:Таблицы — MediaWiki

Запрос Таблицы перенаправляется сюда; информацию о структуре вики таблиц, смотрите Руководство:Макет базы данных .

В вики-страницах могут быть созданы таблицы.
Как правило, следует избегать создания таблиц, за исключением случаев, когда они действительно необходимы.
Поскольку разметка таблиц усложняет редактирование страницы.^[1]

Вики-разметка таблиц

• вышеприведённые знаки должны начинаться с новой строки, кроме двойных || и !! для последовательных ячеек в строке. Тем не менее, пробелы в начале строки игнорируются.
• атрибуты XHTML. Каждый знак разметки, кроме конца таблицы, может иметь при себе один или несколько атрибутов XHTML. Атрибуты должны быть на той же строке, что и знаки разметки. Атрибуты следует разделять друг от друга одиночным пробелом.
  • У ячеек и заголовка (| или ||, ! или !!, и |+) есть содержимое. Поэтому содержимое от атрибутов тэга нужно отделять вертикальной чертой (|). Содержимое может располагаться в той же строке или в следующих строках.
  • Маркеры таблицы и строк ({| и |-) напрямую не содержат контента. Не добавляйте разделитель в виде вертикальной черты (|) после их необязательных атрибутов. Если вы добавите его по ошибке к маркеру таблицы или строки, парсер удалит его и атрибут может присоединиться к неверному маркеру.
• Содержимое может располагаться (а) за знаком ячейки в той же строке после необязательных XHTML атрибутов или (б) на строках под знаком ячейки. Содержимое, использующее вики-разметку, которая должна сама начинаться с новой строки, например, списки, заголовки или вложенные таблицы, разумеется, должно начинаться с новой строки.
  • Вертикальная черта в качестве символа. Для того, чтобы вставить вертикальную черту (|) в качестве символа в таблицу, используйте экранирование <nowiki>|</nowiki>.

Основы

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

{|
|Апельсин
|Яблоко
|-
|Хлеб
|Пирог
|-
|Масло
|Мороженое 
|}

Ячейки в одной строке могут быть размещены на одной линии, разделённые знаками || (два символа-разделителя).
Если текст в ячейке должен содержать разрыв строки, используйте вместо разрыва ‎<br />.

{|
|Апельсин||Яблоко||и т. д.
|-
|Хлеб||Пирог||и т. д.
|-
|Масло||Мороженое||и <br /> т. д.
|}

Дополнительные пробелы внутри вики-разметки для улучшения её внешнего вида, как это показано в примере ниже, не влияют на итоговый вид таблицы.

{|
|  Апельсин || Яблоко || и т. д.
|-
|   Хлеб || Булка || и т. д.
|-
|   Масло || Мороженое || и т. д.
|}

У вас также может быть более длинный текст или более сложное написание в ячейках таблицы:

{|
|Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, 
sed diam voluptua. 

At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet. 
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}

Заголовки таблиц

Заголовки таблиц можно создать, используя «!» (восклицательный знак) вместо «|» (вертикальной черты).
Заголовки по умолчанию показываются обычно жирными и отцентрированными.

{|
!| Предмет
! Количество
! Цена
|-
|Апельсин
|10
|7.00
|-
|Хлеб
|4
|3.00
|-
|Масло
|1
|5.00
|-
!Всего
|
|15.00
|}

При использовании атрибутов, как в заголовке ‘Предмет’, нужна вертикальная черта ‘|’ для разделения. Но не восклицательный знак ‘!’.

Название таблицы

Над таблицей может быть размещено её название, как показано ниже.

{|
|+Комплект продуктов
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Пирог
|-
|Масло
|Мороженое 
|}

class=»wikitable»

Основной стиль (светло-серый фон, границы, отступ и выравнивание слева) можно получить, добавив.

{|
|+Комплект продуктов
|-
|Апельсин
|Яблоко
|-
|Хлеб
|Пирог
|-
|Масло
|Мороженое 
|}

Атрибуты HTML

colspan и rowspan

Вы можете использовать атрибуты HTML colspan и rowspan для ячеек при более сложной разметке.

{|
!colspan="6"|Список покупок
|-
|rowspan="2"|Хлеб и масло
|Пирог
|Плюшки
|Слойка
|colspan="2"|Круассан
|-
|Сыр
|colspan="2"|Мороженое
|Масло
|Йогурт
|}

Атрибуты XHTML

В таблицы вы можете добавлять атрибуты XHTML.
В качестве официального источника по ним см., страницу спецификации W3C HTML-таблиц.

Атрибуты для таблиц

Помещая атрибуты после начального тэга таблицы ({|) применяет атрибуты ко всей таблице.

{|
|Апельсин
|Яблоко
|12,333.00
|-
|Хлеб
|Пирог
|500.00
|-
|Масло
|Мороженое
|1.00
|}

Атрибуты для ячеек

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

{|
| Апельсин
| Яблоко
| | 12,333.00
|-
| Хлеб
| Булка
| | 500.00
|-
| Масло
| Мороженое
| | 1.00
|}

Также можно использовать атрибуты ячейки, когда вы размещаете несколько ячеек в одной строке.
Обратите внимание, что ячейки разделены ||, а внутри каждой ячейки атрибут(ы) и значение разделены |.

{|
| Апельсин || Яблоко     || | 12,333.00
|-
| Хлеб || Пирог       || | 500.00
|-
| Масло || Мороженое || | 1.00
|}

Атрибуты для строк

Для строки тоже можно использовать атрибуты.

{|
| Апельсин
| Яблоко
|| 12,333.00
|-
| Хлеб
| Пирог
|| 500.00
|-
| Масло
| Мороженое
|| 1.00
|}

Атрибуты подписи и заголовков

Атрибуты можно добавлять в заголовки и названия как показано ниже.

{|
|+|''Комплект продуктов''
|-
! | Фрукты
! | Жиры
|-
|Апельсин
|Масло
|-
|Груша
|Пирог
|-
|Яблоко
|Мороженое 
|}

Простая граница таблицы в 1 пиксель

Пример однопиксельной табличной границы:

{| border="1"
| Апельсин
| Яблоко
|-
| Хлеб
| Пирог
|}

Ширина границы

Если у атрибута «border-width:» только одно число, он применяется ко всем четырем сторонам границы:

{|style="border-style: solid; border-width: 20px"
|
Привет
|}

Если у атрибута «border-width:» более одного числа, то четыре цифры соответствуют сверху, справа, снизу, слева (ЗАПОМНИТЕ этот порядок ↑→↓←):

{|style="border-style: solid; border-width: 10px 20px 100px 0"
|
Привет
|}

Когда значений меньше 4х, то значение для левой границы соответствует значению для правой, значение для нижней границы соответствует значению для верхней, а значение для правой границы соответствует значению для верхней.

• три значения, то есть top, right, bottom: тогда значением по умолчанию для left является значение right (второе значение). Для Width то же самое слева и справа.
• два значения, то есть top, right: тогда значением по умолчанию для bottom является значение top (первое значение), а для left по умолчанию присваивается значение right (второе значение). Ширина сверху такая же, как и снизу; Ширина слева такая же, как справа.
• одно значение, то есть top: тогда значением по умолчанию для right является значение top, и оно одинаково для bottom и left. Четвертая ширина одинакова и строит правильную границу. Это самый короткий вариант.

Другой метод задать ширину четырёх сторон ячейки — использовать атрибуты «border-left», «border-right», «border-top» и «border-bottom»:

{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" 
|
Привет
|}

• HTML атрибуты (такие как «width=», «border=», «cellspacing=», «cellpadding=») не нуждаются в указании значений единиц (здесь предполагаются пиксели).

Они также недействительны в HTML 5.

«Cellpadding» предназначен для установки пространства между стенкой ячейки и содержимым ячейки.^[2]

Свойства стиля CSS (которые отменяет действия атрибутов HTML) требуют явную единицу длины (если значение не равно нулю), например «px» для пикселя.

С HTML атрибутами и стилями CSS

Атрибуты стиля CSS можно использовать вместе с другими HTML атрибутами или отдельно.

{| cellpadding="10"
|Апельсин
|Яблоко
|-
|Хлеб
|Пирог
|-
|Масло
|Мороженое 
|}

Padding

{|class=wikitable 
| | Пример
|-
| | Пример<br/><br/>Укажите отступ для '''КАЖДОЙ ЯЧЕЙКИ'''
|-
| | Пример
|}

Ширина столбца

Ширину столбца можно задать следующим образом:

Вы вводите:

{|
| colspan="2" | Ширина этого столбца составляет 85% ширины экрана
|-
|| '''Этот столбец составляет 30% из 85% ширины экрана'''
|| '''Этот столбец составляет 70% от 85% ширины экрана'''
|}

Вы получаете:

Доступность ячеек шапки таблицы

Ячейки шапки таблицы явно не указывают к каким данным ячейки таблицы они применяются (к тем, что справа от них на той же строке; или к тем, что снизу в том же столбце).
Когда таблица прорисовывается в визуальном 2D окружении, то при этом обычно легко сделать выводы.

Однако, когда таблицы воспроизводятся на невизуальных медиа, вы можете помочь браузеру определить, к какой ячейки шапки таблицы применяется описание любой выделенной ячейки (для того, чтобы повторить её содержание с каким-нибудь помощником), использовав атрибуты scope=»row» или scope=»col» на ячейках шапки таблицы.
В большинстве случаев с простыми таблицами вы будете использовать scope="col" на всех ячейках заголовка первой строки, и scope="row" на первой ячейке следующих строк:

{|
|-
! scope="col"| Предмет
! scope="col"| Количество
! scope="col"| Стоимость
|-
! scope="row"| Хлеб
| 0.3 kg
| $0.65
|-
! scope="row"| Масло
| 0.125 kg
| $1.25
|-
! scope="row" colspan="2"| Всего
| $1.90
|}

Выравнивание

Выравнивание таблицы

Выравнивание таблицы достигается с использованием CSS.
Выравнивание таблицы контролируется с помощью полей.
Фиксированное поле на одной стороне сделает таблицу выравненной по этой стороне, если на противоположной стороне поле задано как auto.
Чтобы выравнять таблицу по центру, следует выставить оба поля на auto.

Для примера, таблица с выравниванием по правому краю:

{|
| Апельсин
| Яблоко
|-
| Хлеб
| Пирог
|-
| Масло
| Мороженое 
|}

И таблица с выравниванием по центру:

{|
| Апельсин
| Яблоко
|-
| Хлеб
| Пирог
|-
| Масло
| Мороженое 
|}

Обтекание таблицы текстом

Если таблица выравнивается по правой или левой стороне страницы, текст, что идёт после таблицы, начинается в конце этой таблицы, оставляя пустое пространство вокруг таблицы.
Вы можете сделать так, чтобы текст обтекал вокруг таблицы, заставляя таблицу как бы плавать вокруг текста, вместо простого её выравнивания.
Это достигается за счёт использования CSS атрибута float, который может указать, где таблица будет иметь обтекание с левой или правой стороны.
При использовании float, поля (margin) не управляют выравниванием таблицы и могут использоваться для указания расстояния между таблицей и окружающим текстом.

{|
| Апельсин
| Яблоко
|-
| Хлеб
| Пирог
|-
| Масло
| Мороженое 
|}

Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea 
commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, 
vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.

Выравнивание содержимого ячейки

Выравнивание содержимого ячейки может управляться двумя разными CSS-свойствами: text-align и vertical-align.
text-align можно указать в таблице, строке или отдельных ячейках, тогда как vertical-align можно задать только отдельным строкам или ячейкам.

{|
|-
| | A
| | B
| | C
|-
| | D
| | E
| | F
|-
| | G
| | H
| | I
|}

Предостережения

Отрицательные числа

Если ячейка начинается с новой строки с отрицательного числа со знаком минус (или параметра, который оценивается как отрицательное число), это может поломать таблицу, потому что символы |- воспринимаются вики как начало новой строки в таблице, а не новой ячейки.
Чтобы избежать такой проблемы, ставьте пробел перед минусом (| -6) или воспользуйтесь внутристроковой разметкой ячейки (||-6).

CSS по сравнению с атрибутами

Границы таблицы, указанные через CSS, а не атрибутами границы, будут воспроизводиться некорректно в небольшом подмножестве текстовых браузеров.

Общие атрибуты столбцов, групп столбцов и групп строк

Синтаксис Медиавики для таблиц на данный момент не предлагает поддержку общих атрибутов столбцов (тег HTML ‎<col />), групп столбцов (HTML тег ‎<colgroup>‎</colgroup>) и групп строк (HTML теги ‎<thead>‎</thead>, ‎<tbody>‎</tbody> и ‎<tfoot>‎</tfoot>).
Указанные стандартные элементы HTML не принимаются даже с использованием синтаксиса HTML или XHTML.

Все строки и ячейки (шапки или данных) таблицы воспроизводятся внутри одной скрытой группе строк (HTML элемент <tbody></tbody>) без каких-либо атрибутов или стилей.

Таблицы и Визуальный Редактор (ВР)

Смотрите также: Справка:Визуальный редактор/Руководство пользователя

Смотрите Phab: T108245: «Fully support basic table editing in the visual editor»
Смотрите список задач. Завершенные задачи поражены. Там может быть трудно понять из-за технического языка, что именно было улучшено, или какие функции были добавлены. Пожалуйста, добавьте пояснительную информацию ниже.

Теперь можно перемещать или удалять столбцы и строки

Нажмите на заголовок столбца или строки.
Затем нажмите на стрелку.
Во всплывающем меню нажмите Cместить или Удалить.

Вставлять пустую строку или столбец

В том же всплывающем меню нажмите Вставить.

Копировать таблицу с веб-страницы в Визуальный Редактор

Можно скопировать и вставить таблицу с веб-страницы непосредственно в Визуальный Редактор (ВР).
Чтобы сделать это безопасно, используйте песочницу и проверьте таблицу на предмет правильного кодирования в режиме источника викитекста и правильного отображения в визуальном редакторе и в режиме предварительного просмотра.

Смотрите также

Примечания

1. ↑
   Таблица может быть создана как с использованием непосредственно табличных XHTML-элементов, так и с использованием вики-форматирования.
   Создание таблиц с использованием XHTML-элементов хорошо описано на различных веб-страницах и не будет здесь рассматриваться.
   Преимущество вики-кода для разметки таблиц состоит в использовании специальных буквенных символов, что позволяет легче представлять структуру таблицы по сравнению с XHTML-разметкой.
2. ↑ HTML table cellpadding Attribute

33. Таблицы · Неожиданный HTML

В HTML5 мы не должны использовать таблицы для чего-то отличного от табличных данных. Тем не менее мы можем добавлять в блоки табличные свойства, что является нормальной практикой. Всё это заставляет разобраться нас в том, как работают таблицы.

Рассмотрим простейшую таблицу с одной строчкой и трема ячейками.

<table>
<tr>
    <td>Первая ячейка</td>
    <td>Вторая ячейка</td>
    <td>Третья ячейка</td>
</tr>
</table>

За таблицу в целом отвечает тег <table> . Далее мы строим таблицу по строкам. За строку или ряд отвечает тег tr (table row). Внутри рядка мы можем добавлять ячейки, тег td.

атрибуты rowspan, colspan

Но иногда нам нужно сделать таблицу с более сложной структурой. Допустим мы хотим сделать следующую таблицу

Для этого нам понадобится такой атрибут как rowspan. rowspan=2 означает, что ячейка вместо одно рядка будет занимать два, т.е. свой и тот что снизу от нее. Ячейка, на которое происходит распространение из html-кода таблицы убирается.

<table>
<tr>
    <td rowspan=2>
    
    </td>

    <td>
    
    </td>
</tr>

<tr>
    <td>
    
    </td>
</tr>
</table>

border-collapse

По умолчанию границы ячеек и таблицы разделены, ячейки так же разделены, но мы можем это исправить с помощью свойства border-collapse.

border-collapse:collapse — объединение границ ячеек и таблицы

border-collapse:separate — границы ячеек и таблицы разделяются

border-spacing

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

border-collapse: separate;
border-spacing: 15px;

Использование свойства display

Верстка таблицами — это очень, очень плохой тон, но никто не запрещает использовать нам display:table и table-cell для DIV’ов

display:table;
display:table-column;
display:table-cell;

Выравнивание нескольких строк по вертикали

Что нам это дает? В DIV’е c display:table-cell — начинает таки да работать выравнивание по вертикали vertical-align:middle. Таким образом, мы можем выровнять многострочный текст.

Резиновые колонки с фиксированными полями

1. http://colintoh.com/blog/display-table-anti-hero

2. In Search of the Holy Grail

3. http://www.mattboldt.com/kicking-ass-with-display-table/

4. Проблемы с длинными словами в таблицах
   https://css-tricks.com/fixing-tables-long-strings/

Верстка писем

1. Основы верстки писем
   https://habrahabr.ru/post/180013/

2. Проблемы с версткой писем
   https://spark.ru/startup/yorb/blog/30074/html-pisma-kak-ne-popastsya-na-obeschaniya-i-bistro-proverit-verstalschika

3. 60 полезных ресурсов по емейл рассылкам
   https://habrahabr.ru/company/pechkin/blog/273677

4. Примеры писем с оригинальным оформлением
   http://reallygoodemails.com/

Практика:

1. Сделать выравнивание многострочного текста по вертикали
2. Сделать таблицу — вверху хедер и три колонки под ним
4. Есть несколько строчек текста внутри div’a. Нужно выровнять их внутри блоков по центру по вертикали и горизонтали.
5. Сделать колонки с фиксированными отступами между ними. Весь шаблон должен быть резиновым.
6. Сделать резиновое меню. Меню растягивается на всю ширину. Отступы между всеми пунктами меню одинаковые.
7. Делаем трехблочный шаблон — резиновый контент и два сайдбара по бокам.

Таблицы

Таблицы

1. Основные понятия
2. Атрибуты тегов таблицы
3. Использование таблицы как способа расположения
   элементов на странице

Таблицы — это основное средство управления размещением объектов на странице.
Основные теги таблицы:

• table. Этот тег определяет начало таблицы внутри
  документа.
• tr. Этот тег строки таблицы (table row),
  он определяет строки, идущие слева направо в горизонтальном направлении.
• td. Этот тег данных таблицы (table data)
  определяет отдельные ячейки. Тег ячейки таблицы и информация, содержащаяся в нем,
  определяют структуру таблицы по столбцам.

Cовет

Весь текст и графика помещаются внутри тегов td.

Пример простой таблицы

 
Возврат в начало страницы
   
Возврат на главную страницу сайта


Среди атрибутов тегов таблиц можно назвать следующие:

• align=x. Выравнивание таблицы на странице определяется значением этого атрибута
  В качестве x должно стоять left или right.
  Так как поумолчанию в броузерах производится выравнивание по левому краю, а для выравнивания таблиц
  по центру обычно используются другие теги, то единственно эффективное использование этого атрибута относится к
  случаю, когда вы хотите сместить всю таблицу к правому краю окна броузера.
• border=x. Переменная x должна быть заменена числовым значением от 0 и более.
  Это значение определяет ширину видимой рамки вокруг таблицы. При создании макетов страниц
  x обычно будет задаваться равным 0.

Cовет

Хотите увидеть, как таблица управляет макетом страницы? Задайте значение
рамки равным 1, и тогда ячейки и строки
таблицы будут представлены в виде сетки.

• cellspacing=x. Этот атрибут определяет интервал между отдельными ячейками
  таблицы (другими словами между видимыми столбцами). Параметр x должен принимать значения,
  большие ли равные 0. Это поможет получить пустое пространство между элементами,
  помещенными внутри ячеек.
• cellpadding=x. Этот атрибут определяет расстояние от границ ячейки до помещенных
  в нее объектов. Он также используется для создания пустого пространства внутри каждой ячейки.

Cовет

Еще один способ изменения интервалов в таблице — эта вставка графической прокладки в тег TD. Эти
«прокладки» являются прозрачными файлами GIF размером 1х1 пиксель, которые ручную растягиваются
по ширине и высоте.

• width=%x или width=x Чтобы задать ширину таблицы, вы можете указать
  либо число, соответствующее доле в процентах от общей ширины окна броузера, либо конкретное
  значение, которое будет обозначать конкретную ширину в пикселях.
  Выбор ширины таблицы чрезвычайно важен. Превышение максимума ширины в 595 пикселей может
  привести к тому, что при разрешении 640х480 страницу придется пролистывать горизонтально.

Cовет

Если вы хотите выровнять таблицу по центру страницы, то можно использовать тег div
вместе с атрибутом выравнивания типа <div align=center>. Открывающийся тег и атрибут
помещаются перед таблицей; после того, как вы закончите ввод таблицы, введите закрывающий
тег </div>.

 
Возврат в начало страницы
  
Возврат на главную страницу сайта

Пример таблицы с атрибутами align, border, cellspacing, cellpadding,
width

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

• align=x Переменная x может иметь значения left,
  right или middle. Когда вы используете атрибут внутри ячейки таблицы,
  содержимое ячейки выравнивается в соответствии с атрибутом.

Пример таблицы с атрибутами выравнивания в ячейках

• valign=x X принимает значения top,
  middle или bottom. При вертикальном выравнивании содержимое ячейки
  располагается в верхней части, нижней части или посередине ячейки.

Пример таблицы с атрибутами выравнивания valign=x в ячейках

В этом примере первая ячейка таблицы в первой строке и первая ячейка таблицы
во второй строке вертикально выравнены по верхнему краю. Вторая ячейка таблицы
в первой сторке вертикально выравнена по середине, а вторая ячейка таблицы во
второй строке выровнена по нижнему краю.

• colspan=x Здесь x это число столбцов, атрибут colspan заставляет текущую ячейку занимать несколько столбцов по ширине.

 
Возврат в начало страницы
  
Возврат на главную страницу сайта

Пример таблицы с атрибутом colspan в ячейках

• rowspan=x Здесь x это число строк, атрибут rowspan заставляет текущую ячейку занимать несколько строк по высоте.

 
Возврат в начало страницы
  
Возврат на главную страницу сайта

Пример таблицы с атрибутом rowspan

Использование атрибутов colspan и rowspan предоставляет
прекрасные возможности для размещения объектов на Web-странице, в
частности разрешает верстку в несколько колонок.

Cовет

Попробуйте вставить в таблицу графику с помощью тега <img src>.
Именно так постороены макеты большинства Web-страниц.

Например:

Иногда вам надо оставить какую-либо ячейку таблицу пустой. Не следует
использовать в этом случае комбинацию:

<td></td>

К сожалению, многие броузеры «чудят» с пустыми ячеками. Поэтому,
для создания пустой ячейки воспользуйтесь специальным зарезервированным
символом неhазрывного пустого пространства &nbsp
(подробнее — см.здесь), а именно:

<td>&nbsp;</td>

Да, мы чуть не забыли о таких важных элементах создания таблицы, как
заголовок таблицы — тег <caption> и тег и заголовков
столбцов таблицы <th>. Например,

Это записано в HTML-документе так:

 <CENTER>
<TABLE cellSpacing=1 cellPadding=8>
<caption align="top"><b>Краткий список зарезервированных символов</b>
</caption> 
  <TBODY>
  <TR align=middle>
    <TH>Наименование</TH>
    <TH>Значение</TH>
    <TH>Пример</TH></TR>
  <TR align=middle>
    <TD>Меньше чем</TD>
    <TD>&lt;</TD>
    <TD><</TD></TR>
  <TR align=middle>
    <TD>Больше чем</TD>
    <TD>&gt;</TD>
    <TD>></TD></TR>
  <TR align=middleм
    <TD>Амперсанд</TD>
    <TD>&amp;</TD>
    <TD>&</TD></TR>
  <TR align=middle>
    <TD>неразрывный пробел</TD>
    <TD>&nbsp;</TD>
    <TD> </TD></TR>
     <TR align=middle>
    <TD>кавычки</TD>
    <TD>&quot;</TD>
    <TD>"</TD></TR></TBODY></TABLE></CENTER>
 
 

Вы заметили, здесь использована комбинация

<td>&nbsp;</td>

для создания пустой ячейки таблицы?

Атрибут тега <caption >align=»top» означает, что
заголовок надо поместить до («вверху») таблицы. Другое значение атрибута
align=bottom. Тогда заголовок будет располагаться под таблицей.

Удобно, не правда ли? Допустимыми значениями являются также left,
right.

А теперь воспользуемся знаниями о
каскадных таблицах стиля , и попробуем задать разные цвета в таблице
для заголовков столбцов и для «тела» самой таблицы.

table {
  margin-left: -4%;
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }

В данном случае использован встроенный стиль CSS.
Это трудоемко и нерационально. Так делать не надо!

Лучше воспользоваться внедренным стилем. Например, он используется для
таблиц на странице Форматирование текста.

Либо воспользоваться связанными таблицами стилей.

Если вы не хотите воспользоваться таким мощным инструментом, как
каскадные таблицы стилей, то в вашем распоряжении имеется такое простое
средство как атрибут bgcolor в тегах <td> и <th>.


Это «работает» практически во всех броузерах и не зависит от того,
поддерживает ли броузер пользователя работу с CSS. Как задаются
шестнадцатиричные коды для цветов подробно описано в документе
Форматирование текста

Это записано в HTML-документе так:

 <CENTER>
<TABLE cellSpacing=1 cellPadding=8>
<caption align="top"><b>Краткий список зарезервированных символов</b>
</caption> 
  <TBODY>
  <TR align=middle>
    <TH bgcolor="#CCCC99">Наименование</TH>
    <TH bgcolor="#CCCC99">Значение</TH>
    <TH bgcolor="#CCCC99">Пример</TH></TR>
  <TR align=middle>
    <TD bgcolor="#FFFF66">Меньше чем</TD>
    <TD bgcolor="#FFFF66">&lt;</TD>
    <TD bgcolor="#FFFF66"><</TD></TR>
  <TR align=middle>
    <TD bgcolor="#FFFF66">Больше чем</TD>
    <TD bgcolor="#FFFF66">&gt;</TD>
    <TD bgcolor="#FFFF66">></TD></TR>
  <TR align=middleм
    <TD bgcolor="#FFFF66">Амперсанд</TD>
    <TD bgcolor="#FFFF66">&amp;</TD>
    <TD bgcolor="#FFFF66">&</TD></TR>
  <TR align=middle>
    <TD bgcolor="#FFFF66">неразрывный пробел</TD>
    <TD bgcolor="#FFFF66">&nbsp;</TD>
    <TD bgcolor="#FFFF66"> </TD></TR>
     <TR align=middle>
    <TD bgcolor="#FFFF66">кавычки</TD>
    <TD bgcolor="#FFFF66">&quot;</TD>
    <TD bgcolor="#FFFF66">"</TD></TR></TBODY></TABLE></CENTER>
 
 

 
Возврат в начало страницы
  
Возврат на главную страницу сайта

Таблицы можно использовать просто как способ форматирования текста, так как таблица в HTML-документе может не содержать всех или некоторых разграничительных линий.
В этом случае в ячейки помещаются текст, текстовые ссылки, изображения, а некоторые ячейки остаются пустыми. Для задания нужного расстояния между элементами следует использовать атрибуты выравнивания.
Этот способ использования страниц позволяет экономить место и достаточно эффектно разместить публикуемый материал в окне броузера.

Пример использования таблицы как способа расположения элементов на
странице

 
Возврат в начало страницы
  
Возврат на главную страницу сайта
 
 

Урок 8. Таблицы в html

Таблица в html — один из основных и первых методов вёрстки web-страниц. До того, как CSS стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.

Теги, используемые для построения таблицы в html

table — обязательный тег, открывающий и закрывающий таблицу
caption — необязательный тег, обозначающий заголовок таблицы
th — необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr — обязательный тег, с которого открывается и закрывается строка
td — обязательный тег, обозначающий открытие и закрытие ячейки в строке

Пример кода простой таблицы

<html>

   <head>

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

   </head>

<body>
<table> <!-- обозначаем открытие таблицы -->
   <tr>  <!-- обозначаем начало первой строки -->

        <caption>Название таблицы</caption>

        <th>  <!-- обозначаем название первого столбца -->

            Стобец 1

        </th>  <!-- закрываем название первого столбца -->
        <th>  <!-- обозначаем название второго столбца -->

            Стобец 2

        </th>  <!-- закрываем название второго столбца -->
   </tr>  <!-- конец  первой строки -->
   <tr>  <!-- обозначаем начало второй строки -->

        <td>  <!-- обозначаем первую ячейку во второй строке -->

            Текст в первой ячейке

        </td>  <!-- закрываем первую ячейку во второй строке -->
        <td>  <!-- обозначаем вторую ячейку во второй строке -->

            Текст во второй ячейке

        </td>  <!-- закрываем вторую ячейку во второй строке -->

   </tr>  <!-- конец  второй строки -->
</table> <!-- закрываем таблицу -->
</body>

</html>

В браузере отобразится

Назначение таблиц в html

Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ, ширину, границу и другие параметры, что придаст ей красивый внешний вид. Таблица — Ваш первый шаг к понимаю web-дизайна! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) — было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой…

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

У тега table есть следующие атрибуты:

width — ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor — цвет фона ячеек таблицы
background — заливает фон таблицы рисунком
border — рамка и границы в таблице. Толщина указывается в пикселях
cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей

Как и ранее, значение атрибута прописываем в кавычках.

<table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей -->

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th) и зададим параметр атрибуту border (граница), width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

<html>

   <head>

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

   </head>

<body>
<table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей -->
   <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->   

        <td> 

            Стобец 1

        </td> 
        <td> 

            Стобец 2

        </td> 

   </tr> 
   <tr> 

        <td>

            Текст в первой ячейке первого столбца

        </td>
        <td> 

            Текст во второй ячейке второго столбца

        </td> 

   </tr>  
</table> 
</body>

</html>

В результате в браузере будет выведена таблица следующего вида

frame — атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:

void — рамки нет,

above — только верхняя рамка,

below — только нижняя рамка,

hsides — только верхняя и нижняя рамки,

vsides — только левая и правая рамки,

lhs — только левая рамка,

rhs — только правая рамка,

box — все четыре части рамки.

rules — атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:

none — между ячейками нет границ,

groups — границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),

rows — границы только между строками,

cols — границы только между стобцами,

all — отображать все границы.

Рассмотрим пример кода

<html>

   <head>

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

   </head>

<body>
<table border="1" width="300" frame="void" rules="rows"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей. Внешней рамки нет. Есть граница между строками -->
   <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->  

        <td> 

            Стобец 1

        </td> 
        <td>

            Стобец 2

        </td> 

   </tr> 
   <tr> 

        <td>

            Текст в первой ячейке первого столбца

        </td>
        <td> 

            Текст во второй ячейке второго столбца

        </td> 

   </tr>  
</table> 
</body>

</html>

Результат

Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице. Для этого есть следующие уже знакомые параметры:

align — выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing — расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)

Рассмотрим пример

<html>

   <head>

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

   </head>

<body>
<table width="400" align="center" cellspacing="5" cellpadding="10"> 

<!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей -->
   <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->

        <td> 

            Стобец 1

        </td> 
        <td> 

            Стобец 2

        </td> 

   </tr> 
   <tr> 

        <td>

            Текст в первой ячейке первого столбца

        </td>
        <td> 

            Текст во второй ячейке второго столбца

        </td> 

   </tr>  
</table> 
</body>

</html>

В браузере отобразится выравненная по центру таблица следующего вида

Строки tr и ячейки td в таблицах HTML

Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.

  <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->

<!-- цвет действителен для всех ячеек td -->

        <td> 

            Стобец 1

        </td> 
        <td> 

            Стобец 2

        </td> 

   </tr>

Для тегов tr и td есть следующие

align — выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign — выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor — задает цвет строки
width — ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height — высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

<html>

   <head>

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

   </head>

<body>
<table width="400" cellspacing="5" cellpadding="10"> 

<!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей -->
   <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->

        <td> 

            Стобец 1

        </td> 
        <td> 

            Стобец 2

        </td> 

   </tr> 
   <tr> 

        <td align="left">

            Текст в первой ячейке первого столбца

        </td>
        <td align="right"> 

            Текст во второй ячейке второго столбца

        </td> 

   </tr>  
</table> 
</body>

</html>

Результат

С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!)

Спасибо за внимание! Надеюсь материал был полезен!

Таблицы

Таблицы

Таблицы представляют взаимоотношения
между данными. Авторы специфицируют эти
взаимоотношения на языке
документа и их представление в CSS
двумя способами — визуально и звуком.

Авторы
могут специфицировать визуальное
форматирование таблицы как прямоугольной
сетки ячеек. Ряды и столбцы ячеек можно
организовать в группы рядов и столбцов.
Ряды, столбцы, группы рядов, группы столбцов
и ячейки могут иметь вокруг себя
порисованные рамки (в CSS2 есть две модели
рамок). Авторы могут выровнять данные в
ячейках по вертикали и по горизонтали и
выровнять данные во всех ячейках ряда или
столбца.

Авторы могут также
специфицировать звуковое представление
таблицы: то, как заголовки и данные будут
звучать. На языке документа авторы могут помечать
лэйблами ячейки и группы ячеек так, что при
звуковом отображении заголовки ячеек
будут произноситься перед данными ячеек.
Фактически это «сериализует» таблицу:
пользователи, прослушивающие таблицу,
услышат последовательность заголовков и
последующих данных.

Пример(ы):

Вот
простая таблица из трёх рядов и трёх
столбцов, написанная в HTML 4.0:

<TABLE>
<CAPTION>Это простая таблица 3x3</CAPTION>
<TR>
   <TH>Header 1      <TD>Cell 1        <TD>Cell 2
<TR>
   <TH>Header 2      <TD>Cell 3        <TD>Cell 4
<TR>
   <TH>Header 3      <TD>Cell 5        <TD>Cell 6
</TABLE>

Этот код создаёт одну таблицу (элемент TABLE),
три ряда (элементы TR), три заголовочных
ячейки (элементы TH) и шесть ячеек данных (элементы
TD). Обратите внимание, что три столбца в
этом примере специфицированы неявно: в
таблице столько столбцов, сколько
затребовано заголовочными ячейками и
ячейками данных.

Следующее правило CSS
центрирует текст по горизонтали в
заголовочных ячейках и выводит данные
шрифтом, имеющим вес bold:

TH { text-align: center; font-weight: bold }

Следующее правило выравнивает текст
заголовочных ячеек по их базовой линии и
центрирует текст по вертикали в каждой
ячейке данных:

TH { vertical-align: baseline }
TD { vertical-align: middle }

Следующие правила специфицируют, что верхний
ряд будет окружён сплошной голубой рамкой
толщиной 3px и каждый из других рядов будет
окружён сплошной чёрной рамкой толщиной 1px:

TABLE   { border-collapse: collapse }
TR#row1 { border-top: 3px solid blue }
TR#row2 { border-top: 1px solid black }
TR#row3 { border-top: 1px solid black }

Заметьте, однако, что рамки вокруг рядов
перекрываются там, где ряды смыкаются.
Какого цвета (чёрного или голубого) и
толщины (1px или 3px) будет рамка между рядами row1
и row2? Мы обсудим это в разделе о разрешении
конфликтов рамок.

Следующее правило помещает заголовок
таблицы над таблицей:

CAPTION { caption-side: top }

Наконец, следующее правило
специфицирует, что при звуковом выводе
каждый ряд данных произносится как «Заголовок,
Данные, Данные»:

TH { speak-header: once }

Например, первый ряд будет произнесён «Заголовок1
Ячейка1 Ячейка2».
С другой стороны, со следующим правилом:

TH { speak-header: always }

будет звучать «Заголовок1 Ячейка1
Заголовок1 Ячейка2».

Этот пример показал, как CSS работает с
элементами HTML 4.0; в HTML 4.0 семантика различных
элементов таблицы (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL,
COLGROUP, TH и TD) основательно проработана.
В других языка документов (таких как
приложения XML) может не быть
предопределённых элементов таблицы.
Поэтому CSS2 позволяет авторам «map/отображать» элементы
языка документа в элементы таблицы через
свойство ‘display’.
Например, следующее правило заставляет
элемент FOO работать как элемент TABLE в HTML, а
элемент BAR — как элемент CAPTION:

FOO { display : table }
BAR { display : table-caption }

Мы обсудим различные элементы таблицы в
следующем разделе. В данной спецификации
термин элемент таблицы относится
к любому элементу, участвующему в создании
таблицы. «Внутренний»
элемент таблицы это тот, который
производит ряд, группу рядов, столбец,
группу столбцов или ячейку.

Табличная модель CSS базируется на
табличной модели HTML 4.0, структура таблиц
которой почти параллельна визуальному
представлению. В данной модели таблица
состоит из необязательного заголовка и
любого числа рядов столбцов. О табличной
модели говорится, что в ней «ряды первичны»,
поскольку авторы явно специфицируют ряды, а
не столбцы, в языке документа. Столбцы
определяются после того, как будут
специфицированы все ряды — первая ячейка
каждого ряда принадлежит первому столбцу,
вторая — второму столбцу и т.д.). Ряды и
столбцы могут быть сгруппированы
структурно, и это группирование отражается
при представлении (например, рамка может
быть прорисована вокруг группы рядов).

Таким
образом, табличная модель состоит из таблиц,
заголовков, рядов, групп рядов, столбцов,
групп столбцов и ячеек.

Модель CSS не
требует, чтобы язык документа содержал
элементы, соответствующие каждому из этих
компонентов. Для языков документов (таких
как приложения XML), не имеющих
предопределённых табличных элементов,
авторы обязаны отображать элементы языка
документа в элементы таблицы; это делается
с помощью свойства ‘display’. Следующие
значения ‘display’
назначают семантику таблицы произвольному
элементу:

table (в HTML: TABLE)

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

inline-table (в
HTML: TABLE)

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

table-row (в HTML: TR)

Специфицирует, что элемент — это ряд ячеек.

table-row-group
(в HTML: TBODY)

Специфицирует, что элемент
группирует один или более рядов.

table-header-group
(в HTML: THEAD)

Похож на ‘table-row-group’, но для
визуального форматирования; группа рядов
всегда отображается до всех других рядов и
групп рядов и после любого верхнего
заголовка. Печатающие пользовательские
агенты (ПА) могут повторять ряды футера на
каждой странице, занимаемой таблицей.

table-footer-group
(в HTML: TFOOT)

Похож на ‘table-row-group’, но для визуального
форматирования; группа рядов всегда
отображается после всех других рядов и
групп рядов и перед любым нижним
заголовком. Печатающие ПА могут повторять
ряды футера на каждой странице, занимаемой
таблицей.

table-column (в
HTML: COL)

Специфицирует, что элемент описывает
столбец ячеек.

table-column-group
(в HTML: COLGROUP)

Специфицирует, что элемент группирует
один или более столбцов.

table-cell (в HTML:
TD, TH)

Специфицирует, что элемент представляет
ячейку таблицы.

table-caption (в
HTML: CAPTION)

Специфицирует заголовок таблицы.

Элементы с ‘display’,
установленным в ‘table-column’ или ‘table-column-group’, не
выводятся (в точности так, как если бы они
имели ‘display: none’), но используются, поскольку
могут иметь атрибуты, вводящие
определённый стиль для представляемых ими
столбцов.

Таблица стилей по умолчанию
для HTML 4.0
в приложении иллюстрирует использование
этих значений в HTML 4.0:

TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }

ПА могут игнорировать
эти значения свойства ‘display’ для документов HTML,
поскольку авторы не должны изменять
ожидаемое поведение элемента.

17.2.1 Анонимные объекты таблицы

Языки документов, кроме HTML, могут не иметь
всех элементов табличной модели CSS2. В
таких случаях «отсутствующие»
элементы обязаны учитываться, для того
чтобы табличная модель работала.
Отсутствующие элементы генерируют анонимные
объекты (например, анонимные боксы при
визуальном выводе таблицы) в соответствии
со следующими правилами:

1. Любой элемент таблицы автоматически будет
   генерировать вокруг себя необходимые
   объекты таблицы, состоящие не менее чем из
   трёх вложенных объектов, соответствующих
   элементу ‘table’/’inline-table’, элементу ‘table-row’ и
   элементу ‘table-cell’.

2. Если родительский P в ‘table-cell’ элемента T —
   не ‘table-row’, объект, соответствующий ‘table-row’,
   будет генерироваться между P и T. Этот
   объект будет занимать все
   последовательные родственные (смежные) ‘table-cell’
   (в дереве документа) в T.

3. Если родительский P в ‘table-row’ элемента T — не
   элемент ‘table’, ‘inline-table’ или ‘table-row-group’, объект,
   соответствующий элементу ‘table’, будет
   генерироваться между P и T. Этот объект
   будет занимать всех последовательных
   родственников (смежных) (в дереве
   документа) в T,  требующем ‘table’-родителя:
   ‘table-row’, ‘table-row-group’, ‘table-header-group’,
   ‘table-footer-group’, ‘table-column’, ‘table-column-group’ и ‘caption’.

4. Если родительский P в ‘table-row-group’ (или ‘table-header-group’,
   или ‘table-footer-group’) элемента T — не ‘table’ или ‘inline-table’,
   объект, соответствующий элементу ‘table’,
   будет генерироваться между P и T. Этот
   объект будет занимать всех
   последовательных родственников (смежных) (в
   дереве документа) в T,  требующем ‘table’-родителя: ‘table-row’,
   ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’,
   ‘table-column’, ‘table-column-group’, и ‘caption’.

5. Если дочерний T от ‘table-row’ элемента P — не
   элемент ‘table-cell’, объект, соответствующий
   элементу ‘table-cell’, будет генерироваться
   между P и T. Этот объект будет занимать всех
   последовательных родственников T, не
   являющихся элементами ‘table-cell’.

Пример(ы):

В этом примере XML принимается, что элемент ‘table’
содержит элемент HBOX:

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>

поскольку ассоциированная таблица стилей:

HBOX { display: table-row }
VBOX { display: table-cell }

Пример(ы):

В этом примере три элемента ‘table-cell’
содержат текст в  ROWs/рядах. Заметьте,
что текст далее инкапсулируется в
анонимные инлайн-боксы, как разъясняется в
модели визуального форматирования:

<STACK>
  <ROW>This is the <D>top</D> row.</ROW>
  <ROW>This is the <D>middle</D> row.</ROW>
  <ROW>This is the <D>bottom</D> row.</ROW>
</STACK>

Таблица стилей:

STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }

От ПА HTML не требуется создавать анонимные
объекты в соответствии с вышеприведёнными
правилами.

Ячейки таблиц могут принадлежать к двум
контекстам: рядам и столбцам. Однако в
документе-источнике ячейки являются
потомками рядов и никогда — столбцов.
Несмотря на это, некоторые аспекты ячеек
могут вводиться установкой свойств
столбцов.

Следующие свойства применяются
к элементам столбцов и групп столбцов:

‘border’

Различные свойства рамки применяются к
столбцам только тогда, когда ‘border-collapse’ в элементе таблицы
установлен в ‘collapse’. В таком случае, рамки,
установленные для столбца и группы
столбцов, являются источником алгоритма разрешения конфликтов,
который выбирает стили рамки для каждого
края ячейки.

‘background’

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

‘width’

Свойство ‘width’
задаёт минимальную ширину столбца.

‘visibility’

Если ‘visibility’ столбца установлено в ‘collapse’,
ни одна из ячеек столбца не отображается, и
ячейки, захватывающие другие столбцы,
усекаются. В дополнение к этому, ширина
таблицы уменьшается до ширины столбца,
содержащегося в ней. См. ниже Динамические эффекты.
Другие значения ‘visibility’ не оказывают
никакого действия.

Пример(ы):

Вот примеры некоторых правил таблиц
стилей, устанавливающих свойства столбцов.
Первые два правила вместе выполняют
атрибут «rules» HTML 4.0 со значением «cols».
Третье правило делает столбец «totals»
голубым, а последние два правила
показывают, как установить для столбца
фиксированный размер, используя фиксированный
алгоритм вывода.

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }

В терминах модели визуального
форматирования поведение таблицы может
быть похожим на элемент уровня блока или
замещаемый элемент инлайн-уровня. У таблиц
есть содержимое, заполнение, рамки и поля.

В
обоих случаях элемент таблицы генерирует анонимный бокс,
содержащий сам бокс таблицы и бокс
заголовка (если имеется). Боксы таблицы и
заголовка имеют каждый свои собственные
области содержимого, заполнения, полей,
рамки; и размеры прямоугольного анонимного
бокса являются наименьшими возможными для
вмещения обоих боксов.
Вертикальные поля сжимаются в тех местах,
где боксы таблицы и заголовка
соприкасаются. При любом перемещении
таблицы нужно перемещать весь анонимный
бокс, а не просто бокс таблицы, поскольку
вместе с ним перемещается и заголовок
таблицы.

   [D]

Диаграмма
таблицы с заголовком вверху; нижнее поле
заголовка сжато вместе с верхним полем
таблицы.

17.4.1 Позиция и выравнивание заголовка

‘caption-side’

Значение:	top | bottom | left | right | inherit
Начальное:	top
Применяется:	к элементам ‘table-caption’
Наследуется:	да
Процентное:	N/A
Носитель:	визуальный

Это свойство специфицирует позицию бокса
заголовка относительно бокса таблицы.
Значения имеют следующий смысл:

top

Позиционирует бокс заголовка над боксом
таблицы.

bottom

Позиционирует бокс заголовка под боксом
таблицы.

left

Позиционирует бокс заголовка слева от
бокса таблицы.

right

Позиционирует бокс заголовка справа от
бокса таблицы.

Заголовки сверху или снизу от элемента ‘table’
форматируются совершенно так же, как если
бы они были элементами блока до и после
таблицы, за исключением того, что
(1) они наследуют наследуемые свойства
таблицы и (2) они не рассматриваются как бокс
блока для целей элементов
‘compact’ или ‘run-in’, которые могут
предшествовать таблице.

Заголовок сверху
или снизу от бокса таблицы ведёт себя
подобно боксу блока и при расчётах ширины;
ширина вычисляется относительно ширины
бокса таблицы содержащего блока.

Для
заголовков слева или справа от бокса
таблицы значение, отличное от ‘auto’ для ‘width’, устанавливает ширину явно,
но ‘auto’ сообщает ПА, что нужно выбрать «приемлемую
ширину». Она может варьироваться от «самого
узкого возможного бокса» до «строки»,
поэтому мы рекомендуем, чтобы пользователи
не специфицировали ‘auto’ для ширины левых и
правых заголовков.

Чтобы выровнять
содержимое заголовка по горизонтали внутри
бокса заголовка, используйте свойство ‘text-align’.
Для вертикального выравнивания левых и
правых боксов заголовка относительно бокса
таблицы используйте свойство ‘vertical-align’. В этом
случае возможны только значения ‘top’, ‘middle’ и ‘bottom’.
Все другие значения рассматриваются как ‘top’.

Пример(ы):

Здесь свойство ‘caption-side’ размещает
заголовок под таблицей. Заголовок будет
той же ширины, что и родитель таблицы, и
текст заголовка будет выровнен по левому
краю.

CAPTION { caption-side: bottom; 
          width: auto;
          text-align: left }

Пример(ы):

В этом примере показано, как разместить
заголовок в левом поле. Сама таблица
центрирована установкой левого и правого
полей в ‘auto’, а весь бокс с таблицей и
заголовком сдвинут в левое поле на ту же
величину, что и ширина заголовка.

BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}

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

   [D]

Диаграмма
показывает центрированную таблицу с
заголовком, растянутую в левое поле как
результат негативного значения свойства ‘margin-left’.

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

Визуальное представление этих
боксов управляется прямоугольной
нерегулярной сеткой из рядов и столбцов.
Каждый бокс занимает целое число ячеек
сетки, определяемое в соответствии с
нижеследующими правилами. Эти правила не
применяются к HTML 4.0 или более ранним версиям HTML;
HTML имеет свои собственные ограничения на
охват рядов и столбцов.

1. Каждый бокс ряда занимает один ряд ячеек
   сетки. Все вместе боксы рядов заполняют
   таблицу сверху вниз в том порядке, в
   котором они появляются в документе-источнике (т.е.
   таблица занимает ровно столько рядов
   сетки, сколько имеется элементов рядов).

2. Группа рядов занимает те же ячейки, что и
   составляющие её ряды.

3. Бокс столбца занимает один или более
   столбцов сетки. Боксы столбцов
   размещаются друг за другом в том порядке, в
   котором они вводятся. Бокс первого столбца
   может находиться слева или справа, в
   зависимости от значения свойства ‘direction’
   таблицы.

4. Бокс группы столбцов занимает те же
   ячейки сетки, что и содержащиеся в нём
   столбцы.

5. Ячейки могут захватывать несколько рядов
   и столбцов. (Хотя CSS2 не определяет, как
   вычисляется количество захваченных рядов
   или столбцов, ПА может иметь специальные
   сведения о документе-источнике; будущая
   версия CSS может предоставить способ выражения
   этих сведений в синтаксисе CSS.) Каждая
   ячейка, следовательно, это прямоугольный
   бокс шириной и высотой в одну или более
   ячеек сетки. Верхний ряд этого
   прямоугольника находится в ряду,
   специфицированном родителем ячейки.
   Прямоугольник обязан находиться как можно
   левее, но не может перекрывать любой
   другой бокс ячейки и обязан находиться
   справа от всех ячеек в том же ряду,
   определённых ранее в документе-источнике.
   (Это ограничение остаётся в силе, если
   свойство ‘direction’ таблицы — ‘ltr’; если же ‘direction’ — ‘rtl’, «лево»
   и «право» в предыдущем предложении
   меняются местами.)

6. Бокс ячейки не может продолжаться за
   пределы бокса последнего ряда или группы
   рядов таблицы; ПА обязан уменьшить его (бокс
   ячейки) до вмещения.

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

Вот два примера. Первый — документ HTML:

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>

<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

Вторая таблица сформатирована, как на
правом рисунке. Однако представление
таблицы HTML явно не определено HTML, и CSS не
пытается определить его. ПА свободны в том,
как отобразить её, например, как на левом
рисунке.

   [D]

Слева —
возможное представление ошибочной таблицы HTML 4.0;
справа — единственно возможное
форматирование такой же не-HTML таблицы.

17.5.1 Слои и прозрачность таблицы

Для того, чтобы найти фон для каждой
ячейки таблицы, различные элементы таблицы
можно представить себе как состоящие из
шести накладывающихся слоёв. Фон,
установленный в элементе, это один из слоёв,
который будет виден, только если слои над
ним имеют прозрачный фон.

   [D]

Схема слоёв таблицы.

1. Самый нижний слой — цельный,
   представляющий весь бокс таблицы. Подобно
   другим боксам, он может быть прозрачным.

2. Следующий слой содержит группы столбцов.
   Группы столбцов — такой же высоты, как и
   таблица, но они не должны перекрывать всю
   таблицу по горизонтали.

3. Сверху над группами столбцов находятся
   области, представляющие боксы столбцов. Как
   и группы столбцов, столбцы — такой же высоты,
   как и таблица, но они не должны перекрывать
   всю таблицу по горизонтали.

4. Следом идёт слой групп рядов. Каждая
   группа рядов — такой же ширины, как таблица.
   Все вместе группы рядов полностью
   перекрывают таблицу сверху вниз.

5. Предпоследний слой содержит ряды. Ряды
   также покрывают всю таблицу.

6. Самый верхний слой содержит ячейки. Как
   показано на рисунке, хотя все ряды имеют
   одинаковое количество ячеек, не каждая
   ячейка может иметь специфицированное
   содержимое. Эти «пустые» ячейки
   прозрачны, что позволят нижележащим слоям
   просвечивать.

В следующем примере первый ряд содержит 4
ячейки, но второй ряд не содержит ячеек, и,
таким образом, виден фон таблицы, исключая
те места, где ячейка первого ряда
захватывает и этот ряд. Следующий код HTML и
правила стилей —

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
    <TABLE>
      <TR>
        <TD> 1 
        <TD rowspan="2"> 2
        <TD> 3 
        <TD> 4 
      </TR>
      <TR><TD></TD></TR>
    </TABLE> 
  </BODY>
</HTML>

может быть сформатирован так:

   [D]

Таблица с тремя пустыми
ячейками в нижнем ряду.

17.5.2  Алгоритмы ширины
таблицы: свойство  ‘table-layout’

CSS не определяет «оптимальный» вид
таблицы, поскольку во многих случаях это
дело вкуса. CSS не определяет ограничения
того, как ПА обязан выводить таблицу. ПА
могут использовать любой возможный
алгоритм и свободны предпочесть скорость точности
отображения, если только не выбран «алгоритм
фиксированного вывода «.

‘table-layout’

Значение:	auto | fixed | inherit
Начальное:	auto
Применяется:	к элементам ‘table’ и ‘inline-table’
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Свойство ‘table-layout’
контролирует алгоритм, используемый для
вывода ячеек, рядов и столбцов таблицы.
Значения имеют следующий смысл:

fixed

Алгоритм фиксированного вывода таблицы;

auto

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

Эти два алгоритма описаны ниже.

Алгоритм фиксированного
вывода

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

Ширина таблицы может быть
специфицирована явно свойством ‘width’. Значение ‘auto’ (и для ‘display: table’,
и для ‘display: inline-table’) означает использование
алгоритма автоматического вывода таблицы.

В
алгоритме фиксированного вывода ширина
каждого столбца определяется так:

1. Элемент столбца со значением свойства ‘width’,
   отличным от ‘auto’, устанавливает ширину
   этого столбца.

2. Иначе, ячейка в первом ряду со значением
   свойства ‘width’,
   отличным от ‘auto’, устанавливает ширину
   этого столбца. Если ячейка занимает более
   одного столбца, ширина разделяется на эти
   столбцы.

3. Любые оставшиеся столбцы равномерно
   разделяют оставшееся горизонтальное
   пространство таблицы (минус рамки и
   заполнение ячеек).

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

При таком
методе ПА может начать вывод таблицы сразу,
как только будет получен весь первый ряд.
Ячейки в последующих рядах не влияют на
ширину таблицы. Любая ячейка, имеющая
переполняющее содержимое, использует
свойство ‘overflow’
для определения того, сжимать ли
переполняющее содержимое.

Автоматический вывод таблицы

В этом алгоритме (требующем обычно не
более двух шагов), ширина таблицы
определяется шириной её столбцов (и
промежуточных рамок). Этот
алгоритм отражает поведение некоторых
популярных ПА HTML на момент написания данной
спецификации. От ПА не требуется выполнять
этот алгоритм для определения структуры
таблицы в случае, если ‘table-layout’ — ‘auto’. Они
могут использовать любой другой алгоритм.

Этого
алгоритма может оказаться недостаточно,
поскольку он требует, чтобы ПА имел доступ
ко всему содержимому таблицы до
определения окончательной структуры, и
может потребовать более одного шага.

Ширина столбцов определяется так:

1. Вычисляется минимальная ширина
   содержимого (MCW) каждой ячейки:
   форматированное содержимое может
   занимать любое количество строк, но не
   может переполнять бокс ячейки. Если
   специфицированная ‘width’ (W)
   ячейки больше, чем MCW, W является
   минимальной шириной ячейки. Значение ‘auto’
   указывает, что MCW это минимальная ширина
   ячейки.

   Так же вычисляется «максимальная»
   ширина каждой ячейки: затем содержимое
   форматируется без разрывов строк, за
   исключением тех разрывов строк, которые указаны
   явно.

2. Для каждого столбца определяется
   максимальная и минимальная ширина столбца
   из тех ячеек, которые занимают только этот
   столбец. Минимум — это та ширина, которая требуется
   для ячейки с самой большой минимальной

   шириной (или ‘width’ столбца, в зависимости от
   того, что больше). Максимум — это
   максимальная ширина, которая требуется
   для ячейки с самой большой максимальной
   шириной  (или ‘width’ столбца, в зависимости от
   того, что больше).

3. Для каждой ячейки, занимающей более
   одного столбца, увеличивается минимальная
   ширина тех столбцов, которые она
   захватывает, так что вместе они не уже, чем
   ячейка. То же самое делается и для
   максимальной ширины. Если возможно,
   расширяются все захваченные ряды на
   приблизительно то же значение.

Это задаёт максимальную и минимальную
ширину каждого столбца. Ширина столбцов
влияет на окончательную ширину таблицы так:

1. Если свойство ‘width’ элементов ‘table’ или ‘inline-table’
   имеет специфицированное значение (W),
   отличное от ‘auto’, вычисленное значение
   свойства будет больше W и минимальной
   ширины, требующейся для всех столбцов плюс
   заполнение и рамки ячеек (MIN). Если W больше,
   чем MIN, излишняя ширина должна быть
   распределена между столбцами.

2. Если элементы ‘table’ или ‘inline-table’ имеют ‘width: auto’,
   вычисленная ширина таблицы будет больше
   ширины самого большого из содержащих
   блоков таблицы и MIN. Однако, если
   максимальная ширина, требуемая для
   столбцов плюс заполнение ячеек или рамки (MAX) меньше, чем ширина содержащего
   блока, используется MAX.

Процентные значения ширины столбца
являются относительными к ширине таблицы.
Если таблица имеет ‘width: auto’, проценты дают
ограничение ширины столбца, которое ПА
должен попытаться выдержать. (Очевидно, это
не всегда возможно: если ширина столбца ‘110%’,
ограничение не может быть выполнено.)

Примечание. В этом алгоритме
ряды (и группы рядов) и столбцы (и группы
столбцов) ограничивают и сами ограничены
размерами содержащихся в них ячеек.
Установка ширины столбца может неявно влиять
на высоту ряда, и наоборот.

17.5.3 Алгоритмы высоты таблицы

Высота таблицы задаётся свойством ‘height’ элемента ‘table’ или ‘inline-table’.
Значение ‘auto’ устанавливает, что высота
является суммой высоты рядов плюс
заполнение ячеек или рамки. Любые другие
значения специфицируют высоту явно;
таблица, таким образом, может быть выше или
короче, чем высота её рядов. CSS2 не
специфицирует вывод в тех случаях, когда специфицированная
высота таблицы отличается от высоты
содержимого, особенно когда высота
содержимого может перекрыть
специфицированную высоту; или как излишнее
пространство должно распределиться между
рядами для заполнения высоты таблицы; или,
если высота содержимого превосходит
специфицированную высоту таблицы, должен
ли ПА предоставить механизм прокрутки. 

Примечание. Будущие версии CSS
могут специфицировать это.

Высота бокса элемента ‘table-row’ вычисляется
однократно сразу после получения ПАгентом
всех ячеек ряда: это максимальная
специфицированная рядом  ‘height’
и минимальная высота (MIN), затребованная
ячейками. Значение ‘height’  —  ‘auto’ для
‘table-row’ означает, что вычисленная высота
ряда — MIN. MIN зависит от высоты боксов ячеек и
выравнивания бокса ячейки (очень походит на
вычисление высоты строчного бокса). CSS2 не
определяет, к чему относятся процентные
значения ‘height’, специфицированные для
рядов и групп рядов таблицы.

В CSS2 высота
бокса ячейки — это максимальное из свойств ‘height’
ячеек таблицы и минимальная высота,
требуемая содержимым (MIN). Значение ‘auto’ для ‘height’
подразумевает вычисленное значение MIN. CSS2
не определяет, к чему относятся процентные
значения ‘height’, когда они определены для
ячеек таблицы.

CSS2 не специфицирует, как
ячейки, захватывающие более одного ряда,
влияют на вычисление высоты рядов, за
исключением того, что суммарная высота
рядов обязана быть достаточно большой,
чтобы окружить ячейку, захватывающую ряды.

Свойство
‘vertical-align’
каждой ячейки таблицы определяет её
выравнивание в ряду. Содержимое каждой
ячейки имеет baseline/базовую линию, top/верх,
middle/середину и bottom/низ, как и сам ряд.
В контексте таблиц значения ‘vertical-align’ имеют
следующий смысл:

baseline

Базовая линия ячейки помещена на той же
высоте, что и базовая линия первого из
рядов, которые она захватывает (см. ниже
определение базовой линии ячейки и ряда).

top

Верх бокса ячейки выровнен с верхом первого
из рядов, которые она захватывает.

bottom

Низ бокса ячейки выровнен с низом
последнего из рядов, которые она
захватывает.

middle

Центр ячейки выровнен с центром рядов,
которые она захватывает.

sub, super, text-top, text-bottom

Эти значения не применяются к ячейкам;
вместо этого ячейка выравнивается по
базовой линии.

Базовая линия ячейки это базовая линия
первого строчного бокса
в ячейке. Если никакого текста нет, базовая
линия — это базовая линия какого-либо объекта,
отображаемого в ячейке или, если такого
объекта нет, — низ бокса ячейки.
Максимальное расстояние между верхом бокса
ячейки и базовой линией всех ячеек,
имеющих
‘vertical-align: baseline’, используется для установки
базовой линии ряда. Вот пример:

   [D]

Диаграмма
показывает действие различных значений ‘vertical-align’
в ячейках таблицы.

Боксы ячеек 1 и 2 выровнены по их базовым
линиям. Бокс ячейки 2 имеет бóльшую высоту
относительно базовой линии и поэтому
определяет базовую линию ряда. Заметьте,
что если нет ни одного бокса ячейки,
выровненного по базовой линии, у ряда не
будет (не нужна) базовой линии.

Чтобы исключить неоднозначные ситуации,
выравнивание ячеек происходит в следующем
порядке:

1. Сначала позиционируются ячейки,
   выровненные по их базовым линиям. Это
   устанавливает базовую линию ряда. Затем
   позиционируются ячейки с ‘vertical-align: top’.

2. Ряд имеет теперь верх, возможно — базовую
   линию и предварительную высоту, которая
   является расстоянием от верха (таблицы) до
   низа самой нижней ячейки. (См. ниже условия
   для заполнения ячеек.)

3. Если какая-либо из оставшихся ячеек,
   выровненных по низу или по середине, имеет
   высоту большую, чем текущая высота ряда, то
   высота ряда будет увеличена до максимума
   этой ячейки путём опускания низа (таблицы).

4. Наконец, позиционируются оставшиеся
   ячейки.

Боксы ячеек, которые меньше, чем высота
ряда, получают дополнительное заполнение
вверху или внизу.

17.5.4 Горизонтальное выравнивание
в столбце

Горизонтальное выравнивание содержимого
ячейки в боксе ячейки специфицируется
свойством ‘text-align’.

Если значение
свойства ‘text-align’
для более чем одной ячейки в столбце
установлено в<string>, содержимое
этих ячеек выравнивается вдоль
вертикальной оси. Начало строки касается
этой оси. Направление письма определяет,
расположена строка слева или справа от оси.

Выравнивание
текста таким способом возможно только
тогда, когда текст входит на одну строку.
Результат не определён, если содержимое
ячейки занимает более одной строки.

Если
значение ‘text-align’
ячейки таблицы это строка, но строка не
появляется в содержимом ячейки, то конец
содержимого ячейки соприкасается с
вертикальной осью выравнивания.

Заметьте,
что строки не должны быть теми же самыми для
каждой ячейки, хотя, как правило, это и так.

CSS
не предоставляет способа специфицировать
смещение оси вертикального выравнивания
относительно края бокса столбца.

Пример(ы):

Следующая таблица стилей:

   TD { text-align: "." }
   TD:before { content: "$" }

создаст столбец знаков доллара в
следующей таблице HTML:

  <TABLE>
  <COL>
  <TR> <TH>Long distance calls
  <TR> <TD> 1.30
  <TR> <TD> 2.50
  <TR> <TD> 10.80
  <TR> <TD> 111.01
  <TR> <TD> 85.
  <TR> <TD> 90
  <TR> <TD> .05
  <TR> <TD> .06
  </TABLE>

для выравнивания десятичной точки. Шутки
ради, мы использовали псевдоэлемент :before
для того, чтобы вставить знак доллара
перед каждым значением. Таблица может
выглядеть так:

Long distance calls
              $1.30      
              $2.50
             $10.80
            $111.01
             $85.
             $90
               $.05
               $.06

17.5.5 Динамические эффекты рядов
и столбцов

Свойство ‘visibility’
принимает значение ‘collapse’ для элементов
ряда, группы рядов, столбца и группы
столбцов. Это значение вызывает удаление
целого ряда или столбца с экрана, и
пространство, нормально занимаемое этим
рядом или столбцом, становится доступным
для другого содержимого. Подавление ряда
или столбца не влияет, однако, на структуру
таблицы. Это позволяет динамически удалять
столбцы или ряды таблицы без форсирования
реструктурирования таблицы для того, чтобы
учесть возможные изменения в столбцах.

Имеются две различные модели установки
рамок ячейки таблицы в CSS. Одна больше
подходит для так называемых раздельных рамок
вокруг отдельных ячеек, другая подходит для
рамок, которые протянулись от одного конца
таблицы до другого. Многие стили рамок
могут получены с помощью такой модели,
поэтому чаще всего — дело вкуса, какую
модель использовать.

‘border-collapse’

Значение:	collapse | separate | inherit
Начальное:	collapse
Применяется:	к элементам ‘table’ и ‘inline-table’
Наследуется:	да
Процентное:	N/A
Носитель:	визуальный

Это свойство выбирает модель рамки
таблицы. Значение ‘separate’ выбирает модель
раздельных рамок. Значение ‘collapse’ выбирает
модель сжимающихся рамок. Эти модели
описаны ниже.

17.6.1 Модель раздельных рамок

Размеры специфицируют расстояние,
разделяющее рамки смежных таблиц. Если
специфицирован один размер, он задаёт и
горизонтальное, и вертикальное расстояние.
Если специфицированы два, то первый задаёт
расстояние по горизонтали, второй — по
вертикали. Значения размеров не могут быть
отрицательными.

В этой модели каждая
ячейка имеет собственную рамку. Свойство ‘border-spacing’
специфицирует расстояние между рамками
смежных ячеек. Это пространство
заполняется фоном элемента таблицы. Ряды,
группы рядов, столбцы и группы столбцов не
могут иметь рамок (т.е. ПА обязаны игнорировать свойства
рамки в таких элементах).

Пример(ы):

Таблица на рисунке может быть
результатом такой таблицы стилей:

  TABLE      { border: outset 10pt; 
               border-collapse: separate;
               border-spacing: 15pt }
  TD         { border: inset 5pt }
  TD.special { border: inset 10pt }  /* Верхняя левая ячейка */

   [D]

Таблица с ‘border-spacing’,
установленным в значение размера. Заметьте,
что у каждой ячейки имеется своя
собственная рамка, а таблица также имеет
отдельную рамку.

Обрамление пустых ячеек:
свойство ’empty-cells’

’empty-cells’

Значение:	show | hide | inherit
Начальное:	show
Применяется:	к элементам ‘table-cell’
Наследуется:	да
Процентное:	N/A
Носитель:	визуальный

В модели раздельных рамок данное свойство
управляет представлением рамок вокруг
ячеек, не имеющих видимого содержимого.
Пустые ячейки и ячейки со свойством ‘visibility’, установленным в
‘hidden’, рассматриваются как не имеющие
видимого содержимого. Видимое содержимое
включает «&nbsp;» и другие пробелы, за
исключением ASCII-символов CR («\0D»), LF
(«\0A»), tab («\09»), и space («\20»).

Если это свойство
имеет значение ‘show’, рамки прорисовываются вокруг
пустых ячеек (как вокруг нормальных ячеек).

Значение
‘hide’ указывает, что рамки вокруг пустых
ячеек не будут прорисованы. Следовательно,
если все ячейки в ряду имеют значение ‘hide’ и
не имеют видимого содержимого, весь ряд
ведёт себя так, как если бы он имел ‘display: none’.

Пример(ы):

Следующее правило вызывает прорисовку
рамок вокруг всех ячеек:

TABLE { empty-cells: show }

17.6.2 Модель сжимающихся рамок

В модели сжимающихся рамок имеется
возможность специфицировать рамки,
окружающие все или часть ячеек, рядов, групп
рядов, столбцов и групп столбцов. Рамки для
атрибута HTML «rule» могут быть
специфицированы таким способом.

Рамки
центрируются по линиям сетки между
ячейками. ПА обязаны находить подходящее
правило для округления при наличии
нестандартного числа абстрактных единиц
измерения (пикселов экрана, точек принтера).

Диаграмма внизу показывает, как
взаимодействуют ширина таблицы, рамок,
заполнение и ширина ячеек. Их отношения
задаются следующим уравнением, которое
действует для каждого ряда таблицы:

row-width = (0.5 * border-width₀) +
padding-left₁ + width₁ +
padding-right₁ +
border-width₁ +
padding-left₂ +…+
padding-right_n +
(0.5 * border-width_n)

Здесь n это число ячеек в ряду, а
border-width_i относится к рамке
между ячейками i и i + 1. Учтите
только, что лишь половина из двух внешних
рамок учитывается в ширине таблицы; другая
половина этих двух рамок находится в
области полей.

   [D]

Схема показывает
размеры ширины ячеек и рамок и заполнение
ячеек.

Обратите внимание, что в этой модели
ширина таблицы включает половину ширины
рамки таблицы. Также в этой модели таблица
не имеет заполнения (но имеет поля).

Разрешение конфликтов рамок

В модели сжимающихся рамок, рамки каждого
края каждой ячейки могут быть
специфицированы свойствами рамки
различных элементов, находящихся у этого
края (ячеек, рядов, групп рядов, столбцов,
групп столбцов и самой таблицы), и эти рамки
могут различаться по ширине, стилю и цвету.
Основным правилом является то, что у
каждого края выбирается самая «примечательная»
рамка, за исключением тех случаев, когда
появление стиля ‘hidden’ безусловно отключает
вывод рамки.

Следующие правила определяют, какой стиль
рамки «побеждает» в случае конфликта:

1. Рамки с  ‘border-style’ — ‘hidden’ имеют
   преимущество перед всеми другими
   конфликтующими рамками. Любая рамка с этим
   значением подавляет все рамки в этом месте.
2. Рамки со стилем ‘none’ имеют самый низкий
   приоритет. Только если свойства рамки всех
   элементов, встречающихся у данного края, 
   — ‘none’, тогда рамка будет отсутствовать (но
   заметьте, что ‘none’ — это значение по
   умолчанию для стиля рамки).

3. Если ни один из стилей не ‘hidden’ и минимум
   один из них — не ‘none’, тогда узкие рамки
   отбрасываются в пользу более широких. Если
   несколько рамок имеют одну ‘border-width’, тогда стили имеют
   приоритет в следующем порядке: ‘double’, ‘solid’, ‘dashed’, ‘dotted’,
   ‘ridge’, ‘outset’, ‘groove’ и, самый низший, ‘inset’.

4. Если стили рамок отличаются только
   цветом, тогда стиль, установленный в
   ячейке имеет преимущество перед стилем
   ряда, который имеет преимущество перед
   стилем группы рядов, столбца, группы
   столбцов и, наконец, таблицы.

Пример(ы):

Следующий пример иллюстрирует
приложение с такими правилами 
приоритета. Данная таблица стилей:

  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }

с этим HTML:

<P>
<TABLE>
<COL><COL><COL>
<TR>
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR>
    <TD> 4 
    <TD> 5
    <TD> 6
</TR>
<TR>
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR>
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR>
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>

даст в результате что-либо
подобное:

   [D]

Пример таблицы со сжимающимися
рамками.

Пример(ы):

В следующем примере показана таблица с
горизонтальными линиями между рядами.
Верх рамки таблицы установлен в ‘hidden’,
чтобы подавить верхний край рамки первого
ряда. Это — выполнение атрибута «rules» HTML 4.0 (rules=»rows»).

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows]    { border-collapse: collapse; 
                       border-top: hidden }

   [D]

Таблица с
горизонтальными линиями между рядами.

В этом случае того же эффекта можно
достичь без установки рамки
‘hidden’ в TABLE: путём адресации первого ряда
отдельно. Какой метод предпочесть — дело
вкуса.

TR:first-child { border-top: none }
TR { border-top: solid }

Пример(ы):

Вот другой пример скрытых сжимающихся
рамок:

   [D]

Таблица с двумя
пропущенными внутренними рамками.

HTML-источник:

<TABLE>
<TR><TD>foo</TD>
    <TD>bar</TD></TR>
<TR><TD>foo</TD>
    <TD>bar</TD></TR>
</TABLE>

17.6.3  Стили рамок

Некоторые значения ‘border-style’ имеют в
таблице иной смысл в сравнении с другими
элементами. В следующем списке они помечены
звёздочкой.

none

Нет рамки.

*hidden

То же, что ‘none’, но в модели
сжимающихся рамок также сдерживает
любые другие рамки (см. раздел Конфликты
рамок).

dotted

Рамка из точек .

dashed

Пунктир.

solid

Сплошная линия.

double

Двойная сплошная линия. Сумма двух линий
и пространства между ними равна значению ‘border-width’.

groove

Вырезана в канве.

ridge

Противоположно ‘groove’: выступает над
канвой.

*inset

В модели раздельных рамок
рамка выглядит как целый бокс, как будто он
внедрён в канву. В модели сжимающихся
рамок — то же, что ‘groove’.

*outset

В модели раздельных рамок
рамка выглядит как целый бокс, как будто он
выступает из канвы. В модели
сжимающихся рамок — то же, что ‘ridge’.

Когда таблица читается синтезатором речи,
отношения между ячейками данных и
заголовочными ячейками обязаны быть
выражены иначе, чем отношения
вертикального и горизонтального
выравнивания. Некоторые синтезаторы речи
могут позволять пользователям «перемещаться»
в 2-мерном пространстве, давая таким образом
возможность отображения пространственных
соотношений. Если это невозможно, таблица
стилей обязана специфицировать, с какого
места произносятся заголовки.

17.7.1  Говорящие заголовки:
свойство

‘speak-header’

Значение:	once | always | inherit
Начальное:	once
Применяется:	к элементам. имеющим информацию «шапки» таблицы
Наследуется:	да
Процентное:	N/A
Носитель:	звуковой

Это свойство специфицирует, произносятся
ли заголовки перед каждой ячейкой (данных),
или только перед той ячейкой, которая
ассоциирована с другим заголовком.
Значения имеют следующий смысл:

once

Заголовок произносится однократно перед
серией ячеек.

always

Заголовок произносится перед каждой
подходящей ячейкой.

Каждый язык документов может иметь
различные механизмы спецификации
заголовков. Например, в HTML 4.0 ([HTML40])
можно специфицировать заголовочную
информацию тремя различными атрибутами («headers»,
«scope» и «axis»), и спецификация
предоставляет алгоритм для определения
заголовочной информации, когда эти
атрибуты не специфицированы.

   [D]

Изображение
таблицы с заголовочными ячейками («San
Jose» и «Seattle»), которые не находятся в
одном столбце или ряде с данными, к которым
они относятся.

Этот пример HTML представляет денежный
расчёт расходов на питание, гостиницу и
транспорт в двух местах (San Jose и Seattle) на
несколько дней. Концептуально Вы можете
представлять таблицу в терминах n-размерного
пространства. Заголовками этого
пространства являются: место, день,
категория и итог. Некоторые ячейки
определяют метки вдоль оси, а другие дают
подсчёт денег в точке данного пространства.
Вот разметка для этой таблицы:

<TABLE>
<CAPTION>Travel Expense Report</CAPTION>
<TR>
  <TH></TH>
  <TH>Meals</TH>
  <TH>Hotels</TH>
  <TH>Transport</TH>
  <TH>subtotal</TH>
</TR>
<TR>
  <TH axis="san-jose">San Jose</TH>
</TR>
<TR>
  <TH headers="san-jose">25-Aug-97</TH>
  <TD>37.74</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">26-Aug-97</TH>
  <TD>27.28</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">subtotal</TH>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH axis="seattle">Seattle</TH>
</TR>
<TR>
  <TH headers="seattle">27-Aug-97</TH>
  <TD>96.25</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">28-Aug-97</TH>
  <TD>35.00</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">subtotal</TH>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Totals</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

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

  San Jose, 25-Aug-97, Meals:  37.74
  San Jose, 25-Aug-97, Hotels:  112.00
  San Jose, 25-Aug-97, Transport:  45.00
 ...

Браузер может также проговаривать ячейки,
только если они изменяются:

San Jose, 25-Aug-97, Meals: 37.74
    Hotels: 112.00
    Transport: 45.00
  26-Aug-97, Meals: 27.28
    Hotels: 112.00
...

Лучший способ центрировать текст в ячейке таблицы

Если вы начинающий веб-дизайнер, у вас могут возникнуть вопросы о том, как центрировать текст внутри ячейки таблицы. С помощью этого руководства выучите эту технику всего за несколько минут. Это просто — даже если вы никогда раньше не пробовали.

Начало работы

Центрирование текста внутри ячейки лучше всего делать с помощью CSS, точно так же, как вы центрируете текст в другом элементе на своей веб-странице. Однако перед тем, как начать, вам нужно решить, что именно вы хотите центрировать.С таблицей у вас есть несколько вариантов, включая каждую ячейку в таблице; каждая ячейка заголовка в таблице каждая ячейка в заголовке таблицы, теле таблицы или ножке стола. Вы также можете центрировать определенную ячейку или набор ячеек в таблице.

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

Как центрировать каждую ячейку в таблице

Добавьте в таблицу стилей следующие строки:

td, th {
 выравнивание текста: по центру; 
} 
 

Как центрировать каждую ячейку заголовка в таблице

Добавьте в таблицу стилей следующие строки:

th {
 выравнивание текста: по центру; 
} 
 

Центрирование каждой ячейки в голове, теле или ноге стола

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

thead th, thead td {
 выравнивание текста: центр; 
} 
 tbody th, tbody td {
 text-align: center; 
} 
 tfoot th, tfoot td {
 text-align: center; 
} 
 

.centered-cell {
 выравнивание текста: центр; 
} 
 

Как лучше всего центрировать содержимое HTML-сообщения электронной почты в окне браузера (или на панели предварительного просмотра почтового клиента)?

Выровняйте стол по центру.

  

    

        

            Ваш контент
        
    

  

Если у вас есть «ваше содержимое», если это таблица, установите для него желаемую ширину, и вы получите центрированное содержимое.

Для гуглеров и полноты:

Вот ссылка, которую я всегда использую, когда мне нужно пройти через боль, связанную с реализацией HTML-шаблонов электронной почты или подписей:
http://www.campaignmonitor.com/css/

Это список поддержки CSS для большинства, если не для всех, параметров CSS, хорошо сравненный между некоторыми из наиболее часто используемых почтовых клиентов.

Для центрирования можно просто использовать CSS (поскольку атрибут align устарел в HTML 4.01 ).

  

    

        

            Ваш контент
        
    

  

table align = «center»… это выравнивает таблицу по центру страницы.

Использование td align = «center» центрирует содержимое внутри этого td, полезно для центрированного выровненного текста, но у вас будут проблемы с некоторыми почтовыми клиентами, центрирующими содержимое в таблицах подуровня, поэтому использование td align в качестве метода верхнего уровня для центрирования вашего «контейнера» таблица на странице — это не способ сделать это. Вместо этого используйте выравнивание таблицы.

По-прежнему используйте свою таблицу-оболочку 100%, исключительно как оболочку для тела, так как некоторые почтовые клиенты не отображают цвета фона тела, но они будут отображать его со 100% таблицей, поэтому добавьте свой цвет тела как в тело, так и в 100% стол.

Я мог бы бесконечно долго рассказывать обо всех особенностях разработки HTML-электронной почты. Все, что я могу сказать, это тестовый тест и еще раз тест. Litmus.com — отличный инструмент для тестирования электронной почты.

Чем больше вы будете делать, тем больше узнаете, что работает в каких почтовых клиентах.

Надеюсь, это поможет.

В центре внимания Неизвестное | CSS-уловки

Когда дело доходит до центрирования в веб-дизайне, чем больше у вас информации о центрируемом элементе и его родительском элементе, тем проще это сделать.Так что, если вы ничего не знаете? Это все еще выполнимо.

Не слишком сложно: Известный ребенок

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

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

Вы абсолютно позиционируете элемент, который нужно центрировать, и устанавливаете верхнее и левое значения на 50%, а верхнее и левое поля — на отрицательную половину высоты и ширины элемента. Это был твистер, так что проверьте это.

Сложнее: Неизвестный ребенок

Сложность возникает, когда вы не знаете размеров центрируемого элемента.

Что мы знаем? Ничего такого! Когда мы это узнаем? Теперь!

Самый грубый способ справиться с этим — буквально столы:

  <таблица>
  
     
          Неизвестный материал, который нужно сосредоточить.
  
  

Если вас беспокоит его семантика, вы можете попытаться сопоставить его со своим контентом.

  

   

       Неизвестный материал, который нужно сосредоточить.
   
  

И получите тот же результат, что и в таблицах вроде:

  .something-semantic {
  дисплей: таблица;
  ширина: 100%;
}
.something-else-semantic {
  дисплей: таблица-ячейка;
  выравнивание текста: центр;
  вертикальное выравнивание: по центру;
}  

Вам может подойти

таблиц CSS.А может и нет. Таблицы визуализируются несколько иначе, чем обычные блоки div. Например, 100% ширина. Таблица будет растягиваться только до такой степени, насколько это необходимо для содержимого внутри нее, тогда как по умолчанию элемент уровня блока автоматически расширяется до ширины своего родителя. Кроме того, бог поможет вам, если вам нужен другой контент внутри этого div, который вы хотите позиционировать или иначе не действовать как ячейка таблицы.

Михал Чернов написал мне альтернативную технику, которая чрезвычайно умна и дает то же самое.Если мы настроим «призрачный» элемент внутри родительского элемента со 100% высотой, тогда мы установим vertical-align: middle и для этого, и для элемента, который нужно центрировать, мы получим тот же эффект.

Видите, что мы там делали?

Так должен ли этот призрачный элемент быть несемантическим элементом? Нет, это может быть псевдоэлемент.

  / * У этого родителя может быть любая ширина и высота * /
.блокировать {
  выравнивание текста: центр;

  / * Может потребоваться это сделать, если есть риск, что контейнер может быть уже, чем элемент внутри * /
  белое пространство: nowrap;
}
 
/ * Призрак, подталкиваемый для идеального центрирования * /
.block: before {
  содержание: '';
  дисплей: встроенный блок;
  высота: 100%;
  вертикальное выравнивание: по центру;
  крайнее правое: -0,25em; / * Регулирует интервал * /
}

/ * Элемент, который нужно центрировать, также может быть любой ширины и высоты * /
.centered {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
  ширина: 300 пикселей;
}  

  Посмотреть демо 

Я хотел бы сказать вам, что техника призрачного элемента намного лучше и должна стать основной техникой центрирования на века.Но на самом деле это примерно то же самое, что и уловка со столом. Браузер поддерживает это, по сути, все, и IE 8+. IE 7 не поддерживает псевдоэлементы. Но он также не поддерживает таблицы CSS, так что это целая лошадка за штуку. Если IE

Последние
		< / td>

  

    


 Последние 

    

  
  
  < / td>
     
  

  

 

Привет
Привет
Привет



Привет
Привет
Привет
  

  .tableStyle {
граница: тонкая сплошная #EFEFEF;
граница-коллапс: коллапс;
ширина: 800 пикселей;
маржа: 0 авто;
выравнивание текста: центр;
align-items: center;
}
  

 .tableCell {
выровнять контент: центр;
ширина границы: тонкий;
граница: тонкая сплошная #EFEFEF;
отступ: 5 пикселей;
}
  

  .containerDiv {
ширина: 1200 пикселей;
маржа: 0 авто;
}
  

  

    

        

            

                [СОДЕРЖАНИЕ]
            
        
    
  

  

    

        

            

                [СОДЕРЖАНИЕ]
            
        
    
  

  

    

        

            
 
            
 
            
 
        
        

            
 
            

                [СОДЕРЖАНИЕ]
            
            
 
        
        

            
 
            
 
            
 
        
    
  

  
     & zwnj;