Содержание

html — Как задать ширину ячеек таблицы под контент

Вопрос задан

Изменён 7 лет 5 месяцев назад

Просмотрен 2k раза

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

А мне нужно чтобы не было никаких пробелов между ячейками в строке (при этом не объединяя ячейки). Пример кода на облаке и тут:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
  </head>
  <body>
    <table border="1,solid,#000000" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <td></td>
        </tr>
        <tr>
        </tr>
        <tr>
          <td colspan="3"></td>
        </tr>
      </thead>
      <tbody align="center">
        <tr>
          <td>
            <table border="1, solid, #000000" cellpadding="0" cellspacing="0">
              <tr>
                <td></td>
                <td>
                  <table align="center" border="1, solid, #000000" cellpadding="0" cellspacing="0">
                    <tr>
                      <td>Значение</td>
                      <td>@очень_длинная_переменная</td>
                    </tr>
                    <tr>
                      <td></td>
                    </tr>
                    <tr>
                      <td>Значение</td>
                      <td>@переменная</td>
                    </tr>
                    <tr>
                      <td></td>
                    </tr>
                    <tr>
                      <td>@переменная</td>
                      <td>х</td>
                      <td>@переменная</td>
                      <td>@переменная</td>
                    </tr>
                    <tr>
                      <td></td>
                    </tr>
                  </table>
                </td>
                <td></td>
              </tr>
            </table>
          </td>
        </tr>
      </tbody>
      <tfoot>
      </tfoot>
    </table>
  </body>
</html>

Как вариант для каждой строки создавать отдельную таблицу, а не в одной, как у Вас. Либо сверстать на дивайдерах.

Итоговый вариант на таблицах:

    <html>
      <head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type">
      </head>
      <body>
        <table border="1,solid,#000000" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <td></td>
            </tr>
            <tr>
            </tr>
            <tr>
              <td colspan="3"></td>
            </tr>
          </thead>
          <tbody align="center">
            <tr>
              <td>
                <table cellpadding="0" cellspacing="0">
                  <tr>
                    <td></td>
                    <td>
                      <table align="center" border="1" cellpadding="0" cellspacing="0">
                        <tr>
                          <td>
                            <table border="1">
                              <tr>
                                <td>Значение:                              
                                </td>                          
                                <td>@очень_длинная_переменная                              
                                </td>
                              </tr>
                            </table>
                          </td>
                        <tr>
                          <td></td>
                        </tr>
                        <tr>
                          <td>
                            <table border="1">
                              <tr>
                                <td>Значение:                              
                                </td>                         
                                <td>@длинная_переменная                              
                                </td>
                              </tr>
                            </table>
                          </td>                    
                        <tr>
                          <td></td>
                        </tr>
                        <tr>
                          <td>
                            <table border="1">
                              <tr align="left">
                                <td>@переменная                           
                                </td>                         
                                <td>x                             
                                </td>                          
                                <td>@переменная                             
                                </td>                          
                                <td>@переменная                             
                                </td>
                              </tr>
                            </table>
                          </td>   
                        <tr>
                          <td></td>
                        </tr>
                      </table>
                    </td>
                    <td></td>
                  </tr>
                </table>
              </td>
            </tr>
          </tbody>
          <tfoot>
          </tfoot>
        </table>
      </body>
    </html>

8

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Визуальное положение содержания таблицы — HTML, CSS, JavaScript, Perl, PHP, MySQL: Weblibrary.

biz

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

Расположение этих блоков при визуальном представлении регулируется прямоугольной неравномерной сеткой строк и столбцов. Каждый блок занимает определенное количество ячеек, определяемое согласно следующим правилам. Эти правила не применяются в HTML 4.0 и в более ранних версиях; язык 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 также не определяет его. Агенты пользователей могут представлять таблицы на свое усмотрение, например, так, как показано на рисунке слева.

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

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

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

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

  1. Самый нижний слой представляет собой одну плоскость, представляющую сам блок таблицы. Как и все блоки, он может быть прозрачным.
  2. Следующий слой содержит группы столбцов. Группы столбцов по высоте равны самой таблице, но не обязательно занимают всю ее ширину.
  3. В верхней части групп столбцов находятся области, представляющие блоки столбцов. Как и группы столбцов, столбцы по высоте равны самой таблице, но не всегда занимают всю ширину таблицы.
  4. Далее следует слой, содержащий группы строк. Каждая группа строк имеет ширину, равную ширине таблицы. Вместе взятые, группы полностью занимают таблицу сверху вниз.
  5. Предпоследний слой содержит строки. Строки также занимают всю таблицу.
  6. Самый верхний слой содержит собственно ячейки. Как показано на рисунке, хотя все строки и содержат одинаковое количество ячеек, не в каждой ячейке имеется содержимое. «Пустые» ячейки считаются прозрачными, поэтому через них будут видны нижние слои.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
TABLE { фон: #ff0; border-collapse: collapse }
TD { фон: 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>

может форматироваться так:

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

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

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

‘table-layout’

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

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

fixed

Используется алгоритм фиксированного положения таблицы

auto

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

Ниже представлены описания обоих алгоритмов.
Фиксированное расположение таблицы

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

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

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

  1. Элемент столбца со значением свойства ‘width’, отличным от ‘auto’, определяет ширину этого столбца.
  2. В противном случае ширину этого столбца определяет ячейка из первой строки свойства ‘width’, отличным от ‘auto’. Если ячейка охватывает несколько столбцов, ширина делится на количество столбцов.
  3. Между остальными столбцами оставшееся свободное пространство таблицы (минус границы или расстояние между ячейками) длится поровну.

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

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

    Автоматическое расположение таблицы

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

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

    Ширина столбцов определяется следующим образом:

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

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

    2. Для каждого столбца определяется максимальная и минимальная ширина ячеек, занимающих только этот столбец. Минимальная ширина — это ширина, необходимая для ячейки с самым большим значением минимальной ширины (или значением свойства ‘width’ столбца, в зависимости от того, какое значение больше). Максимальная ширина — это ширина, необходимая для ячейки с самым большим значением максимальной ширины (или значением свойства ‘width’ столбца, в зависимости от того, какое значение больше).
    3. Для каждой ячейки, которая занимает несколько столбцов, необходимо увеличить минимальную ширину занимаемых ею столбцов таким образом, чтобы их общая ширина равнялась ширине ячейки. Сделайте это и для максимальной ширины. При возможности необходимо расширить все занимаемые ячейкой столбцы на приблизительно одинаковую величину.

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

    1. Если для свойства ‘width’ элементов ‘table’ или ‘inline-table’ указано значение (Ш), отличное от ‘auto’, значением свойства будет наибольшее из Ш и минимальной ширины, необходимой для всех столбцов с учетом расстояния между ячейками и границами (МИН). Если Ш больше МИН, оставшееся пространство будет распределено между столбцами.
    2. Если для элемента ‘table’ или ‘inline-table’ установлено значение ‘width: auto’, ширина таблицы будет равна наибольшему из значений ширины содержащего блока таблицы и значения МИН. Однако если максимальная ширина, необходимая для столбцов и расстояния между ячейками и границами (МАКС), меньше ширины содержащего блока, необходимо использовать значение МАКС.

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

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

    Алгоритмы определения высоты таблицы

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

    Высота поля элемента ‘table-row’ подсчитывается после того, как агенту пользователя будут доступны все ячейки строки: это будет наибольшая из величин высоты строки (свойство ‘height’) и минимальной высоты (МИН), необходимой для ячеек. Если для свойства ‘height’ элемента ‘table-row’ установлено значение ‘auto’, это означает, что подсчитанная высота строки имеет значение МИН. Значение МИН зависит от высот блоков ячеек и выравнивания блока ячейки (аналогично вычислению высоты линейного блока). В CSS2 не определяется, относительно чего подсчитываются процентные значения свойства ‘height’ для строк таблицы и групп строк.

    В CSS2 высота блока ячейки является наибольшим из значений свойства ‘height’ ячейки таблицы и минимальной высотой, необходимой для содержимого (МИН). Если для свойства ‘height’ установлено значение ‘auto’, подразумевает, что используется подсчитанное значение МИН. В CSS2 не определяется, относительно чего подсчитываются процентные значения свойства ‘height’ для ячеек таблицы.

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

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

    baseline

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

    top

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

    bottom

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

    middle

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

    sub, super, text-top, text-bottom

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

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

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

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

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

    1. Сначала позиционируются ячейки, выровненные относительно базовой линии. В результате будет создана базовая линия строки. Далее позиционируются ячейки со свойством ‘vertical-align: top’.
    2. После этого у строки имеется верх, базовая линия (возможно) и условная высота, которая является расстоянием от верхнего края до самого нижнего края ячеек, позиционированных на этот момент. (Условия распределения полей внутри ячейки см. ниже.)
    3. Если высота какой либо из оставшихся ячеек, которые выровнены по нижнему краю или по центру, превышает текущую высоту строки, высота строки увеличится до максимальной высоты таких ячеек за счет опускания нижней части.
    4. В последнюю очередь позиционируются оставшиеся ячейки.

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

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

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

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

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

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

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

    В CSS не указывается способ указания отступа оси вертикального выравнивания относительно края блока столбца.

    Согласно следующей таблице стилей:

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

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

    <COL>
    <TR> <TH>Плата за междугородние звонки
    <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 . Таблица может быть представлена следующим образом:

    Плата за междугородние звонки
    .30
    .50
    .80
    1.01
    .

    $.05
    $.06

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

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

HTML таблица, заголовок таблицы, ширина ячейки

Информация о материале

 

 

HTML ширина ячейки таблицы и ее высота (размер ячеек)

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

<html>
<head>
<title>Пример таблицы: HTML высота ячейки и ее ширина, размеры ячеек</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»12″>
<tr>
<td>ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1, первый ряд

ячейка 2, первый ряд

ячейка 1, второй ряд

ячейка 2, второй ряд

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

 

Горизонтальное HTML выравнивание в таблице и в ячейке, текст

HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»17″>
<tr>
<td align=»left»>ячейка 1</td>
<td align=»right»>ячейка 2</td>
<td align=»center»>ячейка 3</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1

ячейка 2

ячейка 3

 

Вертикальное выравнивание текста внутри HTML таблицы

HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»17″>
<tr>
<td valign=»top»>ячейка 1</td>
<td valign=»bottom»>ячейка 2</td>
<td valign=»middle»>ячейка 3</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1

ячейка 2

ячейка 3

Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.

 

Теги, определяющие заголовок HTML таблицы

HTML заголовки таблицы:

<html>
<head>
<title>Примеры заголовков</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»10″>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</table> 
</body>
</html>

Результат:

Заголовок

Заголовок

Заголовок

Текст

Текст

Текст

Текст

Текст

Текст

Теги <th> </th> определяют заголовок HTML таблицы.

 

HTML таблица по центру, с левой, с правой стороны

Горизонтальное расположение HTML таблицы внутри web-страницы:

<html>
<head>
<title>Примеры HTML таблиц</title>
</head>
<body>
<table align=»center» bgcolor=»#006699″>
<tr>
<td>
<p>align=»center»</p>
</td>
</tr>
</table>
   <table align=»left» bgcolor=»#cc0000″>
   <tr>
   <td>
   <p>align=»left»</p>
   </td>
   </tr>
   </table>
<table align=»right» bgcolor=»#66cc66″>
<tr>
<td>
<p>align=»right»</p>
</td>
</tr>
</table>
</body>
</html>

Результат: HTML таблица по центру страницы, слева, справа

В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки. bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSSаналог – background-color.

 

HTML таблица расположена внутри ячейки

Пример:

<html>
<head>
<title>Примеры HTML таблицы</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ bgcolor=»#cccccc»>
<tr>
<td> &nbsp; </td>
<td align=»center»>
    <table border=»1″ cellspacing=»5″>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    </table>
</td>
</tr>
</table> 
</body>
</html>

Результат: HTML таблица внутри ячейки другой таблицы

Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.

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

Изменение ширины столбца и высоты строки

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

Тип

Минимум

Максимум

По умолчанию

Столбец

0 (скрыто)

255

8,43

Строка

0 (скрыто)

409

15,00

Примечания: 

  • Если работа ведется в режиме разметки страницы (вкладка Представление, группа Представления книги, кнопка Разметка страницы), вы можете указать ширину столбца или высоту строки в дюймах, сантиметрах и миллиметрах. По умолчанию единицами измерения являются дюймы. Перейдите в раздел Файл > Параметры > Дополнительно > Отображение и выберите параметр из списка Единицы на линейке. При переключении в обычный режим, значения ширины столбцов и высоты строк будут отображаться в точках.

  • Отдельные строки и столбцы могут иметь только один параметр. Например, если для одного столбца задана ширина 25 точек, это не может быть 25 точек для одной строки и 10 для другой.

Установка заданной ширины столбца

  1. Выберите столбец или столбцы, ширину которых требуется изменить.

  2. org/ListItem»>

    На вкладке Главная в группе Ячейки нажмите кнопку Формат.

  3. В разделе Размер ячейки выберите пункт Ширина столбца.

  4. Введите значение в поле Ширина столбцов.

  5. Нажмите кнопку ОК.

    Совет: Чтобы быстро задать ширину одного столбца, щелкните столбец правой кнопкой мыши, выберите Ширина столбца, а затем введите требуемое значение и нажмите кнопку ОК.

  1. Выберите столбец или столбцы, ширину которых требуется изменить.

  2. На вкладке Главная в группе Ячейки нажмите кнопку Формат.

  3. В разделе Размер ячейки выберите пункт Автоподбор ширины столбца.

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

  1. Выделите ячейку, которая имеет нужную ширину.

  2. Нажмите сочетание клавиш CTRL+C или на вкладке Главная в группе Буфер обмена нажмите кнопку Копировать.

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

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

  1. Выполните одно из указанных ниже действий.

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

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

  2. На вкладке Главная в группе Ячейки нажмите кнопку Формат.

  3. В разделе Размер ячейки выберите пункт Ширина по умолчанию.

  4. В поле Ширина столбца введите новое значение, а затем нажмите кнопку ОК.

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

    • Windows — настройка поведения Excel при запуске

    • Mac — настройка поведения Excel при запуске

Выполните одно из указанных ниже действий.

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

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

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

  • Чтобы изменить ширину всех столбцов на листе, нажмите кнопку Выделить все, а затем перетащите правую границу заголовка любого столбца.

  1. Выберите строку или строки, высоту которых требуется изменить.

  2. На вкладке Главная в группе Ячейки нажмите кнопку Формат.

  3. В разделе Размер ячейки выберите пункт Высота строки.

  4. Введите значение в поле Высота строки и нажмите кнопку ОК.

  1. Выберите строку или строки, высоту которых требуется изменить.

  2. На вкладке Главная в группе Ячейки нажмите кнопку Формат.

  3. org/ListItem»>

    В разделе Размер ячейки выберите пункт Автоподбор высоты строки.

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

Выполните одно из указанных ниже действий.

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

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

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

  • Чтобы изменить высоту строки в соответствии с содержимым, дважды щелкните нижнюю границу заголовка строки.

К началу страницы

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

Установка заданной ширины столбца

  1. Выберите столбец или столбцы, ширину которых требуется изменить.

  2. На вкладке Главная в группе Ячейки нажмите кнопку Формат.

  3. В разделе Размер ячейки выберите пункт Ширина столбца.

  4. Введите значение в поле Ширина столбцов.

  1. Выберите столбец или столбцы, ширину которых требуется изменить.

  2. На вкладке Главная в группе Ячейки нажмите кнопку Формат.

  3. org/ListItem»>

    В разделе Размер ячейки выберите пункт Автоподбор ширины столбца.

Совет    Чтобы быстро подобрать ширину всех столбцов листа, нажмите кнопку Выделить все и дважды щелкните любую границу между заголовками двух столбцов.

  1. Выделите ячейку, которая имеет нужную ширину.

  2. На вкладке Главная в группе Буфер обмена нажмите кнопку Копировать и выберите нужный столбец.

  3. На вкладке Главная в группе Буфер обмена щелкните стрелку под кнопкой Вставить и выберите команду Специальная вставка.

  4. В разделе Вставить установите переключатель в положение ширины столбцов.

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

    org/ItemList»>

  1. Выполните одно из указанных ниже действий.

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

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

  2. org/ListItem»>

    На вкладке Главная в группе Ячейки нажмите кнопку Формат.

  3. В разделе Размер ячейки выберите пункт Ширина по умолчанию.

  4. В поле Ширина столбца введите новое значение.

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

Выполните одно из указанных ниже действий.

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

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

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

  • Чтобы изменить ширину всех столбцов на листе, нажмите кнопку Выделить все, а затем перетащите правую границу заголовка любого столбца.

  1. Выберите строку или строки, высоту которых требуется изменить.

  2. На вкладке Главная в группе Ячейки нажмите кнопку Формат.

  3. В разделе Размер ячейки выберите пункт Высота строки.

  4. Введите значение в поле Высота строки.

  1. Выберите строку или строки, высоту которых требуется изменить.

  2. org/ListItem»>

    На вкладке Главная в группе Ячейки нажмите кнопку Формат.

  3. В разделе Размер ячейки выберите пункт Автоподбор высоты строки.

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

Выполните одно из указанных ниже действий.

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

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

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

  • Чтобы изменить высоту строки в соответствии с содержимым, дважды щелкните нижнюю границу заголовка строки.

К началу страницы

См. также

Изменение ширины столбцов и высоты строк в Excel для Mac

Изменение ширины столбцов и высоты строк в Excel Online

Полные сведения о формулах в Excel

Рекомендации, позволяющие избежать появления неработающих формул

Поиск ошибок в формулах

Сочетания клавиш и горячие клавиши в Excel

Функции Excel (по алфавиту)

Функции Excel (по категориям)

Таблицы в документах HTML

Таблицы в документах HTML
ЭЛЕКТРОННАЯ БИБЛИОТЕКА КОАПП
Сборники Художественной, Технической, Справочной, Английской, Нормативной, Исторической, и др. литературы.

 назад   далее   содержание   элементы   атрибуты   указатель

Содержание

  1. Введение в таблицы
  2. Элементы построения таблиц
    1. Элемент TABLE
      • Направление таблиц
    2. Captions таблиц: элемент CAPTION
    3. Группы строк: элементы THEAD, TFOOT и TBODY
    4. Группы столбцов: элементы COLGROUP и COL
      • Элемент COLGROUP
      • Элемент COL
      • Подсчет числа столбцов в таблице
      • Подсчет ширины столбцов
    5. Строки таблицы: элемент TR
    6. Ячейки таблицы: элементы TH и TD
      • Ячейки, span несколько строк или столбцов
  3. Форматирование таблиц визуальными агентами пользователей
    1. Границы и rules
    2. Горизонтальное и вертикальное выравнивание
      • Наследование параметров выравнивания
    3. Поля ячейки
  4. Представление таблиц невизуальными агентами пользователей
    1. Связь информации заголовка с ячейками данных
    2. Категоризация ячеек
    3. Алгоритм поиска заголовочной информации
  5. Пример таблицы

11.

1 Введение в таблицы

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

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

Строки таблицы могут группироваться в разделы заголовков, нижних заголовков и тела, (с помощью элементов THEAD, TFOOT и TBODY соответственно). Группы строк convey дополнительную структурную информацию и могут генерироваться агентами пользователей различными способами, отображающими эту структуру. Агенты пользователей могут использовать подразделение на заголовки/тело/нижние заголовки для поддержки прокрутки тела независимо от заголовков. При печати длинных таблиц информация из заголовков может повторяться на каждой странице таблицы.

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

Ячейки таблицы могут содержать «заголовок» (см. элемента TH) или «данные» (см. элемент TD). Ячейки могут распространяться на несколько строк или столбцов. Модель таблиц языка HTML 4.0 позволяет авторам помечать каждую ячейку, так что невизуальным агентам пользователей будет проще работать с информацией о ячейках. Эти механизмы не только существенно облегчают доступ пользователям с физическими недостатками, но и делают его обработку таблиц возможной для мультирежимных беспроводных браузеров с ограниченными возможностями отображения (например, Web-совместимых пейджеров и телефонов).

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

Примечание. В этой спецификации более подробная информация о таблицах приводится в разделах о вопросах применения и rationale создания таблиц.

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


<TABLE border="1"
          summary="В этой таблице приводится некоторая статистика о фруктовых мухах:
                            средняя высота и вес, процент мух с красными глазами (особей мужского и женского пола). ">
<CAPTION><EM>Тестовая таблица с объединенными ячейками</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Средний
    <TH rowspan="2">Красные<BR>глаза
<TR><TH>высота<TH>вес
<TR><TH>мужской пол<TD>1.9<TD>0.003<TD>40%
<TR><TH>женский пол<TD>1.7<TD>0.002<TD>43%
</TABLE>

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


          Тестовая таблица с объединенными ячейками
    /----------------------------------------------------------\
    |                            |      Средний      | Красные |
    |                            |-------------------| глаза   |
    |                            |  высота |  вес    |         |
    |----------------------------------------------------------|
    |  Мужской пол   | 1.9       | 0.003   |   40%   |         |
    |----------------------------------------------------------|
    | Женский пол    | 1. 7       | 0.002   |   43%   |                      |
    \----------------------------------------------------------/

или следующим образом — графическими агентами пользователей:

11.2 Элементы построения таблиц

11.2.1 Элемент

TABLE 

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ATTLIST TABLE                        -- таблица --
  %attrs;                              -- %coreattrs, %i18n, %events --
  summary     %Text;         #IMPLIED  -- цель/структура для речевого вывода --
  width       %Length;       #IMPLIED  -- ширина таблицы --
  border      %Pixels;       #IMPLIED  -- толщина рамки вокруг таблицы --
  frame       %TFrame;       #IMPLIED  -- какие части рамки нужно генерировать --
  rules       %TRules;       #IMPLIED  -- rulings между строками и столбцами --
  cellspacing %Length;       #IMPLIED  -- расстояние между ячейками --
  cellpadding %Length;       #IMPLIED  -- расстояние внутри ячеек --
  >

Начальный тег: обязателен, конечный тег: обязателен

Определения атрибутов

summary = текст [CS]
Краткая информация о назначении и структуре таблицы для агентов пользователей, выполняющих генерацию для невизуальных средств, таких как синтезаторы речи или азбуки Бройля.
align = left|center|right [CI]
Deprecated. Этот атрибут задает положение таблицы относительно документа. Допустимые значения:
  • left: Таблица находится в левой части документа.
  • center: Таблица находится в центре документа.
  • right: Таблицы находится в правой части документа.
width = длина [CN]
Этот атрибут определяет необходимую ширину всей таблицы и предназначен для визуальных объектов пользователей. Если значение указано в процентах, это означает долю в процентах от доступного горизонтального пространства. Если ширина не указана, она определяется агентом пользователя.

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
  • bgcolor (цвет фона)
  • frame, rules, border (границы и rules)
  • cellspacing, cellpadding (поля в ячейках)

Элемент TABLE содержит все другие элементы, определяющие заголовок, строки, содержимое и форматирование.

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

  • Предоставление пользователю информации о таблице. Авторам следует предоставлять краткую информацию о содержании и структуре таблицы, чтобы люди, работающие с невизуальными агентами пользователей, могли лучше понять ее.
  • Генерация caption, если он определен.
  • Генерация верхнего заголовка таблицы, если он определен. Генерация нижнего заголовка, если он определен. Агенты пользователей должны знать, где нужно генерировать верхний и нижний заголовки. Например, если средство вывода делится на страницы, агенты пользователей могут помещать верхний заголовок в верхней части каждой страницы, а нижний — внизу. Точно так же, если агент пользователя предоставляет механизм прокрутки строк, верхний заголовок может отображаться вверху прокручиваемой области, а нижний — внизу.
  • Вычисление числа столбцов в таблице. Помните, что число строк в таблице равно числу элементов TR, содержащихся в элементе TABLE.
  • Группировка столбцов в соответствии со спецификациями групп столбцов.
  • Построчная генерация ячеек и группировка в столбцы между верхним и нижним заголовками. Визуальные агенты пользователей должны форматировать таблицы в соответствии с атрибутами HTML и спецификациями таблиц стилей.

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

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

  • Число столбцов в таблице. Подробнее о том, как указать эту информацию, см. в разделе о подсчете числа столбцов в таблице.
  • Ширину столбцов. Подробнее о том, как указать эту информацию, см. в разделе о подсчете ширины столбцов.

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

Направление таблиц 

Направление таблицы либо наследуется (по умолчанию используется направление слева направо), либо определяется атрибутом dir элемента TABLE.

Для таблиц, направление которых слева направо, нулевой столбец находится слева, а нулевая строка — сверху. Для таблиц, направление которых справа налево, нулевой столбец находится справа, а нулевая строка — сверху.

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

Помните, что TABLE — единственный элемент, для которого атрибут dir обращает визуальный порядок столбцов; нельзя изменить порядок одной строки (TR) или группы столбцов (COLGROUP).

Если для элемента TABLE установлен атрибут dir, он также влияет на направление текста в ячейках таблицы (поскольку атрибут dir наследуется элементами уровня блока).

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


<TABLE dir="RTL">
...продолжение таблицы...
</TABLE>

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

11.2.2 Captions таблиц: элемент

CAPTION 

<!ELEMENT CAPTION  - - (%inline;)*     -- caption таблицы -->
<!ENTITY % CAlign "(top|bottom|left|right)">

<!ATTLIST CAPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Начальный тег: обязателен, конечный тег: обязателен

Определения атрибутов

align = top|bottom|left|right [CI]
Нежелателен. Для визуальных агентов пользователей этот атрибут указывает положение caption относительно таблицы. Возможные значения:
  • top: caption находится наверху таблицы. Это значение используется по умолчанию.
  • bottom: caption находится внизу таблицы.
  • left: caption находится слева от таблицы.
  • right: caption находится справа от таблицы.

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Если элемент CAPTION присутствует, его текст должен описывать предмет таблицы. Элемент CAPTION может располагаться только непосредственно после начального тега TABLE. Элемент TABLE может включать только один элемент CAPTION.

Визуальные агенты пользователей позволяют sighted people быстро grasp структуру таблицы из заголовков и caption. Последствием этого является то, что captions не будут совпадать с краткими описаниями назначения и структуры таблицы с точки зрения людей, использующих невизуальные агенты.

Таким образом, авторы должны позаботиться о предоставлении дополнительной информации, описывающей назначение и структуру таблицы с помощью атрибута summary элемента TABLE. Это особенно важно для таблиц, не имеющих captions. На примерах ниже показано использование атрибута summary.

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

11.2.3 Группы строк: элементы

THEAD, TFOOT и TBODY 

<!ELEMENT THEAD    - O (TR)+           -- заголовок таблицы -->
<!ELEMENT TFOOT    - O (TR)+           -- нижний заголовок таблицы -->

Начальный тег: обязателен, конечный тег: необязателен


<!ELEMENT TBODY    O O (TR)+           -- тело таблицы -->

Начальный тег: необязателен, конечный тег: необязателен


<!ATTLIST (THEAD|TBODY|TFOOT)          -- раздел таблицы --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- горизонтальное выравнивание в ячейках --
  %cellvalign;                         -- вертикальное выравнивание в ячейках --
  >

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
  • align, char, charoff, valign (выравнивание ячейки)

Строки таблицы могут группироваться в заголовки, нижние заголовки и один или несколько разделов тела таблицы с помощью элементов THEAD, TFOOT и TBODY соответственно. Это подразделение позволяет агентам пользователей поддерживать прокрутку тела таблицы независимо от заголовков. При печати длинных таблиц информация из заголовков может повторяться на каждой странице, на которой имеются данные таблицы.

Заголовки таблицы должны содержать информацию о столбцах таблицы. Тело таблицы должно содержать строки данных таблицы.

Если элементы THEAD, TFOOT и TBODY присутствуют, каждый из них содержит группу строк. Каждая группа строк должна содержать по крайней мере одну строку, определяемую элементом TR.

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


<TABLE>
<THEAD>
     <TR> ...заголовок...
</THEAD>
<TFOOT>
     <TR> ...нижний заголовок...
</TFOOT>
<TBODY>
     <TR> ...первая строка данных блока 1. ..
     <TR> ...вторая строка данных блока 1...
</TBODY>
<TBODY>
     <TR> ...первая строка данных блока 2...
     <TR> ...вторая строка данных блока 2...
     <TR> ...третья строка данных блока 2...
</TBODY>
</TABLE>

Элемент TFOOT должен располагаться до элемента TBODY в определении TABLE, чтобы агенты пользователей могли генерировать нижний заголовок до получения всех (возможно, многочисленных) строк данных. Ниже приводится сводка обязательных тегов и тегов, которые можно опустить:

  • Начальный тег TBODY всегда обязателен, если только таблица не содержит единственного тела без верхних и нижних заголовков. Конечный тег TBODY всегда можно опускать.
  • Начальные теги для элементов THEAD и TFOOT обязательны, если в таблице присутствуют верхний и нижний заголовки, но соответствующие конечные теги можно опускать.

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

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


<TABLE>
<THEAD>
     <TR> ...верхний заголовок...
<TFOOT>
     <TR> ...нижний заголовок...
<TBODY>
     <TR> ...первая строка данных блока 1...
     <TR> ...вторая строка данных блока 1...
<TBODY>
     <TR> ...первая строка данных блока 2...
     <TR> ...вторая строка данных блока 2...
     <TR> ...третья строка данных блока 2...
</TABLE>

Разделы THEAD, TFOOT и TBODYдолжны содержать одинаковое число столбцов.

11.2.4 Группы столбцов: элементы

COLGROUP и COL

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

Таблица может содержать одну неявную группу столбцов (элемент COLGROUP не разделяет столбцы) или любое число явных групп столбцов (каждая из которых отделяется одним экземпляром элемента COLGROUP).

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

Элемент
COLGROUP  

<!ELEMENT COLGROUP - O (col)*          -- группа столбцов таблицы -->
<!ATTLIST COLGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --  span        NUMBER         1         -- число столбцов в группе, используемое по умолчанию --  width       %MultiLength;  #IMPLIED  -- ширина для вложенных элементов COL, используемая по умолчанию --  %cellhalign;                         -- горизонтальное выравнивание в ячейках --  %cellvalign;                         -- вертикальное выравнивание в ячейках --  >

Начальный тег: обязателен, Конечный тег: необязателен

Определения атрибутов

span = число[CN]
Этот атрибут, значением которого должно быть целое число больше нуля, определяет число столбцов в группе. Значения означают следующее:
  • При отсутствии атрибута span каждый элемент COLGROUP определяет группу столбцов, состоящую из одного столбца.
  • Если для атрибута span установлено значение N > 0, текущий элемент COLGROUP определяет группу, содержащую N столбцов.

Агенты пользователей должны игнорировать этот атрибут, если элемент COLGROUP содержит один или несколько элементов COL.

width = multi-length[CN]

Этот атрибут определяет ширину каждого столбца в текущей группе, используемую по умолчанию. Кроме стандартных значений в пикселах, процентах и относительных значений, в этом атрибуте может использоваться специальная форма «0*» (ноль со звездочкой), которая означает, что ширина каждого столбца в группе должна быть минимальной, необходимой для размещения содержимого столбца. Подразумевается, что содержимое столбца известно до того, как можно будет корректно вычислить его ширину. Авторы должны знать, что использование «0*» не позволит агентам пользователей генерировать таблицу последовательно.

Этот атрибут переопределяется для любого столбца из группы, для которого значение атрибута width задано в элементе COL.

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,onkeydown, onkeyup (внутренние события)
  • align, char, charoff, valign (выравнивание ячейки)

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

  1. Атрибут span элемента (значение по умолчанию — 1) задает число столбцов в группе.
  2. Каждый элемент COL в COLGROUP представляет один или несколько столбцов в группе.

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


   <COLGROUP span="40">
   </COLGROUP>

чем: 


   <COLGROUP>
      <COL>
      <COL>
      ...все сорок элементов COL...
   </COLGROUP>

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


   <COLGROUP>
      <COL span="39">
      <COL>
   </COLGROUP>

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

Таблица в следующем примере содержит две группы столбцов. Первая группа включает 10 столбов, вторая — 5. Ширина по умолчанию для каждого столбца в первой группе — 50 пикселов. Ширина каждого столбца во второй группе — минимальная, необходимая для этого столбца.


<TABLE>
<COLGROUP span="10">
<COLGROUP span="5">
<THEAD>
<TR><TD> . ..
</TABLE>
Элемент
COL  

<!ELEMENT COL      - O EMPTY           -- столбец таблицы -->
<!ATTLIST COL                          -- группы и свойства столбцов --  %attrs;                              -- %coreattrs, %i18n, %events --  span        NUMBER         1         -- атрибут COL влияет на N столбцов --  width       %MultiLength;  #IMPLIED  -- ширина столбца --  %cellhalign;                         -- горизонтальное выравнивание в ячейках --  %cellvalign;                         -- вертикальное выравнивание в ячейках --  >

Начальный тег: обязателен, Конечный тег: запрещен

Определения атрибутов

span = число[CN]
Этот атрибут, значением которого должно быть целое число больше нуля, определяет число столбцов, «spanned» элементом COL; атрибуты элемента COL распространяются на все столбцы, которые он spans. Значение по умолчанию для этого атрибута — 1 (т.е. элемент COL означает один столбец). Если для атрибута span установлено значение N > 1, атрибуты текущего элемента COL распространяются на следующие N-1 столбец.
width = multi-length[CN]
Этот атрибут определяет ширину каждого столбца, spanned текущим элементом COL, используемую по умолчанию. Он имеет то же значение, что и атрибут width для элемента COLGROUP и имеет над ним приоритет.

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
  • align, char, charoff, valign (выравнивание в ячейках)

Элемент COL позволяет авторам группировать определения атрибутов для столбцов таблицы. Атрибут COL не группирует столбцы структурно — эту роль играет элемент COLGROUP. Элементы COL являются пустыми и служат только для поддержания атрибутов. Они могут находиться внутри или вне явной группы столбцов (т.е. элемента COLGROUP).

Атрибут width для элемента COL означает ширину каждого столбца в span элемента.

Подсчет числа столбцов в таблице 

Имеется два способа определения числа столбцов в таблице (в порядке старшинства):

  1. Если элемент TABLE включает элементы COLGROUP или COL, агенты пользователей должны подсчитывать число столбцов, суммируя следующие цифры:
    • Для каждого элемента COL — значение его атрибута span (по умолчанию 1).
    • Для каждого элемента COLGROUP, содержащего по крайней мере один элемент COL — игнорировать атрибут span для элемента COLGROUP. Для каждого элемента COL выполнить вычисление из шага 1.
    • Для каждого пустого элемента COLGROUP — значение его атрибута span (по умолчанию 1).
  2. В противном случае, если элемент TABLE не содержит элементов COLGROUP или COL, агенты пользователей определять число столбцов из того, что необходимо для строк. Число столбцов равно число столбцов, необходимых строке с наибольшим числом столбцов, включая ячейки, span несколько столбцов. Для любой строки, число столбцов в которой меньше, конец этой строки будет дополняться пустыми ячейками. «Конец» строки зависит от направления таблицы.

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

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

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


<TABLE>
<COLGROUP span="3"></COLGROUP>
<TR><TD> ...
...строки...
</TABLE>

<TABLE>
<COLGROUP>
<COL>
<COL span="2">
</COLGROUP>
<TR><TD> ...
...строки...
</TABLE>

<TABLE>
<COLGROUP>
<COL>
</COLGROUP>
<COLGROUP span="2">
<TR><TD> ...
...строки...
</TABLE>

<TABLE>
<TR>
  <TD><TD><TD>
</TR>
</TABLE>
Подсчет ширины столбцов 

Авторы могут указывать ширину столбцов тремя способами:

Фиксированная
Указание фиксированной ширины дается в пикселах (например, width=»30″). Использование фиксированной ширины позволяет использовать последовательную генерацию.
В процентах
Указание ширины в процентах (например, width=»20%») означает процент горизонтального пространства, доступного для таблицы (между текущим левым и правым полями, включая floats). Помните, что это пространство не зависит от самой таблицы, поэтому указание ширины в процентах позволяет использовать последовательную генерацию.
Пропорциональная
Указание пропорциональной ширины (например, width=»3*») означает число частей горизонтального пространства, необходимого для таблицы. Если ширина таблицы определяется как фиксированное значение (с помощью атрибута width элемента TABLE), агенты пользователей могут генерировать таблицу последовательно и с указанием пропорциональной ширины.

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

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

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

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

Когда агент пользователя (визуальный) получит данные таблицы, доступное горизонтальное пространство будет распределяться агентом пользователя следующим образом: сначала агент пользователя распределит 30 пикселов на первый и второй столбец. Затем будет зарезервировано минимальное пространство, необходимое для третьего столбца. Оставшееся горизонтальное пространство будет разделено на шесть равных частей (поскольку 2* + 1* + 3* = 6 частей). Четвертый столбец (2*) получит две таких части, пятый (1*) — одну, а шестой — (3*) три.

    
<TABLE>
<COLGROUP>
   <COL>
<COLGROUP>
   <COL>
   <COL>
   <COL>
<COLGROUP align="center">
   <COL>
   <COL align="char" char=":">
<THEAD>
<TR><TD> ...
...строки...
</TABLE>

Для атрибута align во второй группе столбцов мы установили значение «center». Все ячейки в каждом столбце этой группы будут наследовать это значение, но могут переопределять его. В действительности последний элемент COL делает именно это, потому что в нем указано, что каждая ячейка столбца, которым он управляет, будет выровнена с использованием символа «:».

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

    
<TABLE>
<COLGROUP span="10">
<COLGROUP>
   <COL>
   <COL>
<THEAD>
<TR><TD> ...
...строки...
</TABLE>

Первые десять столбцов имеют ширину 15 пикселов каждый. Последние два столбца получают по половине из оставшихся 50 пикселов. Помните, что элемент COL расположен так, что значение id можно указать только для последних двух столбцов.

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

11.2.5 Строки таблицы: элемент

TR 
<!ELEMENT TR       - O (TH|TD)+        -- строка таблицы -->
<!ATTLIST TR                           -- строка таблицы --  %attrs;                              -- %coreattrs, %i18n, %events --  %cellhalign;                         -- горизонтальное выравнивание в ячейках --  %cellvalign;                         -- вертикальное выравнивание в ячейках --  >

Начальный тег: обязателен, Конечный тег: не обязателен

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле )
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,onkeyup (внутренние события)
  • align, char, charoff, valign (выравнивание в ячейках)

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

Эта простая таблица состоит из трех строк, каждая из которых начинается с элемента TR:


<TABLE summary="В этой таблице показан график числа
                   чашек кофе, выпиваемых каждым сенатором, тип
                   кофе (без кофеина или обычный) и наличие сахара.">
<CAPTION>Сколько чашек кофе выпивает каждый сенатор</CAPTION>
<TR> ...Строка заголовка...
<TR> ...Первая строка данных...
<TR> ...Вторая строка данных...
...продолжение таблицы...
</TABLE>

11.2.6 Ячейки таблицы: элементы

TH и TD 

<!ELEMENT (TH|TD)  - O (%flow;)*       -- ячейка заголовка таблицы, ячейка данных таблицы -->

<!-Для большинства таблиц атрибут scope проще, чем атрибут axes -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">

<!-- TH используется для заголовков, TD - для данных, но для ячеек, служащих и тем, и другим используйте TD -->
<!ATTLIST (TH|TD)                      -- заголовок ячейки данных --  %attrs;                              -- %coreattrs, %i18n, %events --  abbr        %Text;         #IMPLIED  -- сокращение для ячейки заголовка --  axis        CDATA          #IMPLIED  -- группы имен связанных заголовков --  headers     IDREFS         #IMPLIED  -- список id для ячеек заголовков --  scope       %Scope;        #IMPLIED  -- область ячеек заголовков --  rowspan     NUMBER         1         -- число строк, spanned ячейкой --  colspan     NUMBER         1         -- число столбцов, spanned ячейкой --  %cellhalign;                         -- горизонтальное выравнивание в ячейках --  %cellvalign;                         -- вертикальное выравнивание в ячейках --
  >

Начальный тег: обязателен, Конечный тег: не обязателен

Определения атрибутов

headers = idrefs[CS]
В этом атрибуте указывается список ячеек заголовков, предоставляющих заголовочную информацию для текущей ячейки данных. Значением этого атрибута является разделенный пробелами список названий ячеек; имена ячейкам должны даваться с помощью атрибута id. Авторы обычно используют атрибут headers с целью помочь невизуальным агентам пользователей в генерации заголовков ячеек данных (например, заголовок произносится перед прочтением данных ячейки), но этот атрибут может также использоваться вместе с таблицами стилей. См. также атрибут scope.
scope = имя области действия [CI]
Этот атрибут определяет набор ячеек данных, для которых заголовочная информация задается текущим заголовком. Этот атрибут может использоваться вместо атрибута a href=»tables.html#adef-headers»>headers, особенно в простых таблицах. Если этот атрибут используется, он должен иметь одно из следующих значений:
  • row: В ячейке представлена заголовочная информация для оставшейся части строки, в которой содержится эта ячейка (см. также раздел о направлении таблиц).
  • col: В текущей ячейке представлена заголовочная информация для оставшейся части столбца, в котором содержится эта ячейка.
  • rowgroup: В ячейке представлена заголовочная информация для оставшейся группы строк, в которой содержится эта ячейка.
  • colgroup: В ячейке представлена заголовочная информация для оставшейся группы столбцов, в которой содержится эта ячейка.
abbr = текст [CS]
Этот атрибут следует использовать для представления сокращенной формы содержимого ячейки; он может генерироваться агентами пользователей в подходящий момент вместо содержимого ячейки. Сокращенные имена должны быть короче, и агенты пользователей могут повторять их. Например, синтезаторы речи могут генерировать сокращенные заголовки, относящиеся к определенной ячейке, перед генерацией содержимого ячейки.
axis = cdata [CI]
Этот атрибут может использоваться вместо ячейки в концептуальных категориях, которая может использоваться для формирования axes в n-мерном пространстве. Агенты пользователей могут давать пользователям доступ к этим категориям (например, пользователь может запрашивать у агента все ячейки, принадлежащие к определенной категории, агент пользователя может представлять таблицу в форме оглавления и т.д.). Подробнее см. в разделе о категоризации ячеек. Значением этого атрибута является список имен категорий, разделенных запятыми.
rowspan = число [CN]
Этот атрибут определяет число строк, spanned текущей ячейкой. По умолчанию используется значение один («1»). Значение ноль («0») означает, что ячейка spans все строки от текущей до последней строки таблицы.
colspan = число [CN]
Этот атрибут определяет число столбцов, spanned текущей ячейкой. По умолчанию используется значение один («1»). Значение ноль («0») означает, что ячейка spans все столбцы от текущего до последнего столбца таблицы.
nowrap [CI]
Нежелателен. Если этот логический атрибут используется, он сообщает визуальным агентам пользователей о необходимости отключить автоматическое разбиение текста для этой ячейки. Для разбиения строк вместо этого атрибута должны использоваться таблицы стилей. Примечание. при невнимательном использовании этот атрибут может привести к тому, что ячейки будут очень широкими.
width = пикселы [CN]
Нежелателен. Этот атрибут дает агентам пользователей рекомендуемую ширину ячейки.
height = пикселы [CN]
Нежелателен. Этот атрибут дает агентам пользователей рекомендуемую высоту ячейки.

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле )
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
  • bgcolor (цвет фона)
  • align, char, charoff, valign (выравнивание в ячейках)

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

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

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

Элемент TD определяет ячейку, содержащую данные.

Ячейка может быть пустой (т.е. не содержать данных).

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


<TABLE summary="В этой таблице показан график числа
                   чашек кофе, выпиваемых каждым сенатором, тип
                   кофе (без кофеина или обычный) и наличие сахара.">
<CAPTION>Сколько чашек кофе выпивает каждый сенатор</CAPTION>
<TR>
   <TH>Имя</TH>
   <TH>Число чашек</TH>
   <TH>Тип кофе</TH>
   <TH>Сахар?</TH>
<TR>
   <TD>Т. Секстон</TD>
   <TD>10</TD>
   <TD>Эспрессо</TD>
   <TD>Нет</TD>
<TR>
   <TD>Дж.  Диннен</TD>
   <TD>5</TD>
   <TD>Без кофеина</TD>
   <TD>Да</TD>
</TABLE>

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


Имя                 Число чашек            Тип кофе                     Сахар?
Т. Секстон    10         Эспрессо         Нет
Дж. Диннен    5          Без кофеина       Да
Ячейки, span несколько строк или столбцов 

Ячейки могут span несколько строк или столбцов. Число строк или столбцов, spanned ячейкой, устанавливается с помощью атрибутов rowspan и colspan элементов TH и TD.

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


<TABLE border="1">
<CAPTION> Сколько чашек кофе выпивает каждый сенатор </CAPTION>
<TR><TH>Имя<TH>Число чашек<TH>Тип кофе<TH>Сахар?
<TR><TD>Т.  Секстон<TD>10<TD>Эспрессо<TD>Нет
<TR><TD>Дж. Диннен<TD>5<TD>Без кофеина<TD>Да
<TR><TD>А. Сориа<TD colspan="3"><em>Нет данных</em>
</TABLE>

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


Сколько чашек кофе выпивает каждый сенатор
 ----------------------------------------------
 |   Имя    |Число чашек|Тип кофе      |Сахар?|
 ----------------------------------------------
 |Т. Секстон|10         |Эспрессо      |Нет   |
 ----------------------------------------------
 |Дж. Диннен|5          |Без кофеина   |Да    |
 ----------------------------------------------
 |А. Сориа  |Нет данных                       |
 ----------------------------------------------

В следующем примере показано (с помощью границ таблицы), как определения ячеек, span несколько строк или столбцов, влияют на определения следующих ячеек. Рассмотрите следующее определение таблицы:


<TABLE border="1">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

Поскольку ячейка «2» spans первую и вторую строки, определение второй строки будет принято во внимание. Таким образом, второй элемент TD в строке два в действительности определяет третью ячейку строки. Визуально на терминале таблица может генерироваться следующим образом:


-------------
| 1 | 2 | 3 | 
----|   |----
| 4 |   | 6 |
----|---|----
| 7 | 8 | 9 |
-------------

а графический агент пользователя может представить ее так:

Помните, что, если элемент TD, определяющий ячейку «6», опущен, агенты пользователя будут добавлять дополнительную пустую ячейку, чтобы заполнить строку.

Точно так же в следующем определении таблицы:


<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2">4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

ячейка «4» spans два столбца, так что второй элемент TD в строке на самом деле определяет третью ячейку («6»):


-------------
| 1 | 2 | 3 | 
--------|----
| 4     | 6 |
--------|----
| 7 | 8 | 9 |
-------------

Графический агент пользователя может представить это следующим образом:

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

В следующем примере недопустимого использования показано, как можно создать перекрывающиеся ячейки. В этой таблице ячейка «5» spans две строки, а ячейка «7» spans два столбца, так что они обе используют ячейку между «7» и «9»:


<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD>4 <TD rowspan="2">5 <TD>6
<TR><TD colspan="2">7 <TD>9
</TABLE>

Примечание. В следующих разделах описываются атрибуты таблиц HTML, относящиеся к визуальному форматированию. Хотя таблицы стилей предлагают лучшие возможности управления визуальным форматированием таблиц, во время написания этой спецификации в [CSS1] не было механизмов для управления всеми аспектами визуального форматирования таблиц.

В HTML 4. 0 имеются механизмы для управления:

  • стилями границ
  • горизонтальным и вертикальным выравниванием содержимого ячеек
  • и полями ячейки

11.3.1 Границы и rules

Следующие атрибуты влияют на внутренние кадры и внутренние rules таблицы.

Определения атрибутов

frame = void|above|below|hsides|lhs|rhs|vsides|box|border [CI]
Этот атрибут указывает, какие стороны кадра, окружающего таблицу, будут видимы. Возможные значения:
  • void: Сторон нет. Это значение используется по умолчанию.
  • above: Только верхняя часть.
  • below: Только нижняя часть.
  • hsides: Только верхняя и нижняя часть.
  • vsides: Только левая и правая части.
  • lhs: Только левая часть.
  • rhs: Только права часть.
  • box: Все четыре части.
  • border: Все четыре части.
rules = none|groups|rows|cols|all [CI]
Этот атрибут указывает, какие rules будут отображаться между ячейками. Генерация rules зависит от агента пользователя. Возможные значения:
  • none: Нет rules. Это значение используется по умолчанию.
  • groups: Rules отображаются только между группами строк (см. THEAD, TFOOT, and TBODY) и группами столбцов (см. COLGROUP and COL).
  • rows: Rules отображаются только между строками.
  • cols: Rules отображаются только между столбцами.
  • all: Rules отображаются между строками и столбцами.
border = пикселы [CN]
Этот атрибут задает ширину (только в пикселах) кадра вокруг таблицы (подробнее об этом атрибуте см. в Примечании ниже).

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


<TABLE border="1" 
       summary="В этой таблице приведены данные
                о числе чашек кофе, потребляемом каждым 
                сенатором, типе кофе (без кофеина или обычный) 
                и наличии сахара.">
<CAPTION>Сколько чашек кофе выпивает каждый сенатор</CAPTION>
<TR>
   <TH>Имя</TH>
   <TH>Число чашек</TH>
   <TH>Тип кофе</TH>
   <TH>Сахар?</TH>
<TR>
   <TD>Т. Секстон</TD>
   <TD>10</TD>
   <TD>Эспрессо</TD>
   <TD>Нет</TD>
<TR>
   <TD>Дж.  Диннен</TD>
   <TD>5</TD>
   <TD>Без кофеина</TD>
   <TD>Да</TD>
</TABLE>

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


<TABLE border="5" frame="vsides" rules="cols">
<TR> <TD>1 <TD>2 <TD>3
<TR> <TD>4 <TD>5 <TD>6
<TR> <TD>7 <TD>8 <TD>9
</TABLE>

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

  • Настройка border=»0″ подразумевает frame=»void» и, если не указано другое, rules=»none».
  • Другие значения border предполагают frame=»border» и, если не указано другое, rules=»all».
  • Значение «border» в начальном теге элемента TABLE должно интерпретироваться как значение атрибута frame. Предполагается, что rules=»all» и используется некоторое стандартное значение (не нулевое) для атрибута border.

Например, следующие определения эквивалентны:


<TABLE border="2">
<TABLE border="2" frame="border" rules="all">

следующим:


<TABLE border>
<TABLE frame="border" rules="all">

Примечание. Атрибут border также определяет отображение границы для элементов OBJECT и IMG, но принимает для этих элементов различные значения.

11.3.2 Горизонтальное и вертикальное выравнивание

Для различных элементов таблицы можно установить следующие атрибуты (см. их определения).


<!- атрибуты горизонтального выравнивания содержимого ячейки -->
<!ENTITY % cellhalign  "align      (left|center|right|justify|char) #IMPLIED   char       %Character;    #IMPLIED  -- символы выравнивания, например char=':' --   charoff    %Length;       #IMPLIED  -- отступ символа выравнивания --"  ><!-атрибуты вертикального выравнивания содержимого ячейки --><!ENTITY % cellvalign  "valign     (top|middle|bottom|baseline) #IMPLIED"  >

Определения атрибутов

align = left|center|right|justify|char [CI]
Этот атрибут задает выравнивание данных и выключку текста в ячейке. Возможные значения:
  • left: Выравнивание данных по левому краю/выключка текста влево. Это значение используется по умолчанию.
  • center: Выравнивание данных по центру/выключка текста по центру. Это значение используется по умолчанию в заголовках таблиц.
  • right: Выравнивание данных по правому краю/выключка текста вправо.
  • justify: Выключка по обоим краям.
  • char:Выравнивание текста вокруг указанного символа.
valign = top|middle|bottom|baseline [CI]
Этот атрибут задает вертикальное положение данных в ячейке. Возможные значения:
  • top: Данные ячейки сдвигаются вверх.
  • middle: Данные ячейки центрируются вертикально. Это значение используется по умолчанию.
  • bottom: Данные в ячейке сдвигаются вниз.
  • baseline: Во всех ячейках строки, в которой находится ячейка, для которой установлен атрибут valign, текст должен располагаться так, чтобы первая строка оказывалась на базовой линии, общей для всех ячеек в строке. Это ограничение не применяется к последующим текстовым строкам в этой ячейке.
char = символ [CN]
Этот атрибут определяет отдельный символ во фрагменте текста, служащий осью для выравнивания. По умолчанию в качестве значения этого атрибута используется символ десятичной точки для текущего языка, установленного в соответствии с атрибутом lang (например, точка («.») в английском языке и запятая («,») во французском). Агенты пользователя не обязательно должны поддерживать этот атрибут.
charoff = длина [CN]
Если этот атрибут задан, он определяет отступ первого экземпляра символа выравнивания в каждой строке. Если в строек нет символа выравнивания, она горизонтально сдвигается до конца в позиции выравнивания.

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

В этом примере денежные единицы выровнены по десятичной точке. Мы явно установили выравнивание по символу «.». 


<TABLE border="1">
<COLGROUP>
<COL><COL align="char" char=".">
<THEAD>
<TR><TH>Овощи <TH>Цена за кг
<TBODY>
<TR><TD>Lettuce        <TD>$1
<TR><TD>Silver carrots <TD>$10. 50
<TR><TD>Golden turnips <TD>$100.30
</TABLE>

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


------------------------------
|   Овощи      |Цена за кг   |
|--------------|-------------|
|Lettuce       |        $1   |
|--------------|-------------|
|Silver carrots|       $10.50|
|--------------|-------------|
|Golden turnips|      $100.30|
------------------------------

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

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

Наследование параметров выравнивания 

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

Приоритет (от высшего к низшему) атрибутов align, char и charoff следующий:

  1. Атрибут выравнивания, установленный для элемента в данных ячейки (например, P).
  2. Атрибут выравнивания, установленный в ячейке (TH и TD).
  3. Атрибут выравнивания, установленный в элементе группировки столбцов (COL и COLGROUP). Если ячейка является частью span из нескольких столбцов, свойство выравнивания наследуется от определения ячейки в начале span.
  4. Атрибут выравнивания, установленный в элементе строки или группировки строк(TR, THEAD, TFOOT и TBODY). Если ячейка является частью span из нескольких строк, свойство выравнивания наследуется от определения ячейки в начале span.
  5. Атрибут выравнивания, установленный в таблице(TABLE).
  6. Значение выравнивания по умолчанию.

Приоритет (от высшего к низшему) атрибута valign (а также других унаследованных атрибутов lang, dir и style) следующий:

  1. Атрибут, установленный для элемента в данных ячейки (например, P).
  2. Атрибут, установленный для ячейки (TH и TD).
  3. Атрибут, установленный для элемента строки или группировки строк (TR, THEAD, TFOOT и TBODY). Если ячейка является частью span из многих строк, значение атрибута наследуется от определения ячейки в начале span.
  4. Атрибут, установленный для элемента группировки столбцов (COL и COLGROUP). Если ячейка является частью span из многих столбцов, значение атрибута наследуется от определения ячейки в начале span.
  5. Атрибут, установленный для таблицы(TABLE).
  6. Значение атрибута по умолчанию.

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

Выравнивание ячеек по умолчанию зависит от агента пользователя. Однако агенты пользователя должны подставлять атрибут по умолчанию соответственно текущем направлению (то есть не просто «left» во всех случаях).

Агенты пользователя, не поддерживающие значение «justify» атрибута align должны использовать значение, соответствующее направлению.

Примечание. Помните, что ячейка может наследовать атрибут не от родителя, а от первой ячейки в span. Это является исключением из общих правил наследования атрибутов.

11.3.3 Поля ячейки

Определения атрибутов

cellspacing = длина [CN]
Этот атрибут определяет пространство, которое агент пользователя должен оставить между левой стороной таблицы и левым краем крайнего левого столбца, верхней границей таблицы и верхним краем самой верхней строки и так далее для правой и нижней границ таблицы. Этот атрибут также определяет пространство между ячейками.
cellpadding = длина [CN]
Этот атрибут определяет пространство между границей ячейки и ее содержимым. Если значение этого атрибута указано в пикселах, все четыре поля должны иметь этот размер. Если значение атрибута указано в процентах, верхнее и нижнее поля должны быть отделены от содержимого на одинаковый процент доступного вертикального пространства, а левое и правое поля должны быть отделены от содержимого на одинаковый процент доступного горизонтального пространства.

Эти два атрибута управляют расстоянием между ячейками и внутри них. Они объясняются на следующей иллюстрации:

В следующем примере атрибут cellspacing задает расстояние в двадцать пикселов между ячейками и от края таблицы. Атрибут cellpadding определяет, что верхнее и нижнее поля ячейки отделяются от содержимого ячейки на 10% доступного вертикального пространства (всего 20%). Точно так же, левое и правое поле ячейки будут отделены от содержимого на 10% доступного горизонтального пространства (всего 20%).


<TABLE cellspacing="20" cellpadding="20%">
<TR> <TD>Данные1 <TD>Данные2 <TD>Данные3
</TABLE>

Если таблица или данный столбец имеет фиксированную ширину, cellspacing и cellpadding могут занимать больше пространства, чем назначено. Агенты пользователей могут давать этим атрибутам приоритет над атрибутом width в случае конфликта, но они не обязательно должны это делать.

11.4.1 Связь информации заголовка с ячейками данных

Невизуальные агенты пользователей, такие как синтезаторы речи и устройства на базе азбуки Бройля, могут использовать следующие атрибуты элементов TD и TH для более intuitive генерации ячеек таблицы:

  • Для данной ячейки данных в атрибуте headers перечислено, в каких ячейках находится pertinent информация заголовка. С этой целью каждая ячейка заголовка должна получить имя с использованием атрибута id. Помните, что не всегда возможно явно разделить ячейки на заголовки и данные. В таких ячейка следует использовать элемент TD вместе с атрибутами id или scope.
  • Для данной ячейки заголовка атрибутscope сообщает агенту пользователя ячейки данных, информация для которых указывается этим заголовком. Авторы могут использовать этот атрибут вместо headers в зависимости от того, что более удобно; эти два атрибута имеют одну и ту же функцию. Атрибут headers обычно нужен, если заголовки помещаются в нестандартном положении по отношению к данным, к которым они применяются.
  • Атрибут abbr задает сокращенный заголовок для ячеек заголовков, так что агенты пользователя могут быстрее генерировать информацию заголовка.

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


<TABLE border="1" 
       summary="В этой таблице приводится информация о том, сколько
                чашек кофе выпивает каждый сенатор, о типа кофе
                (без кофеина или обычный) и о сахаре.">
<CAPTION>Сколько чашек кофе выпивает каждый сенатор</CAPTION>
<TR>
   <TH>Имя</TH>
   <TH>Сколько</TH>
   <TH abbr="Тип">Тип кофе</TH>
   <TH>Сахар?</TH>
<TR>
   <TD headers="t1">Т.  Секстон</TD>
   <TD headers="t2">10</TD>
   <TD headers="t3">Эспрессо</TD>
   <TD headers="t4">Нет</TD>
<TR>
   <TD headers="t1">Дж. Диннен</TD>
   <TD headers="t2">5</TD>
   <TD headers="t3">Без кофеина</TD>
   <TD headers="t4">Да</TD>
</TABLE>

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


Заголовок: Сколько чашек кофе выпивает каждый сенатор
Summary: В этой таблице приводится информация о том, сколько
         чашек кофе выпивает каждый сенатор, о типа кофе
         (без кофеина или обычный) и о сахаре.
Имя: Т. Секстон,   Сколько: 10,   Тип: Эспрессо,    Сахар: Нет
Имя: Дж. Диннен,   Сколько: 5,    Тип: Без кофеина, Сахар: Да

Заметьте, что заголовок «Тип кофе» сокращается до «Тип» с помощью атрибута abbr.

Вот тот же пример, использующий атрибут scope вместо атрибута headers. Обратите внимание на значение «col» для атрибута scope, означающее «все ячейки в текущем столбце»:


<TABLE border="1" 
       summary="В этой таблице приводится информация о том, сколько
                чашек кофе выпивает каждый сенатор, о типа кофе
                (без кофеина или обычный) и о сахаре.">
<CAPTION>Сколько чашек кофе выпивает каждый сенатор</CAPTION>
<TR>
   <TH scope="col">Имя</TH>
   <TH scope="col">Сколько</TH>
   <TH scope="col" abbr="Тип">Тип кофе</TH>
   <TH scope="col">Сахар?</TH>
<TR>
   <TD>Т. Секстон</TD>
   <TD>10</TD>
   <TD>Эспрессо</TD>
   <TD>Нет</TD>
<TR>
   <TD>Дж. Диннен</TD>
   <TD>5</TD>
   <TD>Без кофеина</TD>
   <TD>Да</TD>
</TABLE>

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


<TABLE border="1" cellpadding="5" cellspacing="2"
  summary="Исторические курсы, предлагаемые округа Бат,
           упорядоченные по названию, преподавателю, описанию, 
           коду и стоимости">
  <TR>
    <TH colspan="5" scope="colgroup">Курсы - Бат, осень 1997 г. </TH>
  </TR>
  <TR>
    <TH scope="col" abbr="Название">Название курса</TH>
    <TH scope="col" abbr="Преподаватель">Преподаватель курса</TH>
    <TH scope="col">Описание</TH>
    <TH scope="col">Код</TH>
    <TH scope="col">Стоимость</TH>
  </TR>
  <TR>
    <TD scope="row">После Гражданской войны</TD>
    <TD>Доктор Джон Раутон</TD>
    <TD>
       В этом курсе изучаются turbulent годы в Англии после 1646 года.
    <EM>6 еженедельных занятий, начиная с понедельника, 13 октября.</EM>
    </TD>
    <TD>h37</TD>
    <TD>&pound;32</TD>
  </TR>
  <TR>
    <TD scope="row">Англо-саксонская Англия - введение</TD>
    <TD>Марк Коттл</TD>
    <TD>
       Однодневный курс - введение в раннесредневековый период
       Реконструкции англо-саксонского общества.  <EM>Суббота, 18
       октября.</EM>
    </TD>
    <TD>h38</TD>
    <TD>&pound;18</TD>
  </TR>
  <TR>
    <TD scope="row">Греция</TD>
    <TD>Валери Лоренц</TD>
    <TD>
     Колыбель демократии, философии, сердце театра, родина аргумента. Это могли сделать римляне, если бы греки не опередили их. <EM>Субботняя школа 25 октября 1997 года</EM>
    </TD>
    <TD>h40</TD>
    <TD>&pound;18</TD>
  </TR>
</TABLE>

Графический агент пользователя может сгенерировать это следующим образом:

Обратите внимание на использование атрибута scope со значением «row». Хотя первая ячейка в каждой строке содержит данные, а не заголовок, благодаря атрибуту scope ячейки данных выглядят как ячейки заголовка строки. Это позволяет синтезаторам речи указывать соответствующее название курса по запросу или произносить его непосредственно перед содержимым ячейки.

11.4.2 Категоризация ячеек

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

Пользователям может также понадобиться информация о нескольких ячейках, и в этом случае заголовочная информация, заданная на уровне ячейки (с помощью headers, scope, и abbr) может не соответствовать контексту. Рассмотрим следующую таблицу с классификацией расходов на еду, гостиницы и транспорт в двух пунктах (Сан-Хосе и Сиэтле) за несколько дней:

Пользователям понадобится извлечь информацию из таблицы в форме запросов:

  • «Сколько всего денег я потратил на еду?»
  • «Сколько я потратил на еду 25 августа?»
  • «Сколько всего денег я потратил в Сан-Хосе?»

Каждый запрос подразумевает вычисления, выполняемые агентом пользователя, которые могут затрагивать несколько или ни одной ячейки. Чтобы определить, например, расходы на еду 25 августа, агент пользователя должен знать, какие ячейки таблицы относятся к «Еде» (все эти ячейки), а какая к «Датам» (25 августа), и найти пересечение этих двух наборов.

Для принятия запроса такого типа модель таблиц HTML 4.0 позволяет авторам помещать заголовки и данные ячеек в категории. Например, в таблице расходов на командировку автор может сгруппировать ячейки заголовков «Сан-Хосе» и «Сиэтл» в категорию «Пункт», заголовки «Еда», «Гостиницы» и «Транспорт» в категорию «Расходы», а четыре дня в категорию «Дата». Тогда предыдущие три вопроса будут иметь следующее значение:

  • «Сколько всего денег я потратил на еду?» означает «Все ячейки данных из категории «Расходы=Еда»?
  • «Сколько я потратил на еду 25 августа?» означает «Все ячейки данных из категорий «Расходы=Еда» и «Дата=25-авг-1997»?
  • «Сколько всего денег я потратил в Сан-Хосе?» означает «Все ячейки данных из категорий «Расходы=Еда, Гостиницы, Транспорт» и «Пункт=Сан-Хосе»?

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


  <TH axis="пункт">Сан-Хосе</TH>

Любая ячейка, содержащая информацию, относящуюся к «Сан-Хосе», должна ссылаться на эту ячейку заголовка с помощью атрибута headers или scope. Таким образом, расходы на еду 25-авг-1997 должны иметь ссылку на атрибут id (значение которого здесь — «a6») ячейки заголовка «Сан-Хосе»: 

  
  <TD headers="a6">37.74</TD>

Каждый атрибут headers содержит список ссылок id. Авторы таким образом могут определять категории для данной ячейки с помощью данного ряда способов (или along any number of «headers», hence the name).

Ниже в таблице командировочных расходов указана информация о категориях: 


<TABLE border="1"
          summary="В этой таблице приводятся сведения о 
                   командировочных расходах в августе 
                   в Сан-Хосе и Сиэтле">
<CAPTION>
  Отчет о командировочных расходах
</CAPTION>
<TR>
  <TH></TH>
  <TH axis="расходы">Еда</TH>
  <TH axis="расходы">Гостиницы</TH>
  <TH axis="расходы">Транспорт</TH>
  <TD>итого</TD>
</TR>
<TR>
  <TH axis="пункт">Сан-Хосе</TH>
  <TH></TH>
  <TH></TH>
  <TH></TH>
  <TD></TD>
</TR>
<TR>
  <TD axis="дата">25-авг-97</TD>
  <TD headers="a6 a7 a2">37. 74</TD>
  <TD headers="a6 a7 a3">112.00</TD>
  <TD headers="a6 a7 a4">45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD axis="дата">26-авг-97</TD>
  <TD headers="a6 a8 a2">27.28</TD>
  <TD headers="a6 a8 a3">112.00</TD>
  <TD headers="a6 a8 a4">45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD>итого</TD>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH axis="пункт">Сиэтл</TH>
  <TH></TH>
  <TH></TH>
  <TH></TH>
  <TD></TD>
</TR>
<TR>
  <TD axis="дата">27-авг-97</TD>
  <TD headers="a10 a11 a2">96.25</TD>
  <TD headers="a10 a11 a3">109. 00</TD>
  <TD headers="a10 a11 a4">36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD axis="дата">28-авг-97</TD>
  <TD headers="a10 a12 a2">35.00</TD>
  <TD headers="a10 a12 a3">109.00</TD>
  <TD headers="a10 a12 a4">36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD>итого</TD>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Всего</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

Обратите внимание на то, что такая разметка таблицы также позволяет агентам пользователей не сбивать пользователей с толку ненужной информацией. Например, если синтезатор речи должен был произнести все цифры из столбца «Еда» этой таблицы в ответ на запрос «Все расходы на еду?», пользователь не смог бы отличить дневные расходы от итоговой суммы. С помощью тщательной категоризации данных авторы позволяют агентам пользователей делать важные семантические различия при генерации.

Конечно, авторы не ограничены в категоризации информации в таблице. В таблице командировочных расходов, например, мы можем ввести дополнительные категории «итого» и «всего».

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

Однако агенты пользователей, особенно синтезаторы речи, могут выделять информацию, общую для нескольких ячеек, являющихся результатами запроса. Например, если пользователь спрашивает «Сколько всего денег я потратил на еду в Сан-Хосе?», агент пользователя должен определить соответствующие ячейки (25-авг-1997: 37. 74, 26-авг-1997:27.28), а затем сгенерировать информацию. Агент пользователя может произнести следующую информацию: 


   Пункт: Сан-Хосе. Дата: 25-авг-1997. Расходы, Еда: 37.74
   Пункт: Сан-Хосе. Дата: 26-авг-1997. Расходы, Еда: 27.28

или более компактно: 


   Сан-Хосе, 25-авг-1997, Еда: 37.74
   Сан-Хосе, 26-авг-1997, Еда: 27.28

Еще более экономичная генерация может выделить еще более общую информацию и переупорядочить ее: 


   Сан-Хосе, Еда, 25-авг-1997: 37.74
                  26-авг-1997: 27.28

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

11.4.3 Алгоритм поиска заголовочной информации

В отсутствии заголовочной информации в атрибуте scope или headers агенты пользователей могут составлять эту информацию в соответствии со следующим алгоритмом. Целью алгоритма является нахождение упорядоченного списка заголовков. (В следующем описании алгоритма принято направление таблицы слева направо.)

  • Сначала выполняется поиск влево от позиции ячейки для определения ячейки заголовка строки. Затем выполняется поиск вверх для определения ячейки заголовка столбца. Поиск в заданном направлении прекращается, если достигнут край таблицы или обнаружена ячейка данных после ячейки заголовка.
  • Заголовки строк помещаются в список в том порядке, в котором они расположены в таблице. Для таблиц, направленных слева направо, заголовки помещаются слева направо.
  • Заголовки столбцов помещаются после заголовков строк, в том порядке, в каком они расположены в таблице, сверху вниз.
  • Если для ячейки заголовка установлен атрибут headers, заголовки, на которые ссылается этот атрибут, помещаются в список, и поиск для текущего направления прекращается.
  • Ячейки TD, в которых устанавливается атрибут axis, обрабатываются так же, как и ячейки заголовков.

В этом примере показаны сгруппированные строки и столбцы. Пример взят из книги «Разработка интернационального программного обеспечения» Надин Кэно.

В «формате ascii» следующая таблица:


<TABLE border="2" frame="hsides" rules="groups"
          summary="Поддержка кодовых страниц в различных версиях MS Windows.">
<CAPTION>ПОДДЕРЖКА КОДОВЫХ СТРАНИЦ В MICROSOFT WINDOWS</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>ИД кодовой<BR>страницы
<TH>Название
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3. 1 Восточноевропейская<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Кириллица<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 США (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Греческая<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Турецкая<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Иврит<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Арабская<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Балтийская<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Корейская (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>США MS-DOS<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Арабская (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Арабская (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Арабская (Прозрачная арабская)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Арабская (Прозрачная ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>

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


          ПОДДЕРЖКА КОДОВЫХ СТРАНИЦ В MICROSOFT WINDOWS 
=================================================================================
ИД кодовой| Название                       | ACP  OEMCP | Windows Windows Windows
Страницы  |                                |            |  NT 3. 1 NT 3.51    95
---------------------------------------------------------------------------------
   1200   | Unicode (BMP of ISO 10646)     |            |    X       X       *
   1250   | Windows 3.1 Восточноевропейская|  X         |    X       X       X
   1251   | Windows 3.1 Кириллица          |  X         |    X       X       X
   1252   | Windows 3.1 США (ANSI)         |  X         |    X       X       X
   1253   | Windows 3.1 Греческая          |  X         |    X       X       X
   1254   | Windows 3.1 Турецкая           |  X         |    X       X       X
   1255   | Иврит                          |  X         |                    X
   1256   | Арабская                       |  X         |                    X
   1257   | Балтийская                     |  X         |                    X
   1361   | Корейская (Johab)              |  X         |            **      X
-------------------------------------------------------------------------------
    437   | США MS-DOS                     |        X   |    X       X       X
    708   | Арабская (ASMO 708)            |        X   |                    X
    709   | Арабская (ASMO 449+, BCON V4)  |        X   |                    X
    710   | Арабская (Прозрачная арабская) |        X   |                    X
    720   | Арабская (Прозрачная ASMO)     |        X   |                    X
===============================================================================

Графический агент пользователя может сгенерировать ее следующим образом:

В данном примере показано, как можно использовать COLGROUP для группировки столбцов и установки выравнивания столбцов по умолчанию. Точно так же TBODY используется для группировки строк. Атрибуты frame и rules сообщают агенту пользователя, какие границы и rules должны генерироваться.

назад   далее   содержание   элементы   атрибуты   указатель



Таблицы html

Урок 10.

Создание html таблиц — это, пожалуй, самая сложная тема в курсе для начинающих. Таблицы можно применять во многих случаях. Основной каркас веб-страницы (шапка сайта, средняя часть, подвал) можно создать при помощи таблиц , либо блоков (слоев). Про блоки мы будем говорить в курсе «для продвинутых», а изучением html таблиц мы займемся прямо сейчас.

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

Создание таблицы html.

Таблица html создается при помощи тега &lttable&gt. Для того, чтобы создать в нашей таблице строку, используется тег &lttr&gt, все ячейки внутри этой строки будут создаваться тегом &lttd&gt. Получается что ячейки создаются внутри строки, а строка создается внутри таблицы. Соответственно тег &lttd&gt находится внутри тега &lttr&gt который находится внутри тега &lttable&gt. Все эти теги требуют закрытия.

Чтобы не запутаться давайте отдельно выпишем теги и их назначение:
&lttable&gt &lt/table&gt — тег создает таблицу.
&lttr&gt &lt/tr&gt — тег создает строку внутри таблицы.
&lttd&gt &lt/td&gt — тег создает ячейку внутри строки.

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

По умолчанию, таблица создается не имея никаких границ и очертаний, отображается только контент (текст). Для того чтобы задать границы, для тега &lttable&gt используется атрибут border. Значение для этого атрибута задается цифрой. Например, если дать значение 1, то толщина рамки таблицы будет 1px (пиксель), если дать значение 5, то толщина рамки будет 5px соответственно.

Теперь в качестве примера давайте зададим тегу &lttable&gt атрибут border и дадим ему значение 1. Вот что из этого получится:

У тега &lttable&gt кроме атрибута border есть и другие, давайте приступим к их рассмотрению.

Атрибуты тега &lttable&gt

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

height — с помощью этого атрибута задается высота таблицы, значение дается в пикселях. Если данный атрибут не задан, то высота таблицы растягивается по величине содержимого контента (текста).
Пример написания кода: &lttable&gt

width — с помощью этого атрибута задается ширина таблицы, значение дается в пикселях. Если данный атрибут не задан, то ширина таблицы растягивается по величине содержимого контента (текста).
Пример написания кода: &lttable&gt

bgcolor — атрибут для изменения цвета фона таблицы. В качестве значения для этого атрибута можно использовать любой цвет.
Пример написания кода: &lttable bgcolor=»yellow»&gt

align — атрибут для выравнивания таблицы.
Для данного атрибута могут быть заданы следующие значения:
left — выравнивает таблицу по левому краю.
right — выравнивает таблицу по правому краю.
center — выравнивает таблицу по центру.
Пример написания кода: &lttable align=»center»&gt

cellspacing — атрибут для изменения расстояния между ячейками, значение дается в пикселях.
ВНИМАНИЕ!
Если атрибут border для таблицы не задан или имеет значение 0, то по умолчанию атрибут cellspacing будет иметь значение 0. Пример Вы можете посмотреть на первом рисунке этого урока.
Если атрибут border задан и имеет любое значение отличное от 0 (1,2,3. ..), то по умолчанию атрибут cellspacing будет иметь значение 2. Пример Вы можете посмотреть на втором рисунке этого урока.
Пример написания кода: &lttable cellspacing=»10px»&gt

Атрибуты тега &lttr&gt

bgcolor — атрибут для изменения цвета фона ячеек. Атрибут будет действовать для всех ячеек находящихся в строке которой задан данный атрибут. В качестве значения для этого атрибута можно использовать любой цвет.
* Поясняю, чтобы Вы не запутались. Очень часто для разных тегов могут быть использованы одинаковые атрибуты. Например данный атрибут можно использовать как для тега &lttable&gt, так и для тега &lttr&gt. Если задать этот атрибут тегу &lttable&gt, то меняется цвет фона всей таблицы, а если задать атрибут тегу &lttr&gt, то измениться цвет фона ячеек отдельной строки.
Пример написания кода: &lttr bgcolor=»yellow»&gt

align — атрибут для выравнивания содержимого ячеек по горизонтали. Атрибут будет действовать для всех ячеек находящихся в строке которой задан данный атрибут. Этому атрибуту могут быть даны следующие значения:
left — выравнивает содержимое ячеек находящихся в строке по левому краю.
right — выравнивает содержимое ячеек находящихся в строке по правому краю.
center — выравнивает содержимое ячеек находящихся в строке по центру.
Пример написания кода: &lttr align=»center»&gt

valign — атрибут для выравнивания содержимого ячеек по вертикали. Атрибут будет действовать для всех ячеек находящихся в строке которой задан данный атрибут. Этому атрибуту могут быть даны следующие значения:
top — выравнивает содержимое ячеек находящихся в строке по верхнему краю.
middle — выравнивает содержимое ячеек находящихся в строке посередине.
bottom — выравнивает содержимое ячеек находящихся в строке по нижнему краю.
Пример написания кода: &lttr valign=»middle»&gt

Атрибуты тега &lttd&gt

height — с помощью этого атрибута задается высота ячейки, значение дается в пикселях. Если данный атрибут не задан, то высота ячейки растягивается по величине содержимого контента (текста). Если для всей таблицы (для тега &lttable&gt) задан атрибут height, а для ячейки (для тега &lttd&gt) данный атрибут не задан, то ячейка будет вытягиваться относительно заданной высоты для всей таблицы.
Пример написания кода: &lttd&gt

width — с помощью этого атрибута задается ширина ячейки, значение дается в пикселях. Если данный атрибут не задан, то ширина ячейки растягивается по величине содержимого контента (текста). Если для всей таблицы (для тега &lttable&gt) задан атрибут width, а для ячейки (для тега &lttd&gt) данный атрибут не задан, то ячейка будет вытягиваться относительно заданной ширины для всей таблицы.
Пример написания кода: &lttd&gt

bgcolor — атрибут для изменения цвета фона ячейки. В качестве значения для этого атрибута можно использовать любой цвет.
Пример написания кода: &lttd bgcolor=»yellow»&gt

align — атрибут для выравнивания содержимого ячейки по горизонтали. Этому атрибуту могут быть даны следующие значения:
left — выравнивает содержимое ячейки по левому краю.
right — выравнивает содержимое ячейки по правому краю.
center — выравнивает содержимое ячейки по центру.
Пример написания кода: &lttd align=»center»&gt

valign — атрибут для выравнивания содержимого ячейки по вертикали. Этому атрибуту могут быть даны следующие значения:
top — выравнивает содержимое ячейки по верхнему краю.
middle — выравнивает содержимое ячейки посередине.
bottom — выравнивает содержимое ячейки по нижнему краю.
Пример написания кода: &lttd valign=»middle»&gt

Применим знания на практике.

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

Теперь, на основе данных которые размещены на этой странице мы создадим таблицу. Давайте сделаем таблицу из 4 строк и 2-ух столбцов. Чтобы у нас получилось 2 столбца нам нужно будет в каждой строчке создавать по 2 ячейки.

Комментарии к коду:
1) Для тега &lttable&gt мы задали атрибут border и дали ему значение 1. Это означает, что ширина границ нашей таблицы 1 пиксель.
2) Еще для тега &lttable&gt мы задали атрибут cellspacing и дали ему значение 0. Это означает, что расстояние между нашими ячейками равно 0. Если бы мы не задали этот атрибут, то по умолчанию расстояние между ячейками составляло бы 2 пикселя.
3) Для 1-ой строки мы задали атрибут bgcolor и дали ему значение green. С помощью данного атрибута мы задали зеленый цвет фона всем ячейкам находящимся в этой строке.
4) Еще для 1-ой строки мы задали атрибут height и дали ему значение 50px. С помощью данного атрибута мы задали высоту ячеек первой строки. Данная строка будет выше, чем все другие, так как в нашем случае она является «шапкой» таблицы.
5) Для 1-ой ячейки первой строки мы задали атрибут width и дали ему значение 150px. С помощью этого атрибута мы задали ширину данной ячейки. Теперь внимание! Автоматически все ячейки которые располагаются под этой ячейкой, тоже будут иметь ширину 150px.
6) Тоже самое мы сделали и со 2-ой ячейкой первой строки, отличается только значение атрибута, для этой ячейки задана ширина 110px. Все нижние ячейки в этом столбце, соответственно, тоже будут иметь ширину 110px.
7) И для 1-ой и для 2-ой ячейки первой строки мы задали атрибут align и дали ему значение center. С помощью данного атрибута мы выравняли текст по центру ячеек.
8) Для других трех строк мы задали атрибут bgcolor и дали ему значение yellow. С помощью данного атрибута мы задали желтый цвет фона всем ячейкам этих строк.
9) Так же для этих трех строк мы задали одинаковую высоту с помощью тега height дав ему значение 30px.

Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

html — Установить постоянную ширину столбца таблицы независимо от количества текста в ее ячейках?

Спросил

Изменено 1 год, 3 месяца назад

Просмотрено 1,2 м раз

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

  • html
  • css
  • ширина столбца

4

Я немного поиграл с ним, потому что мне было трудно его понять.

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

Также полезно установить для свойства overflow значение hidden , чтобы предотвратить выход лишнего текста из таблицы.

Вы также должны оставить все границы и размеры для CSS.

Итак, вот что у меня есть:

 таблица {
  граница: 1px сплошной черный;
  макет таблицы: фиксированный;
  ширина: 200 пикселей;
}

й,
тд {
  граница: 1px сплошной черный;
  ширина: 100 пикселей;
  переполнение: скрыто;
} 
 <таблица>
  
    заголовок 1
    заголовок 234567895678657
  
  
    данные asdfasdfasdfasdfasdf
    данные 2

Вот это в JSFiddle

У этого парня была похожая проблема: Ширина ячеек таблицы — фиксированная ширина, перенос/усечение длинных слов

5

См. : http://www.html5-tutorials.org/tables/changing-column-width/

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

Например, если у вас три столбца:

 <таблица>
  
    <столбец>
    <столбец>
    <столбец>
  
  <тело>
    ...

7

Просто добавьте тег

внутрь или определите ширину внутри
. Это поможет вам. Ничто другое не работает.

например.

 
..............

5

Если вам нужен один или несколько столбцов с фиксированной шириной, в то время как другие столбцы должны изменять размер, попробуйте установить для min-width и max-width одно и то же значение.

1

Вам нужно написать это внутри соответствующего CSS

 table-layout:fixed;

3

Что я делаю:

  1. Установить ширину тд:

  2. Установите ширину td с помощью CSS:

     <тд>

  3. Снова установите ширину как максимальную и минимальную с помощью CSS:

     <тд>

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

..td_size {
  ширина: 200 пикселей;
  высота: 50 пикселей;
  максимальная ширина: 200 пикселей;
  минимальная ширина: 200 пикселей;
  максимальная высота: 50 пикселей;
  минимальная высота: 50 пикселей;
  **overflow:hidden;** /*(Необязательно) Это может быть полезно для некоторого содержимого переполнения*/
}

затем:

 <тд>

Поместите атрибут класса в любой , который вы хотите.

2

Установка этого:

 style="min-width:100px;"

Мне помогло.

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

CSS:

 .special_column { ширина: 120 пикселей; }

HTML:

 ...

0

Я использовал это

 . app_downloads_table tr td:first-child {
    ширина: 75%;
}
.app_downloads_table тр тд:последний ребенок {
    выравнивание текста: по центру;
}

3

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

HTML:

 <таблица>
  
    заголовок 1
    заголовок 234567895678657
  
  
    данные asdfasdfasdfasdfasdf
    данные 2

CSS

 стол{
    граница: 1px сплошной черный;
    макет таблицы: фиксированный;
    максимальная ширина: 600 пикселей;
    ширина: 100%;
}
й, тд {
    граница: 1px сплошной черный;
    переполнение: скрыто;
    максимальная ширина: 300 пикселей;
    ширина: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Согласно моему ответу здесь также можно использовать заголовок таблицы (который может быть пустым) и применить относительную ширину для каждой ячейки заголовка таблицы. Ширина всех ячеек в теле таблицы будет соответствовать ширине заголовка их столбца. Пример:

HTML 

 <таблица>
  
    
      <й>
      <й>
      <й>
      <й>
    
  
  <тело>
    
      <тд>1
      Некоторый текст...
      Май 2018
      Изменить
    
    
      <тд>2
      Другой текст...
      Апрель 2018
      Изменить

CSS 

 таблица {
  ширина: 600 пикселей;
  граница коллапса: коллапс;
}
тд {
  граница: 1px сплошная #999999;
}

Просмотр результата

В качестве альтернативы используйте colgroup , как предложено в ответе Hyathin.

Также помогает вставить последнюю «ячейку-заполнитель» с width:auto . Это займет оставшееся пространство, а все остальные размеры останутся такими, как указано.

У KAsun правильная идея. Вот правильный код…

 <тип стиля = "текст/CSS">
  th.first-col > div,
  td.first-col > div {
    переполнение: скрыто;
    белое пространство: nowrap;
    ширина: 100 пикселей
  }

<таблица>
  
очень длинный заголовок

  
очень длинный текст

0

Я использую элемент ::after в ячейке, где я хочу установить минимальную ширину независимо от присутствующего текста, например:

 .cell::после {
    содержание: "";
    ширина: 20 пикселей;
    дисплей: блок;
}

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

Я обнаружил, что ответ KAsun работает лучше, используя vw вместо px , например:

...............

Это был единственный стиль, который мне понадобился для настройки ширины столбца

Вам не нужно устанавливать "фиксированный" — все, что вам нужно, это установить переполнение: скрыто , так как задана ширина столбца.

1

Таблицы

Таблицы

предыдущие следующий содержание характеристики индекс

Содержимое

  • 17.1 Знакомство с таблицами
  • 17.2 Модель таблицы CSS
    • 17.2.1 Анонимные табличные объекты
  • 17.3 Столбцы
  • 17.4 Таблицы в модели визуального форматирования
    • 17.4.1 Положение и выравнивание заголовка
  • 17.5 Визуальное расположение содержимого таблицы
    • 17.5.1 Слои таблицы и прозрачность
    • 17.5.2 Алгоритмы ширины таблицы: свойство table-layout
      • 17.5.2.1 Фиксированная компоновка таблицы
      • 17.5.2.2 Автоматическая компоновка таблицы
    • 17.5.3 Алгоритмы высоты стола
    • 17.5.4 Выравнивание по горизонтали в столбце
    • 17.5.5 Динамические эффекты строк и столбцов
  • 17. 6 Границы
    • 17.6.1 Модель разделенных границ
      • 17.6.1.1 Границы и фон вокруг пустых ячеек: свойство «пустые ячейки»
    • 17.6.2 Модель разрушающейся границы
      • 17.6.2.1 Разрешение пограничных конфликтов
    • 17.6.3 Стили границ

В этой главе определяется модель обработки таблиц в CSS. Часть этой модели обработки является макетом. Для макета эта глава вводит два алгоритма; первый, фиксированный макет таблицы алгоритм, четко определенный, но второй, автоматическая верстка таблицы алгоритм, не полностью определен этой спецификацией.

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

Макет таблицы может быть используется для представления табличных отношений между данными. Авторы указывают эти отношения в документе язык и может указать их презентации с помощью CSS 2. 2.

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

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

Вот простой трехрядный, трехколоночный таблица, описанная в HTML 4:

<ТАБЛИЦА>
Это простая таблица 3x3

   Заголовок 1 Ячейка 1 Ячейка 2

   Заголовок 2 Ячейка 3 Ячейка 4

   Заголовок 3 Ячейка 5 Ячейка 6

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

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

th { выравнивание текста: по центру; вес шрифта: полужирный }

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

th { вертикальное выравнивание: базовая линия }
td {вертикальное выравнивание: посередине}

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

таблица {граница-коллапс: коллапс}
tr#row1 {граница: 3 пикселя сплошного синего цвета}
tr#row2 {граница: 1px сплошной черный}
tr#row3 {граница: 1px сплошной черный}

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

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

заголовок { сторона заголовка: вверху }

В предыдущем примере показано, как CSS работает с элементами HTML 4; в HTML 4 семантика различных элементов таблицы (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH и TD) четко определенный. В других языках документов (таких как XML-приложения) могут отсутствовать предопределенные элементы таблицы. Таким образом, CSS 2.2 позволяет авторам «сопоставлять» элементы языка документа с элементами таблицы через свойство «отображать». За например, следующее правило заставляет элемент FOO вести себя как HTML Элемент TABLE и элемент BAR действуют как элемент CAPTION:

FOO { отображение : таблица }
BAR { дисплей : заголовок таблицы }

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

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

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

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

таблица (В HTML: TABLE)
Указывает, что элемент определяет таблицу блочного уровня: это прямоугольный блок, участвующий в контексте форматирования блока.
встроенный стол (в HTML: TABLE)
Указывает, что элемент определяет таблицу встроенного уровня: это прямоугольный блок, участвующий во встроенном форматировании контекст).
таблица-строка (в HTML: TR)
Указывает, что элемент представляет собой строку ячеек.
таблица-строка-группа (В HTML: TBODY)
Указывает, что элемент группирует один или несколько ряды.
таблица-заголовок-группа (В HTML: THEAD)
Подобно ‘группе-строки-таблицы’, но для визуального форматирование, группа строк всегда отображается перед всеми остальными строками и группы строк, а также после любых верхних заголовков. Пользовательские агенты печати могут повторять строки заголовков на каждой странице, охваченной таблицей. Если таблица содержит несколько элементов с ‘display: table-header-group’, только первый отображается как заголовок; к остальным относятся так, как будто они имел «отображение: таблица-строка-группа».
таблица-нижний колонтитул (В HTML: TFOOT)
Подобно ‘группе-строки-таблицы’, но для визуального форматирование, группа строк всегда отображается после всех остальных строк и группы строк и перед любыми нижними заголовками. Пользовательские агенты печати могут повторять строки нижнего колонтитула на каждой странице, охваченной таблицей. Если таблица содержит несколько элементов с ‘display: table-footer-group’, только первый отображается как нижний колонтитул; к остальным относятся так, как будто они имел «отображение: таблица-строка-группа».
таблица-столбец (В HTML: COL)
Указывает, что элемент описывает столбец клетки.
таблица-колонка-группа (В HTML: COLGROUP)
Указывает, что элемент группирует один или несколько столбцы.
ячейка таблицы (в HTML: TD, TH)
Указывает, что элемент представляет ячейку таблицы.
таблица-заголовок (в HTML: CAPTION)
Указывает заголовок для таблицы. Все элементы с ‘display: table-caption’ должны отображаться, как описано в раздел 17.4.

Замененные элементы с этими «отображаемыми» значениями обрабатываются как их заданные типы отображения во время компоновки. Например, изображение, установленное на ‘display: table-cell’ заполнит доступное пространство ячейки, а его измерения могут способствовать алгоритмам определения размера таблицы, поскольку с обычной клеткой.

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

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

таблица {отображение: таблица}
tr {отображение: таблица-строка}
thead {отображение: таблица-заголовок-группа}
tbody {отображение: таблица-строка-группа}
tfoot {отображение: таблица-нижний колонтитул-группа}
col { отображение: таблица-столбец }
colgroup { отображение: таблица-столбец-группа }
td, th { display: table-cell }
заголовок {отображение: заголовок таблицы}

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

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

Языки документа, отличные от HTML, могут не содержать все элементы в табличной модели CSS 2.21. В этих случаях «пропавшие без вести» элементы должны быть приняты для того, чтобы табличная модель работала. Любой элемент таблицы автоматически сгенерирует необходимую анонимную таблицу объекты вокруг себя, состоящие как минимум из трех вложенных объектов соответствующий элементу table/inline-table, table-row элемент и элемент table-cell. Отсутствующие элементы генерируют анонимные объекты (например, анонимные поля в визуальной компоновке таблицы) по следующим правилам:

Для целей настоящих правил определены следующие термины:

Поле группы строк
Группа строк-таблиц, группа-заголовков таблиц или ‘группа нижнего колонтитула’
правильная дочерняя таблица
Блок «таблица-строка», блок группы строк, блок «таблица-столбец», поле «группа столбцов таблицы» или поле «заголовок таблицы».
правильная родительская строка таблицы
Блок «таблица» или «встроенная таблица» или блок группы строк
внутренний настольный ящик
Поле «таблица-ячейка», поле «таблица-строка», поле группы строк, поле «таблица-столбец» или поле «таблица-столбец-группа».
табличный контейнер
Поле «строка таблицы» или правильный родитель строки таблицы
подряд
Два одноуровневых блока считаются последовательными, если между ними нет промежуточных элементов. братьев и сестер, кроме, необязательно, анонимного встроенного кода, содержащего только белые места. Последовательность одноуровневых блоков является последовательной, если каждый блок в последовательности следует за предыдущим в последовательность.

В соответствии с настоящими правилами элементы вне потока представлены в виде встроенных элементов нулевой ширины и высоты. Их содержащие блоки выбираются соответственно.

Следующие шаги выполняются в три этапа.

  1. Удалите ненужные поля:
    1. Все дочерние блоки родительской таблицы-столбца рассматриваются как у них был «отображение: нет».
    2. Если дочерний элемент C родителя ‘table-column-group’ не поле «таблица-столбец», то оно обрабатывается так, как если бы оно имело ‘отображение: нет’.
    3. Если ребенок C табличного контейнера P представляет собой анонимное встроенное поле, содержащее только пробелы, и его непосредственно предшествующие и следующие братья и сестры, если any, являются правильными потомками таблицы P и являются либо «заголовок таблицы», либо внутренние поля таблицы, тогда обрабатывается так, как если бы у него было «отображение: нет». Ящик D есть правильный потомок таблицы A , если D может быть потомком A , не вызывая генерация любой промежуточной «таблицы» или «встроенной таблицы» коробки.
    4. Если блок B является анонимным инлайном, содержащим только пустое пространство и находится между двумя непосредственными братьями и сестрами, каждый из который является либо внутренним полем таблицы, либо «заголовком таблицы» box, то B обрабатывается так, как если бы он имел ‘display: никто’.
  2. Создать отсутствующие дочерние оболочки:
    1. Если дочерний элемент C поля «таблица» или «встроенная таблица» не является правильным дочерним элементом таблицы, затем создайте анонимный поле «таблица-строка» вокруг C и все последующие братья и сестры C , которые не являются правильными дочерними элементами таблицы.
    2. Если дочерний элемент C группы строк не является поле «таблица-строка», затем создайте анонимное поле «таблица-строка» около C и все последовательные братья и сестры из С , которые не являются полями таблицы.
    3. Если дочерний элемент C блока «строка таблицы» не является ‘table-cell’, затем создайте анонимное поле ‘table-cell’ около C и все последовательные братья и сестры из C , которые не являются ячейками таблицы.
  3. Создать отсутствующих родителей:
    1. Для каждой ячейки таблицы C в последовательности последовательные внутренние таблицы и элементы «заголовок таблицы», если C родитель не является «строкой таблицы», затем сгенерируйте анонимный «табличный ряд» вокруг C и все последовательные братья и сестры C , которые являются «табличной ячейкой» коробки.
    2. Для каждого правильного дочернего элемента таблицы C в последовательности последовательные правильные дети таблицы, если C misparented, затем создайте анонимную «таблицу» или бокс «inline-table» T вокруг C и все последовательные братья и сестры C , которые являются правильной таблицей дети. (Если родитель C является «встроенным» блоком, тогда T должен быть блоком «встроенной таблицы»; в противном случае это должен быть «настольный» ящик.)
      • «Таблица-строка» имеет неверный родитель, если ее родитель не является ни тем, ни другим. поле группы строк, ни поле «таблица» или «встроенная таблица».
      • Блок «таблица-столбец» имеет неверный родитель, если его родитель ни поле «таблица-столбец-группа», ни «таблица» или поле «встроенная таблица».
      • Поле группы строк, поле «группа столбцов таблицы» или Поле ‘table-caption’ имеет неправильный родительский статус, если его родитель ни поле «таблица», ни поле «встроенная таблица».

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


  Джордж
  4287
  1998

, потому что связанная таблица стилей:

HBOX {отображение: таблица-строка}
VBOX {отображение: таблица-ячейка}

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

<СТЕК>
  Это верхняя строка.
  Это средний ряд.
  Это нижняя строка.

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

STACK { отображение: встроенная таблица }
ROW {отображение: таблица-строка}
D { дисплей: встроенный; вес шрифта: жирнее }

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

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

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

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

col { стиль границы: нет сплошных }
таблица { стиль границы: скрытый }
col.totals { фон: синий }
таблица { раскладка таблицы: фиксированная }
col.totals { ширина: 5em }

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

В обоих случаях таблица создает блок-контейнер основного блока называется коробка для упаковки стола та содержит само поле таблицы и любые поля заголовков (в документе заказ). Блок таблицы представляет собой блок блочного уровня. который содержит внутренние табличные поля таблицы. Блоки подписей — это основные блоки блочного уровня, которые сохраняют свои собственные содержимое, отступы, поля и области границ и отображаются как обычно блочные блоки внутри блока оболочки таблицы. Размещаются ли поля с заголовками до или после поля таблицы определяется «стороной заголовка» собственности, как описано ниже.

Блок-оболочка таблицы является блочным для ‘display: table’ и встроенный уровень; для «отображения: встроенная таблица». Коробка для упаковки стола устанавливает контекст форматирования блока, а табличное поле устанавливает контекст форматирования таблицы. Столовая коробка (не обертка таблицы) используется при выполнении базовой линии вертикальное выравнивание для встроенной таблицы. Ширина обертки таблицы box — это ширина границы блока таблицы внутри него, как описано по разделу 17.5.2. Проценты по «ширине» и «высоте» в таблице относительно блока, содержащего оболочку таблицы, а не коробки оболочки таблицы сам.

Вычисленные значения свойств ‘position’, ‘float’, ‘margin-*’, «верхний», «правый», «нижний» и «левый» элементы таблицы используются для коробка-оболочка таблицы, а не коробка таблицы; все остальные значения ненаследуемые свойства используются в поле таблицы, а не в таблице оберточная коробка. (Если значения элемента таблицы не используются в table и table wrapper box, вместо них используются начальные значения. )

Схема таблицы с подписью над ней.

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

Имя: сторона заголовка
Значение: верх | дно | наследовать
Исходный: вверху
Применяется к: элементам ‘table-caption’
По наследству: да
Проценты: Н/Д
Медиа: визуальный
Расчетное значение:, как указано

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

сверху
Помещает поле заголовка над настольная коробка.
снизу
Помещает поле заголовка ниже настольная коробка.

Примечание: CSS2 описывает другую ширину и поведение горизонтального выравнивания. Это поведение будет введено в CSS3, использующий значения «сверху снаружи» и «снаружи снизу» на этом имущество.

Чтобы выровнять заголовок по горизонтали в поле заголовка, используйте свойство выравнивания текста.

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

заголовок { сторона заголовка: дно;
          ширина: авто;
          выравнивание текста: по левому краю}

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

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

  1. Каждое поле строки занимает одну строку ячеек сетки. Вместе, ряд блоки заполняют таблицу сверху вниз в том порядке, в котором они встречаются исходный документ (т. е. таблица занимает ровно столько строки, так как есть элементы строки).
  2. Группа строк занимает те же ячейки сетки, что и строки, в которые она входит. содержит.
  3. Поле столбца занимает один или несколько столбцов ячеек сетки. Столбец ящики располагаются рядом друг с другом в порядке их появления. поле первого столбца может быть как слева, так и справа, в зависимости от значения свойства ‘direction’ таблицы.
  4. Поле группы столбцов занимает те же ячейки сетки, что и столбцы это содержит.
  5. Ячейки могут занимать несколько строк или столбцов. (Хотя CSS 2.2 не определяет, как количество составных строк или столбцов определено, пользовательский агент может иметь специальные знания об источнике документ; будущее обновление CSS может предоставить способ выразить это знание синтаксиса CSS. ) Таким образом, каждая ячейка представляет собой прямоугольный блок, один или более ячеек сетки в ширину и высоту. Верхняя строка этого прямоугольника в строке, указанной родительской ячейкой. Прямоугольник должен быть таким как можно левее, но часть ячейки в первой столбец, который он занимает, не должен перекрываться ни с каким другим полем ячейки (т. е. ячейка, охватывающая строку, начиная с предыдущей строки), и ячейка должна быть справа от всех ячеек в той же строке, которые находятся ранее в исходный документ. Если эта позиция вызовет ячейку, охватывающую столбец чтобы перекрыть ячейку, охватывающую строку, из предыдущей строки, CSS не определяет результаты: реализации могут либо перекрывать ячейки (как делается во многих реализациях HTML) или может сместить более позднюю ячейку на право избегать такого дублирования. (Это ограничение выполняется, если свойство ‘direction’ таблицы равно ‘ltr’; если «направление» ‘rtl’, поменяйте местами «лево» и «право» в двух предыдущих фразы. )
  6. Поле ячейки не может выходить за пределы поля последней строки таблицы или группа строк; пользовательские агенты должны сокращать его до тех пор, пока он не будет соответствовать.

Края строк, столбцов, групп строк и групп столбцов в разрушающиеся границы модели совпадают с гипотетическими линиями сетки, на которых находятся границы ячеек по центру. (Таким образом, в этой модели ряды вместе точно покрывают стол, не оставляя зазоров; то же самое для столбцов.) В модели с разделенными границами края совпадают с краевыми краями клетки. (И таким образом, в этой модели могут быть промежутки между рядами, столбцы, группы строк или группы столбцов, соответствующие свойству ‘border-spacing’.)

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

Вот пример, иллюстрирующий правило 5. Следующие незаконные Фрагмент (X)HTML определяет конфликтующие ячейки:

<таблица>
1 2 3 4 
5

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

   [D]

Два возможных визуализации ошибочной HTML-таблицы.

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

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

   [Д]

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

  1. Самый нижний слой представляет собой единую плоскость, представляющую собой поле таблицы сам. Как и все ящики, он может быть прозрачным.
  2. Следующий слой содержит группы столбцов. Каждая группа столбцов простирается от верхней части ячеек в верхнем ряду до нижней части ячейки в нижнем ряду и от левого края его крайнего левого столбца к правому краю его самого правого столбца. Фон точно покрывает всю площадь всех клеток, происходящих из группы столбцов, даже если они выходят за пределы группы столбцов, но это разница в площади не влияет на позиционирование фонового изображения.
  3. Над группами столбцов находятся области, представляющие ящики для колонн. Каждый столбец такой же высоты, как группы столбцов и шириной, как обычная (одна колонка) ячейка в колонке. фон покрывает точно всю площадь всех ячеек, которые происходят в столбце, даже если они выходят за пределы столбца, но это разница в площади не влияет на позиционирование фонового изображения.
  4. Следующий слой содержит группы строк. Каждая группа строк простирается от верхнего левого угла его самой верхней ячейки в первом столбца в правый нижний угол его самой нижней ячейки в последней столбец.
  5. Предпоследний слой содержит строки. Каждый ряд имеет ширину группы строк и такой же высоты, как обычная (однострочная) ячейка в ряд. Как и в случае со столбцами, фон покрывает ровно всю площадь всех ячеек, начинающихся в строке, даже если они охватывают вне ряда, но эта разница в площади не влияет позиционирование фонового изображения.
  6. Самый верхний слой содержит сами клетки. Как рисунок показывает, хотя все строки содержат одинаковое количество ячеек, не все ячейка может иметь указанное содержимое. В модели разделенных границ («граница-коллапс» «разделить»), если значение их свойства «пустые ячейки» равно «скрыть» эти «пустые» ячейки прозрачны через ячейку, строку, строку группа, столбец и фон группы столбцов, позволяя таблице фон просвечивает.

«Отсутствующая ячейка» — это ячейка в сетке строк/столбцов, которая не занято элементом или псевдоэлементом. Отсутствующие ячейки визуализируются как будто анонимная ячейка таблицы заняла их позицию в сетке.

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



  <ГОЛОВА>
    Пример таблицы
    <СТИЛЬ type="text/css">
      ТАБЛИЦА {фон: #ff0; граница: сплошная черная;
               пустые ячейки: скрыть }
      TR.top {фон: красный}
      TD {граница: сплошная черная}
    
  
  <ТЕЛО>
    <ТАБЛИЦА>
      
        <ПД> 1
         2
        <ВП> 3
        <ПД> 4
      
        <ПД> 5

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

   [Д]

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

Обратите внимание, что если в таблице есть ‘граница-коллапс: отдельная’, фон области, заданной свойством ‘border-spacing’, равен всегда фон элемента таблицы. См. модель разделенных границ.

17.5.2 Алгоритмы ширины таблицы: «макет таблицы» свойство

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

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

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

Имя: макет таблицы
Значение: авто | фиксированный | наследовать
Начальный: авто
Применяется к: элементам table и inline-table
Унаследовано: нет
Проценты: Н/Д
Медиа: визуальный
Расчетное значение:, как указано

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

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

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

17.5.2.1 Фиксированная компоновка таблицы

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

Ширина таблицы может быть указана явно с помощью свойства ‘width’. Значение «авто» (для оба ‘display: table’ и ‘display: inline-table’) означают использование алгоритма автоматической компоновки таблицы. Однако, если таблица представляет собой таблицу блочного уровня («отображение: таблица») в нормальный поток, UA может (но не обязан) использовать алгоритм 10.3.3 для вычисления ширины и применения фиксированный макет таблицы, даже если указанная ширина «авто».

Если UA поддерживает фиксированную компоновку таблицы, когда ‘width’ имеет значение ‘auto’, следующее создаст таблицу, которая на 4em уже, чем содержащая блокировать:

таблица { раскладка таблицы: исправлена;
        поле слева: 2em;
        поле-справа: 2em }

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

  1. Элемент столбца со значением, отличным от «auto» для свойства «width», устанавливает ширину для ту колонку.
  2. В противном случае ячейка в первой строке со значением, отличным от ‘auto’ для свойства ‘width’ определяет ширину этого столбца. Если ячейка охватывает более один столбец, ширина делится на столбцы.
  3. Любые оставшиеся столбцы поровну делят оставшуюся горизонтальную табличное пространство (минус границы или расстояние между ячейками).

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

Если в следующей строке столбцов больше, чем большее число определяется элементами таблицы-столбца и числом, определяемым первый ряд, то дополнительные столбцы могут не отображаться. CSS 2.2 не определяет ширина столбцов и таблицы, если они рендерится . При использовании table-layout: исправлено», авторы не должны пропускать столбцы из первой строки.

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

17.5.2.2 Автоматическая верстка таблицы

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

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

Примечание. Это может быть определено более подробно в CSS3.

Остальная часть этого раздела не является обязательной.

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

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

  1. Рассчитайте минимальную ширину содержимого (MCW) каждой ячейки: форматированное содержимое может занимать любое количество строк, но не может выходить за пределы сотовый ящик. Если указанная «ширина» (W) ячейки больше чем MCW, W — минимальная ширина ячейки. Значение «авто» означает, что MCW — минимальная ширина ячейки.

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

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

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

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

Это дает максимальную и минимальную ширину для каждого столбца.

Минимальная ширина подписи (CAPMIN) определяется вычислением для каждый заголовок минимальная внешняя ширина заголовка как MCW гипотетическая ячейка таблицы, содержащая заголовок, отформатированный как «отображение: блокировать». Наибольшая из минимальных внешних ширин заголовка равна КАПМИН.

Столбец и заголовок widths влияют на итоговую ширину стола следующим образом:

  1. Если свойство width элемента table или inline-table имеет вычисленное значение (W) кроме «авто», используемая ширина равна большее из W, CAPMIN и минимальная ширина, необходимая для всех столбцы плюс расстояние между ячейками или границы (МИН.). Если используемая ширина больше, чем MIN, дополнительная ширина должна быть распределена по столбцам.
  2. Если элемент table или inline-table имеет ширину: auto, используемая ширина больше ширины блока, содержащего таблицу, КАПМИН и МИН. Однако, если либо CAPMIN, либо максимальная ширина требуемый столбцами плюс расстояние между ячейками или границы (MAX) меньше чем у содержащего блока, используйте max(MAX, CAPMIN).

Процентное значение ширины столбца относится к таблице ширина. Если таблица имеет «Ширина: авто», процент представляет собой ограничение на ширину столбца, которое АП должен попытаться удовлетворить. (Очевидно, что это не всегда возможно: если ширина столбца «110%», ограничение не может быть удовлетворено.)

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

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

Высота таблицы задается свойством «высота» для «таблицы» или элемент встроенной таблицы. Значение «auto» означает, что высота сумма высот строк плюс любые интервалы между ячейками или границы. Любой другой значение рассматривается как минимальная высота. CSS 2.2 не определяет, как дополнительное пространство распределяется, когда свойство «высота» приводит к тому, что таблица быть выше, чем в противном случае.

Примечание. Будущее обновления CSS могут указать это дополнительно.

Высота блока элемента table-row вычисляется после пользовательский агент имеет все доступные ячейки в строке: это максимум вычисленной «высоты» строки, вычисленная «высота» каждого ячейка в ряду, и минимальная высота (MIN), требуемая ячейками. Значение «высота» «авто» для «table-row» означает, что высота строки, используемая для макета, составляет МИН. МИН зависит по высоте ячейки и выравниванию ячейки (во многом похоже на вычисление высоты строки). CSS 2.2 не определяет, как высота ячеек таблицы и таблицы строки вычисляются, когда их высота указана в процентах ценности. CSS 2.2 не определяет значение высоты для групп строк.

В CSS 2.2 минимальная высота блока ячеек требуется по содержанию. Свойство «высота» ячейки таблицы может влиять на высоту строки (см. выше), но не увеличивает высоту сотовый ящик.

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

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

базовый уровень
Базовая линия ячейки находится на той же высоте, что и базовая линия первой из строк, которые он охватывает (см. ниже для определение базовых линий ячеек и строк).
верх
Верхняя часть ячейки выровнена с верхней частью первой строка, которую он охватывает.
дно
Нижняя часть ячейки совмещена с нижней частью последняя строка, которую он охватывает.
средний
Центр ячейки выровнен по центру строк это охватывает.
sub, super, text-top, text-bottom, , <процент>
Эти значения не применяются к ячейкам; ячейка выравнивается по вместо этого базовый уровень.

Базовая линия ячейки — это базовая линия первого поля линии потока в ячейке или первого in-flow table-row в ячейке, в зависимости от того, что наступит раньше. Если нет такой линейный блок или строка таблицы, базовая линия — это нижняя часть края содержимого из сотового ящика. В целях нахождения базовой линии входящие коробки с механизмами прокрутки (см. свойство ‘overflow’) должны быть считаются прокручиваемыми до исходной позиции. Обратите внимание, что базовая линия ячейки может оказаться ниже ее нижней границы, см. пример ниже.

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

   [Д]

Диаграмма, показывающая влияние различных значений «вертикальное выравнивание» для ячеек таблицы.

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

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

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

  1. Сначала выбираются ячейки, выровненные по базовой линии. позиционируется. Это установит базовую линию ряда. Далее ячейки с ‘vertical-align: top’ позиционируются.
  2. Строка теперь имеет верхнюю, возможно, базовую линию и предварительную высота, которая представляет собой расстояние от верха до самого нижнего края ячейки, расположенные до сих пор. (См. условия заполнения ячейки ниже.)
  3. Если какая-либо из оставшихся ячеек, выровненных по низу или середине, имеют высоту, которая больше, чем текущая высота строки, высота строки будет увеличена до максимума эти клетки, опустив дно.
  4. Наконец, оставшиеся ячейки размещены.

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

Ячейка в этом примере имеет базовую линию под нижней границей:

div { высота: 0; переполнение: скрыто; }
<таблица>
 
  <тд>
   
 Проверка

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

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

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

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

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

Имя: граница-коллапс
Значение: коллапс | отдельный | наследовать
Начальный номер: отдельный
Применяется к: элементам table и inline-table
По наследству: да
Проценты: Н/Д
Медиа: визуальный
Расчетное значение:, как указано

Это свойство выбирает модель границы таблицы. Значение «отдельно» выбирает модель границ с разделенными границами. Значение «свернуть» выбирает модель разрушающихся границ. Модели описаны ниже.

17.6.1 Модель с разделенными границами

Наименование: border-spacing
Значение: <длина> <длина>? | наследовать
Начальный номер: 0
Применяется к: элементам table и inline-table*
По наследству: да
Проценты: Н/Д
Медиа: визуальный
Вычисленное значение: две абсолютные длины

*) Примечание: пользовательские агенты также могут применять свойство ‘border-spacing’ для элементов ‘frameset’. Какие элементы Элементы ‘frameset’ не определены этой спецификацией и до язык документа. Например, HTML4 определяет элемент, а XHTML 1.0 определяет элемент. Таким образом, свойство ‘border-spacing’ элемента ‘frameset’ может использоваться как допустимая замена нестандартного атрибута ‘framespacing’.

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

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

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

Однако в HTML и XHTML1 ширина

элемент — это расстояние от левого края границы до правой границы край.

Примечание: В CSS3 это особое требование будет определяться с точки зрения правил таблицы стилей UA и «размера коробки». имущество.

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

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

таблица { граница: начало 10pt;
             граница-коллапс: раздельная;
             интервал между границами: 15pt }
td {граница: вставка 5pt}
td.special { border: inset 10pt } /* Верхняя левая ячейка */

   [Д]

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

17.6.1.1 Границы и фон вокруг пустых ячеек: свойство «пустые ячейки»
Имя: пустые ячейки
Значение: показать | скрыть | наследовать
Начальный: показать
Применяется к: элементам table-cell
По наследству: да
Проценты: Н/Д
Медиа: визуальный
Расчетное значение:, как указано

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

  • плавающее содержимое (включая пустые элементы),
  • входящий контент (включая пустые элементы), кроме пробелов который был свернут обработкой свойства «белое пространство».

Когда это свойство имеет значение «показать», границы и фоны рисуются вокруг/позади пустых ячеек (как обычные ячейки).

Значение «скрыть» означает, что границы или фон не рисуются вокруг/позади пустых ячеек (см. пункт 6 в 17.5.1). Кроме того, если все клетки в строка имеет значение «скрыть» и не имеет видимого содержимого, тогда строка имеет нулевую высоту и вертикальный интервал границы только с одной стороны ряда.

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

таблица {пустые ячейки: показать}

17.6.2 Модель разрушающейся границы

В модели разрушающейся границы можно задать границы которые окружают всю или часть ячейки, строки, группы строк, столбца и группа столбцов. Можно указать границы для HTML-атрибута «rules». Сюда.

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

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

ширина строки = (0,5 * ширина границы 0 ) + заполнение слева 1 + ширина 1 + прокладка правая 1 + ширина границы 1 + отступ слева 2 +…+ прокладка правая n + (0,5 * ширина границы n )

Здесь n — количество ячеек в строке, заполнение слева i и заполнение справа i см. слева (соответственно, справа) заполнение ячейки i и border-width i относится к границе между ячейками и и и + 1.

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

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

Любые границы, выходящие за пределы поля, учитываются при определение того, переполняет ли таблица какой-либо предок (см. «переполнение»).

   [Д]

Схема, показывающая ширину ячеек и границ и заполнение ячеек.

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

CSS 2.2 не определяет, где край фона на элемент таблицы лежит.

17.6.2.1 Разрешение конфликта границ

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

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

  1. Границы со скрытым дублем приоритет над всеми другими конфликтующими границами. Любая граница с этим значение подавляет все границы в этом месте.
  2. Границы со стилем «нет» имеют самый низкий приоритет. Только если граничные свойства всех элементов, встречающихся на этом ребре, равны «none» граница будет опущена (но обратите внимание, что «none» — это значение по умолчанию для стиля границы.)
  3. Если ни один из стилей не скрыт и хотя бы один из них не «нет», тогда узкие границы отбрасываются в пользу более широких те. Если несколько имеют одинаковую ширину границы, то стили предпочтительнее в следующем порядке: «двойной», «сплошной», «пунктирный», «точечный», «гребень», «начало», «канавка» и самый низкий: «вставка».
  4. Если стили границ отличаются только цветом, то стиль, установленный на ячейка выигрывает над единицей в строке, которая выигрывает над группой строк, столбцом, группа столбцов и, наконец, таблица. Когда два элемента одного типа конфликта, то тот, что левее (если таблица ‘направление’ — это ‘лтр’; правильно, если это ‘rtl’) и далее наверх выигрывает.

Следующий пример иллюстрирует применение этих правила приоритета. Эта таблица стилей:

таблица { граница коллапса: коллапс;
                 граница: 5 пикселей сплошного желтого цвета; }
*#col1 {граница: 3px сплошной черный; }
td {граница: 1px сплошной красный; набивка: 1em; }
td.cell5 {граница: 5px пунктирная синяя; }
td.cell6 {граница: 5px сплошной зеленый цвет; }

с этим источником HTML:

<ТАБЛИЦА>
<ЦВЕТ><ЦВЕТ><ЦВЕТ>

    <ПД> 1
    <ПД> 2
    <ВП> 3


    <ПД> 4
    <ПД> 5
    <ВП> 6


    <ПД> 7
    <ВП> 8
    <ВП> 9

    <ПД> 10
    <ПД> 11
    <ВП> 12


    <ТД> 13
    <ТД> 14
    <ТД> 15

выдаст что-то вроде этого:

   [Д]

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

Вот пример скрытых сворачивающихся границ:

   [Д]

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

Источник HTML:

<ТАБЛИЦА>
фу
    бар
фу
    бар

17.

6.3 Стили границ

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

нет
Нет граница.
*скрыто
То же, что и «нет», но в модели с разрушающейся границей также запрещает любую другую границу (см. раздел о пограничных конфликтах).
с точками
Граница представляет собой набор точек.
пунктир
Граница представляет собой серию коротких отрезков линии.
сплошной
Граница представляет собой один сегмент линии.
двойной
Граница представляет собой две сплошные линии. Сумма двух строк и расстояние между ними равно значению ‘border-width’.
канавка
Граница выглядит так, как будто она вырезана на холсте.
ребро
Противоположность «канавке»: граница выглядит так, как если бы она была выходит из полотна.
*вставка
В разделенных границах модели, граница делает всю коробку похожей на встроенный в полотно. В модели разрушающейся границы, нарисованной так же, как ‘гребень’.
*начало
В разделенных границах модели, граница делает всю коробку похожей на выходит из полотна. В модели разрушающейся границы, нарисованной так же, как ‘канавка’.

предыдущий следующий содержание характеристики индекс

Таблицы с накоплением td ширина столбца — HTML и CSS — Форумы SitePoint

varievincenzo

#1

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

 table td:nth-child(1) {
  ширина:10%;
}

Я пробовал это:

, но они становятся невыровненными…

  1. когда я нажимаю «показать», чтобы показать другие строки, td становится невыровненным, изменяя ширину
  2. повторный клик чтобы скрыть нижнюю таблицу, ширина тоже отличается от начала, опять же все td unaligned

Арчибальд

#2

В CSS установите ширину таблицы на 100% и установите ширину «td» и «th» на 11% (поскольку столбцов 9). Удалите все остальные значения ширины, включая встроенные.

вариевинченцо

#3

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

Редактировать:
Я также пытался удалить встроенную минимальную ширину, максимальную ширину, но они все равно не выровнены…

Гэндальф

#4

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

ПолОБ

#5

Основная проблема заключается в том, что вы закомментировали алгоритм table-layout:fixed, и без него ширина является лишь предложением и будет зависеть от содержимого.

 стол {
   интервал между границами: 4 пикселя;
   граница-коллапс: раздельная;
   поле слева: авто;
   поле справа: авто;
   фон: #F0F9FF;
   table-layout:fixed;/* важно соблюдать ширину*/
}

После того, как вы раскомментируете css, а затем удалите этот ошибочный код, он заработает,

У вас есть странный фрагмент.

 
    
    <тр

Вложенный существующий tr.

Код можно найти здесь, в строке 56:

 
    
    <тр
 
 Должно быть так:
 <таблица>
<тело>
 
 Разветвленный рабочий пример вашей ручки.
 Когда вы задаете ширину ячейкам таблицы (в алгоритме table-layout:auto), тогда все значения ширины должны составлять ровно 100% или один (или больше) ) не должен иметь ширины, чтобы впитать разницу
 ПолОБ 
 #6
 Гэндальф:
 Указание ширины столбца (td) используется только в качестве общего руководства, а не точной ширины.
 Если вы не используете алгоритм table-layout:fixed, тогда ширина преобладает над содержимым и будет соблюдаться. Любой контент, который не помещается в ячейку, будет переполнен.
 1 Нравится
 вариевинченцо 
 #7
 Спасибо, Пол! 
 Это хорошо. На самом деле, я уже пробовал фиксированную раскладку, но она не работала, поэтому я временно раскомментировал ее... 
 Это была та штука...!
 Хорошо, есть небольшое смещение по ширине при отображении/скрытии ОБЕИХ таблиц, но это приемлемо, потому что это общие таблицы и в каждом случае очень мало.
 Итак, я хотел бы спросить еще 2 вещи:
  1.  Я хотел бы, если это возможно, сделать отступ для строк, отображаемых после нажатия кнопки, чтобы исходные строки возобновления таблицы оставались более заметными. 
     Я не хочу дополнять содержимое td слева или слева от поля, но действительно перемещаю поле td слева, чтобы оно располагалось ближе к правому краю.
  2.  Как вы проверяете с помощью JS фактическую ширину, назначенную псевдоклассом css td:nth-child? 
     Я безуспешно пытался прочитать свойство ширины в некоторых строках следующим образом: 
     РЕДАКТИРОВАТЬ
 console.log($("#1_1tr1")[0].childNodes[3].style.width )
 
 Он говорит, что ширина равна «» 
, так как я могу это прочитать?
 ПолОБ 
 #8
 вариевинченцо:
 Я хотел бы, если это возможно, сделать отступ для строк, отображаемых после нажатия кнопки, чтобы исходные строки возобновления таблицы оставались более заметными. 
 Я не хочу дополнять содержимое td слева или слева от поля, но действительно перемещаю поле td слева, чтобы оно располагалось ближе к правому краю.
 Вы не можете перемещать ячейки таблицы, они неизменяемы
 Единственный способ создать иллюзию отступа — использовать пустую ячейку во вложенном содержимом, а в родительской таблице иметь лишнюю пустую ячейку, но совместить ее, чтобы покрыть две клетки. Ячейки таблицы всегда должны выравниваться по столбцам в одной таблице. Единственный способ получить неравномерные ячейки — использовать дополнительные ячейки, а затем объединять их.
 вариевинченцо 
 #9
 Ладно, честно. 
 Я решил js с помощью getComputedStyle
 PaulOB 
 #10
 Вот очень грубый пример получения отступа с дополнительной ячейкой. Это просто доказательство концепции.
 Точную ширину я не определял, так как было мало времени, и, конечно, вам нужно проверить, что у вас есть 10 ячеек в каждой строке или они правильно разделены.
 Также было бы намного проще, если бы вы просто добавили классы в динамическую таблицу, и тогда всю тяжелую работу можно было бы сделать в css
 1 Нравится
 Арчибальд 
 #11
 Не следует ли учитывать, как это будет отображаться на маленьких экранах или в маленьких окнах браузера без переполнения длинными словами?
 ПолОБ 
 #12
 Хороший вопрос
 Потребуется много работы, чтобы линеаризовать что-то подобное в вертикальную компоновку (хотя и не невозможно), поэтому, возможно, придется использовать оболочку max-width и позволить таблице прокручиваться вбок на мобильных устройствах.
 вариевинченцо 
 №13
 Идеальный Пол, именно то, что мне нужно. Я буду добавлять классы динамически.
 @Archibald 
 Для этой конкретной работы эти таблицы предназначены для использования только в настольной среде, поэтому я не беспокоюсь о внешнем виде для мобильных устройств.
 1 Нравится
 система
закрыто 
 №14
 Эта тема была автоматически закрыта через 91 день после последнего ответа. Новые ответы больше не допускаются.
 Ячейки таблицы — ширина и высота 
  
  <тд 
  width="  пикселей или процент  " 
 height="  пикселей или процент  "> 
 ...
   
  
 Устанавливает ширину ячейки таблицы 
 Устанавливает высоту ячейки таблицы 
  
 Веб-браузеры автоматически установят размеры строк и столбцов в таблице вашей веб-страницы в соответствии с тем, сколько контента содержится в ячейках вашей таблицы. Поскольку ячейки отображаются в виде сетки, ячейка, содержащая наибольшее количество содержимого, обычно устанавливает ширину и высоту всех соседних с ней ячеек и, следовательно, устанавливает ширину и высоту связанных строк и столбцов в вашей таблице.
 Однако вы можете применить атрибуты  width  и  height  к тегам  , чтобы явно задать размеры ячеек таблицы и, таким образом, контролировать ширину и высоту строк и столбцов.
 Эти атрибуты более подробно описаны ниже:
  •    width="  пикселей или процентов  "   ~ Используя атрибут  width  в тегах  , вы можете явно задать ширину ячеек данных таблицы. Это приведет к установке не только ширины этой конкретной ячейки, но также установит ширину всего столбца, в котором находится эта ячейка. Вы можете определить либо фиксированную ширину в пикселях, либо относительную ширину (рекомендуется), которая равна проценту от ширины таблицы.
     ПРИМЕЧАНИЕ. В случае, когда атрибут  ширины  установлен более чем в одной ячейке в одном столбце, применяется наибольшая ширина. Аналогичным образом, если содержимое любой ячейки таблицы в этом столбце (например, изображение) превышает указанную ширину, ширина содержимого будет определять ширину ячейки и столбца, в котором оно находится.
     Пример 1 ниже отображает таблицу шириной 500 пикселей и двумя столбцами. Ширина первой ячейки данных таблицы устанавливается на 25%, что затем устанавливает ширину всех ячеек в столбце 1 на 25% или 125 пикселей (25% от 500 = 125). Ширина всех ячеек в столбце 2 по умолчанию равна остальной ширине таблицы (75%):
     Пример 1 — КОД ИСТОЧНИКА
     

        
            < td>Столбец 2
        
     
    Столбец 1Столбец 2
     
    Столбец 1
     
    Столбец 1Столбец 2
     
     
     Пример 1 — РЕЗУЛЬТАТ
     Столбец 1 Столбец 2
     Столбец 1 Столбец 2
     Столбец 1 Столбец 2
  •    height="  пикселей или процентов  "   ~ Используя атрибут  height  в тегах  , вы можете явно установить высоту ячеек данных таблицы. Это приведет к установке не только высоты этой конкретной ячейки, но также установит высоту всей строки, в которой находится эта ячейка. Вы можете определить либо фиксированную высоту в пикселях (рекомендуется), либо относительную высоту, равную проценту от высоты таблицы.
     ПРИМЕЧАНИЕ. В случае, когда атрибут  высота  установлен более чем в одной ячейке в одной строке, применяется наибольшая высота. Аналогичным образом, если содержимое любой ячейки таблицы в этой строке (например, изображение) превышает указанную высоту, высота содержимого будет определять высоту ячейки и строки, в которой оно находится.
     Пример 2 отображает таблицу, которая имеет ширину 500 пикселей и состоит из двух строк. Высота первой ячейки таблицы в строке 1 устанавливается на 100 пикселей, что затем устанавливает высоту всех ячеек в строке 1 на 100 пикселей. Высота строки 2 не зависит от высоты в строке 1.
     Пример 2 - ИСХОДНЫЙ КОД
     
     

     < tr>
     
     
    Строка 1Строка 1Строка 1
     
    Строка 2Строка 2Строка 2
     
     
     Пример 2 — РЕЗУЛЬТАТ
     Ряд 1 Ряд 1 Ряд 1
     Ряд 2 Ряд 2 Ряд 2
 Ну вот и все для столов. В следующем разделе Iron Spider будут рассмотрены все тонкости , как составлять списки... 
  Best Free Stuff 
 для веб-мастеров 
 Бесплатные текстовые редакторы 
 Бесплатные графические редакторы 
 Инструменты анализа веб-сайтов 
 Бесплатные шаблоны веб-сайтов
 См. также:
 Лучший бесплатный веб-хостинг
  
 Если вам нужна  .COM  веб-адрес, вы можете быстро и легко получить его по адресу...
 <~BACK ВЕРХ СЛЕДУЮЩИЙ ~>
 HTML-CSS: Создание столбца фиксированной ширины в правой части страницы • Программист 
 При разработке HTML-страницы иногда необходимо сделать боковую панель фиксированной ширины в правой части страницы с динамическим заполнением всего оставшегося пространства слева.
 Получить файлы с примерами кода на Co-fi
  
 Легче всего это сделать с помощью разметки с таблицами, но вполне возможно и с обычными элементами «
».
 Во-первых, давайте определим два элемента «
» для левого и правого столбцов:
 <дел> левая гибкая кишка
 <дел> правая фиксированная ширина цвет
 1
 2
 3
 4
 5
 6
   гибкое двоеточие слева
   правый столбец фиксированной ширины
 В соответствии с их id мы можем назначить им стили CSS — установить правую колонку фиксированной ширины и выделить обе колонки разными цветами:
 #left_container{
цвет фона: темно-зеленый;
}
#right_container{
цвет фона: голубой;
ширина: 300 пикселей;
}
 1
 2
 3
 4
 5
 6
 7
 #left_container{
 background-color: darkseagreen;
 }
 #right_container{
 background-color:cyan;
 ширина: 300 пикселей;
 }
 Теперь элементы расположены друг под другом.
 Чтобы расположить их рядом, мы можем установить для обоих элементов «div» свойство «float: left», указав, что элемент плавает слева.
 #left_container{
цвет фона: темно-зеленый;
плыть налево;
}
#right_container{
цвет фона: голубой;
ширина: 300 пикселей;
плыть налево;
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
 #left_container{
 background-color: darkseagreen;
 поплавок: левый;
 }
 #right_container{
 background-color:cyan;
 ширина: 300 пикселей;
 поплавок: левый;
 }
 Теперь нам нужно переместить правую колонку в правую часть страницы.
 Мы можем добиться результата, используя свойство CSS «margin» нестандартным способом.
 В обычном случае использования свойства «margin» оно регулирует расстояние между элементами. Если значение свойства равно null, элементы расположены близко друг к другу, и чем больше значение, тем больше отступ между элементами. Если мы установим отрицательное значение поля, элементы будут перекрывать друг друга.
 Установим ширину левого элемента равной 100% — всей ширине страницы, а справа установим отрицательное значение «margin», чтобы правый элемент перекрывал его на всю ширину. Поскольку ширина фиксированного элемента установлена ​​на 300 пикселей, нам нужно установить значение поля на -300 пикселей.
 #left_container{
цвет фона: темно-зеленый;
плыть налево;
ширина: 100%;
поле справа: -300px;
}
 1
 2
 3
 4
 5
 6
 #left_container{
 background-color: darkseagreen;
 поплавок: левый;
 ширина: 100%;
 поле справа: -300px;
 }
 И мы получаем то, что нам нужно:
 Хотя результат, который мы получили, выглядит так, как должен, работает он некорректно. При заполнении левого столбца текстом мы видим, что часть текста скрыта под правым столбцом.
 Это потому, что, по сути, левый элемент «
» растягивается на ширину экрана, а правый его закрывает, но не изменяет размеры.
 Чтобы решить эту проблему, давайте добавим еще один элемент «
» с id = «left_content_container» внутри левого элемента «
», в который мы собственно и будем вводить текст.
 HTML-разметка теперь будет выглядеть так:
 <дел> <дел> левая гибкая кишка
 
   
     гибкое двоеточие слева
   
 Для нового элемента «
» назначим правое поле, равное ширине правого столбца в 300 пикселей:
 #left_content_container{
цвет фона: слива;
поле справа: 300 пикселей;
}
 #left_content_container{
 background-color:plum;
 поле справа: 300 пикселей;
 }
 Теперь наша разметка выглядит так:
 И работает корректно – правая колонка имеет фиксированную ширину 30o px, левая колонка гибко заполняет все оставшееся на странице место. Теперь мы можем убрать цветовую подсветку и использовать макет по прямому назначению.
 Полный код HTML и CSS:
 <дел> <дел> левая гибкая кишка
 <дел> правое двоеточие фиксированной ширины 
 1
 2
 3
 4
 5
 6
 7
 8
 левая гибкая толстая кишка
 Правая фиксированная ширина.
 #left_container{
цвет фона: темно-зеленый;
плыть налево;
ширина: 100%;
поле справа: -300px;
}
#right_container{
цвет фона: голубой;
ширина: 300 пикселей;
плыть налево;
}
#left_content_container{
цвет фона: слива;
поле справа: 300 пикселей;
}
 1
 2
 3
 4
 5
 6
 7
 8
 10
 110005
 12
 13
 14
1
 #left_container{
 background-color: darkseagreen;
 поплавок: левый;
 ширина: 100%;
 поле справа: -300px;
 }
 #right_container{
 background-color:cyan;
 ширина: 300 пикселей;
 поплавок: левый;
 }
 #left_content_container{
 background-color:plum;
 поле справа: 300 пикселей;
 }
 таблица-макет | CSS-Tricks - CSS-Tricks 
 Свойство  table-layout  определяет, какой алгоритм браузер должен использовать для разметки строк, ячеек и столбцов таблицы.
 стол {
  макет таблицы: фиксированный;
} 
 Как поясняется в спецификации CSS2.1, компоновка таблицы в целом обычно является делом вкуса и будет варьироваться в зависимости от выбора дизайна. Браузеры, однако, автоматически применяют определенные ограничения, которые будут определять расположение таблиц. Это происходит, когда 9Свойство 0011 table-layout  имеет значение  auto  (по умолчанию). Но эти ограничения можно снять, если  table-layout  установить на  fixed  .
 Значения 
  •   авто  : по умолчанию. Автоматический алгоритм браузера используется для определения расположения строк, ячеек и столбцов таблицы. Результирующий макет таблицы обычно зависит от содержимого таблицы.
  •   фиксированный  : с этим значением макет таблицы игнорирует содержимое и вместо этого использует ширину таблицы, любую указанную ширину столбцов, а также значения границ и интервалов между ячейками. Используемые значения столбцов основаны на ширине, определенной для столбцов или ячеек для первой строки таблицы.
  •   наследовать  : указывает, что значение унаследовано от значения  table-layout  его родителя
 Для того, чтобы значение  фиксированное  имело какой-либо эффект, для ширины таблицы должно быть задано значение, отличное от  auto  (значение по умолчанию для свойства  width ). В приведенных ниже демонстрациях ширина всех таблиц установлена ​​на 100 %, что предполагает, что мы хотим, чтобы таблица заполняла родительский контейнер по горизонтали.
 Лучший способ увидеть эффекты алгоритма с фиксированной структурой таблицы — использовать демонстрацию.
 См. демо-версию свойства table-layout в CSS от Louis Lazaris (@impressivewebs) на CodePen.
 При первом просмотре приведенной выше демонстрации вы заметите, что расположение столбцов таблицы несбалансированное и неудобное. В этот момент таблица использует алгоритм браузера по умолчанию, чтобы определить, как расположить таблицу, а это означает, что содержимое будет определять макет. Демонстрация преувеличивает этот факт, добавляя длинную строку текста в одну ячейку таблицы, в то время как во всех остальных ячейках таблицы используется всего по два слова. Как видите, браузер расширяет первый столбец, чтобы вместить больший фрагмент содержимого.
 Если вы нажмете кнопку «Переключить макет таблицы: фиксированный», вы увидите, как выглядит макет таблицы при использовании «фиксированного» алгоритма. Когда применяется  table-layout: fixed , содержимое больше не определяет макет, вместо этого браузер использует любую определенную ширину из первой строки таблицы для определения ширины столбца. Если в первой строке нет ширины, ширина столбцов делится поровну по всей таблице, независимо от содержимого внутри ячеек.
 Дальнейшие примеры могут помочь прояснить это. В следующей демонстрации таблица имеет   элемент, первый элемент которого   имеет ширину  400px  . Обратите внимание, что в этом случае переключение макета таблицы : фиксированный  не имеет никакого эффекта.
 См. демонстрацию свойства table-layout в CSS от Louis Lazaris (@impressivewebs) на CodePen.
 Это происходит потому, что алгоритм макета по умолчанию, по сути, говорит: «Сделайте первый столбец шириной 400 пикселей и распределите оставшиеся столбцы на основе их содержимого». Поскольку остальные три столбца имеют одинаковое содержимое, изменений не будет. А теперь давайте добавим дополнительное текстовое содержимое в один из других столбцов:
 См. демонстрацию свойства table-layout в CSS с шириной столбца и переменным содержимым, представленную Louis Lazaris (@impressivewebs) на CodePen.
 Теперь, если вы нажмете кнопку-переключатель, вы увидите, что столбцы настраиваются в соответствии с фиксированным макетом, независимо от содержимого. И снова происходит то же самое; первый столбец установлен на 400 пикселей, тогда остальные столбцы делятся поровну. Но на этот раз, поскольку один из столбцов имеет дополнительный контент, разница заметна.
 Как алгоритм фиксированной компоновки определяет ширину столбцов 
 Следующие две демонстрации должны помочь понять, что первая строка таблицы — это то, что помогает определить ширину столбцов таблицы со значением  table-layout: fixed  .
 См. демонстрацию макета таблицы CSS с ячейкой в ​​​​строке 1 с заданной шириной от Louis Lazaris (@impressivewebs) на CodePen.
 В приведенной выше демонстрации первая ячейка в первой строке таблицы имеет ширину 350 пикселей. Переключение макета таблицы : фиксированный  настраивает другие столбцы, но первый остается прежним. Теперь попробуйте следующую демонстрацию:
 См. демонстрацию макета таблицы CSS с ячейкой в ​​​​строке 2 с заданной шириной от Louis Lazaris (@impressivewebs) на CodePen.
 В данном случае это вторая строка, ширина которой привязана к первой ячейке таблицы. Теперь при нажатии кнопки переключения ширина всех столбцов регулируется. Опять же, это связано с тем, что алгоритм фиксированной компоновки использует первую строку для определения ширины столбцов, и конечным результатом является равномерное распределение ширины.
No related posts.