A better alternative than for showing empty HTML table cells?
It’s a classic problem — when you have an empty table cell the browser doesn’t render borders around it. There are also two well-known workarounds. One is to place an in the table cell; the other is to use the empty-cells:show CSS property.
Unfortunately both have drawbacks. is kind of ugly when it comes to selecting text and copy-pasting it. You get a lot of spaces where there shouldn’t be any, perhaps even with an exotic Unicode character. empty-cells:show should address exactly this problem, but unfortunately it only works properly in IE starting with version 8 (and then only in standards-compliant mode). It can be made to work in other versions by also specifying border-collapse: collapse , but sometimes this is what is NOT desired. In my case I have a fairly complex table and it relies on border-collapse:separate and would otherwise create quite a messy CSS/HTML soup.
So what are other things that you might put in a table cell that would make IE draw the borders yet not be visible or copyable? For all other browsers the empty-cells:show already does the trick, so I really just need to fool IE.
Таблицы в HTML
Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Значение таблиц в HTML5
Сегодня в вёрстке сайтов таблицы имеют не такое большое значение, как несколько лет назад. Раньше сайты создавались с помощью так называемой табличной верстки, и таблицы были основой, скелетом сайта. Позже, с развитием HTML, а также по мере появления всё большего количества портативных устройств для выхода в интернет (планшеты, смартфоны) сайты, сверстанные с помощью таблиц, «ехали», не помещались на экране, отображались коряво, и возникла потребность в резиновой, адаптивной и отзывчивой верстке.
Поэтому сейчас таблицы используются по прямому назначению — для структурированной подачи информации, будь то меню, прайс-лист или ведомость по сдавшим летнюю сессию.
Основные теги таблицы
Таблица состоит из нескольких обязательных тегов:
- тег <table > (по англ. таблица) — это тег, который говорит браузеру, что внутри него будет таблица
- тег <tr> (от англ. table row — строка таблицы) обозначает строку
- тег <td> (от англ. table data — данные таблицы) обозначает ячейку. Именно в этот тег мы закладываем всё, из чего будет состоять таблица — текст, картинки, списки, кнопки или даже другие таблицы
Давайте посмотрим схематически, как это всё ложится в коде:
То есть, для того чтобы создать таблицу на 3 колонки и 4 строки нам нужно 4 раза прописать элемент <tr> и в каждом из них по три раза — элемент <td>. Проверим?
Как видите, по умолчанию у нашей таблицы нет границ. В HTML5 границы, цвет границ, фона и многое другое делается с помощью CSS.
Помните, HTML отвечает за разметку веб-страниц, а CSS — за их стилизацию? Совсем скоро мы расскажем, как создаются красивые и сложные таблицы в современной верстке, а в этой статье мы хотели дать ту базу знаний, которая поможет вам разобраться именно в разметке таблицы, а не в её прихорашивании.
Оглавление таблиц
Чтобы как-то назвать таблицу, используется тег <caption> , по английски заголовок.
В большинстве случаев первая строка таблицы описывает те значения, которые пойдут в колонках и как-то выделяется среди прочих строк.
В HTML для этого есть специальный тег <th> (от англ. table header — заголовок таблицы). Он прописывается вместо <td> в первой строке. Давайте посмотрим на примере нашего мини-словарика, как это работает:
Обратите внимание, что данные в первой строчке приобрели жирный шрифт и выровнялись по центру колонок.
Иногда в таблицах нужно выделить не только первую строку, но и первый столбец. Например так:
Думаете, для этого тоже есть специальный тег? А нет �� Используется по прежнему тот же <th>, только вставляется он не вместо <td> в первой строке, а вместо первого <td> в каждой строчке, вот так:
Внимательный читатель наверняка заметил, что первая ячейка в первой колонке пустая. Если вам нужна пустая ячейка в таблице — её все равно нужно создать, просто ничего не вписывать между тегами <th></th> или <td></td>. Если этого не сделать — браузер подвинет остальные ячейки, куда сочтет нужным и содержимое таблицы поплывет. Попробуйте сами в JSFiddle убрать элемент <th></th> и увидите, что произойдет.
Объединение ячеек по вертикали
Бывает, что соседние ячейки имеют одинаковые данные, и их можно прописать один раз вместо нескольких.
Атрибут rowspan объединяет ячейки у соседних рядов (т.е. по вертикали).
Пример объединенных ячеек:
Давайте сверстаем такую таблицу. Чтобы нагляднее было видно объединение ячеек, все же нарисуем ей границы. Для этого применим устаревшие атрибуты, которые задаются для тега <table>:
border — отвечает за толщину границы, значение задается по умолчанию в пикселях
cellpadding — расстояние от контента ячейки до границ. Если оно =»0″ — значит текст (или любой другой контент) вплотную прилегает к границам ячейки. В случае с текстом это не очень красиво , поэтому мы зададим его равным 4 пикселям.
cellspacing — расстояние между ячейками. Если оно =»0″ — значит границы ячеек накладываются друг на дружку. Если оно больше — значит каждая ячейка отстоит от другой на заданное расстояние и получается как-бы двойная рамка. Выглядит на любителя:
Если мы задали атрибут border, то по умолчанию cellspasing равен 2 пикселям. Поэтому если мы хотим границы, но при этом не хотим разрывов между ними — нужно указывать, что cellspasing=»0″
Здесь же вы можете видеть, как тесно тексту в ячейках — это потому, что применен cellpadding=»0″
Итак, как же работает атрибут rowspan? Прежде, чем сверстать таблицу — нарисуйте её от руки на листке бумаги или создайте в экселе, так вам будет проще разобраться во всех этих строчках и колонках.
Схематически нашу таблицу «Сравнение моделей» можно представить, как поле для игры в морской бой:
В ней есть 4 колонки и 4 строчки,
во второй колонке вторая и третья ячейки объединены — ставим кораблик.
В четвертой колонке совмещены третья и четвертая ячейка — и туда ставим кораблик.
Вот только в HTML мы пишем код не колонками, а строчками. Как же записать это в коде?
Очевидно, что первая строка без изменений — пишем <tr></tr> и в нём 4 элемента <th> .
Вторая строка: пишем <tr></tr>, и в нём 4 элемента <td> , только теперь второму из них прописываем атрибут rowspan=»2″ (это означает, что будут объединены 2 ячейки)
Третья строка: пишем <tr></tr>, и теперь у нас всего 3 элемента <td> , потому что один из них, который во второй колонке «отобрала» верхняя ячейка. Последнему элементу <td> также нужно прописать атрибут rowspan=»2″.
Четвертая строка: внутри элемента <tr> снова прописываем всего 3 элемента <td> , потому что в четвертой колонке его уже нет — он поглотился верхней ячейкой.
Еще раз посмотрим на нашу таблицу, но уже с тегами. Читать нужно, как книгу — слева направо, сверху вниз:
А теперь наконец проверим, как это работает в редакторе:
Объединение ячеек по горизонтали
Атрибут colspan объединяет ячейки у соседних колонок (т.е. по горизонтали). Принцип здесь тот же, что и с rowspan
К примеру нам нужно создать вот такую таблицу:
Давайте снова прочитаем её слева направо, сверху вниз:
- строка 1: пять <th>, причем первый оставляем незаполненным
- строка 2: один <th> и 3 <td>, вторая и третья ячейки объединены, т.е. для второго <td> прописываем colspan=»2″
- строка 3: один <th> и 2 <td>, третья, четвертая и пятая ячейки объединились, т.е. для третьего <td> пишем colspan=»3″
- строка 4: один <th> и 2 <td>. Вторая и третья, а также четвертая и пятая объединены — для каждого из двух <td> прописываем colspan=»2″
Схематично это можно отобразить так:
Теперь посмотрим на код и результат поближе:
Перфекционист скажет, что здесь колонки разной ширины и таблица из-за этого некрасивая. Да, браузер автоматически подстраивает ширину колонки под самый широкий текст, который в ней есть. Чтобы сделать колонки одинаковой ширины, им нужно задать какой-то фиксированный размер с помощью CSS. Поэтому красивыми мы научимся делать таблицы позже, когда познакомимся с CSS.
Таблицы в HTML
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Понятие табличного представления данных не нуждается в дополнительном пояснении. В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц. Приведем примеры реально существующих документов, в которых табличное представление является удобным способом построения документа. На рис. 4.1 показан типичный пример использования таблиц для представления числовых данных, разбитых по строкам и столбцам. На рис. 4.2 использование таблицы служит лишь целям форматирования документа, задания взаимного расположения элементов страницы. При просмотре такого документа сразу не видно, что для его построения используется таблица, так как рамки вокруг ее ячеек не прорисовываются.
Первая версия языка HTML не предусматривала специальных средств для отображения таблиц, так как была в основном предназначена для написания простого текста. С развитием сфер применения HTML-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием преформатированного текста, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов. Напомним, что текст внутри пары тегов <PRE> и </PRE> выводится моноширинным шрифтом, и все пробелы и символы табуляции являются значащими. Работа по выравниванию такого текста выполнялась вручную, что существенно замедляло создание документов. Поддержка табличного представления данных стала стандартом де-факто, поскольку изначально была реализована во всех ведущих браузерах и лишь по прошествии значительного времени была закреплена в спецификации HTML 3.2.
Специальные средства для создания таблиц, впрочем, не отменяют возможности использования преформатированного текста. Использование таблиц не ограничивается только данными, состоящими из рядов и колонок. Одним из применений является организация расположения разнообразных данных на странице, которые могут состоять из простого текста, изображений, других таблиц и т. д. Правилам создания таблиц и примерам их использования посвящена данная глава.
Рис . 4.1. Типичный пример HTML-таблицы
Рис . 4.2. Пример таблицы без рамок
Создание простейших HTML-таблиц
Рассмотрим сначала минимальный набор тегов и их параметров, необходимый и достаточный для создания несложных таблиц, а затем перейдем к их детальному описанию.
Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Каждая строка начинается тэгом <TR> (Table Row) и завершается тэгом </TR>. Отдельная ячейка в строке обрамляется парой тегов <TD> и </TD> (Table Data) или <TH> и </TH> (Table Header). Тег <TH> используется обычно для ячеек-заголовков таблицы, а <TD> — для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <TH> отображается полужирным (Bold) шрифтом и располагается по центру (ALIGN=CENTER, VALIGN=MIDDLE). Ячейки, определенные тэгом <TD> по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (VALIGN=MIDDLE) в вертикальном направлении.
Тэги <TD> и <TH> не могут появляться вне описания строки таблицы <TR>. Завершающие коды </TR>, </TD> и </TH> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тег таблицы </TABLE> не может быть опущен.
Количество строк в таблице определяется числом открывающих тегов <TR>, а количество столбцов — максимальным количеством <TD> или <TH> среди всех строк. Часть ячеек могут не содержать никаких данных, такие ячейки описываются парой следующих подряд тегов — <TD>, </TD>. Если одна или несколько ячеек, располагающихся в конце какой-либо строки, не содержат данных, то их описание может быть опущено, а браузер автоматически добавит требуемое количество пустых ячеек. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается.
Таблица может иметь заголовок, который заключается в пару тегов <CAPTION> и </CAPTION>. Описание заголовка таблицы должно располагаться внутри тегов <TABLE> и </TABLE> в любом месте, однако вне области описания любого из тегов <TD>, <TH> или <TR>. Согласно спецификации языка HTML расположение описания заголовка регламентировано более строго: оно должно располагаться сразу же после тега <TABLE> и до первого <TR>. Мы рекомендуем придерживаться этого правила.
По умолчанию текст заголовка таблицы располагается над ней (ALIGN=TOP) и центрируется в горизонтальном направлении.
Перечисленные теги могут иметь параметры, число и значения которых различны. Однако в простейшем случае теги используются без параметров, которые принимают значения по умолчанию.
Этих сведений вполне достаточно для построения элементарных таблиц. Приведем пример простейшей таблицы, состоящей из двух строк и двух столбцов, отображение которой показано на рис. 4.3.
<TITLE>Пример простейшей таблицы</TITLE>
<TD>Ячейка 1 строки 1</TD>
<TD>Ячейка 2 строки 1</TD>
<TD>Ячейка 1 строки 2</TD>
<TD>Ячейка 2 строки 2</TD>
Рис. 4.З. Пример простейшей таблицы
Представление таблиц на странице
Рассмотрим назначение различных параметров, которые могут использоваться в тэгах, описывающих таблицы.
Заголовок таблицы <CAPTION>
Тэг заголовка таблицы <CAPTION> имеет единственный допустимый параметр ALIGN, принимающий значения ТОР (заголовок над таблицей) или BOTTOM (заголовок под таблицей). Параметр ALIGN может быть опущен, что соответствует значению ALIGN=TOP. В горизонтальном направлении заголовок таблицы всегда располагается по ее центру. Таблица может не иметь заголовка. В качестве заголовка таблицы в большинстве случаев используется простой текст, что регламентируется спецификацией HTML, однако в действительности между тэгами <CAPTION> и </CAPTION> допустимо записывать любые HTML-элементы, употребляемые в разделе <BODY>. Приведем пример записи заголовка таблицы:
<CAPTION ALIGN=BOTTOM>Заголовок, располагаемый внизу тaблицы</CAPTION>
Если данное описание заголовка добавить к приведенному выше примеру, то таблица будет отображаться так, как показано на рис. 4.4.
Рис. 4.4. Таблица с заголовком
Браузер Microsoft Internet Explorer предоставляет дополнительные возможности для выбора расположения заголовка. Параметр ALIGN допускает значения LEFT, CENTER и RIGHT для горизонтального выравнивания наряду с описанными выше значениями. Отметим, что это один из редких случаев, когда широко распространенный параметр ALIGN может использоваться и для горизонтального выравнивания, и для вертикального. Например, запись ALIGN=RIGHT обеспечит расположение заголовка, прижатого к правой стороне и размещенного над таблицей. Если записать ALIGN=BOTTOM, то так же, как и в приведенном выше примере, заголовок будет расположен под таблицей. Однако двойное использование в одном заголовке параметра ALIGN недопустимо. Поэтому дополнительно введен специальный параметр для вертикального выравнивания — VALIGN, принимающий значения ТОР или BOTTOM. Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, описание имеет следующий вид:
<CAPTION ALIGN=LEFT VALIGN=ВОТТОМ>Заголовок, располагаемый внизу с выравниванием влево</CAPTION>
Таблица с данным описанием заголовка в Microsoft Internet Explorer будет отображена следующим образом (рис. 4.5). Если данный пример просматривать в Netscape, то заголовок будет размещен по умолчанию, т. е. над таблицей и посередине в горизонтальном направлении.
Рис. 4.5. Горизонтальное выравнивание заголовка таблицы браузером Microsoft Internet Explorer
Возможности горизонтального выравнивания заголовка таблицы являются расширением спецификации HTML, не поддерживаются браузером Netscape Navigator, и поэтому ими следует пользоваться только в крайней необходимости.
Параметры тега <TABLE>
Основным тэгом, применяемым при создании таблиц, является тег <TABLE>. Он может использоваться с рядом параметров, каждый из которых допустимо опускать. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в тэге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Браузеры NetScape и Microsoft Internet Explorer разрешают кроме перечисленных пяти параметров использовать параметры HEIGHT и BGCOLOR. Отдельные браузеры позволяют также задавать и другие параметры. Рассмотрим назначение общеупотребительных параметров тега <TABLE>.
Параметр BORDER
Параметр BORDER управляет изображением рамки вокруг каждой ячейки, которые, по сути, дают линии сетки таблицы, и вокруг всей таблицы. По умолчанию рамки не рисуются, и на экране пользователь увидит лишь ровно расположенный текст ячеек таблицы. Существует немало ситуаций, когда использование таблиц без рамок вполне оправданно, например, для многоколонных списков, реализованных при помощи таблиц, или задания точного взаимного расположения рисунков и текста. Однако в большинстве случаев для традиционного использования таблиц ее ячейки полезно отделить друг от друга линиями сетки, что облегчает восприятие и понимание информации, содержащейся в таблице.
Для добавления в таблицу рамок необходимо включить в код <TABLE> параметр BORDER, который может иметь численное значение.
Например, <TABLE BORDER> или <TABLE BORDER=10> .
Численное значение параметра определяет толщину рамки в пикселах, рисуемую вокруг всей таблицы, однако на толщину рамок вокруг каждой ячейки это значение не влияет. При отсутствии численного значения обычно оно принимается равным минимальному значению (1), хотя для различных браузеров стиль показа рамок может отличаться. Возможность независимого управления отображением рамки вокруг всей таблицы и рамками вокруг ячеек отсутствует.
Пример таблицы с рамкой толщиной 10 пикселов приведен на рис. 4.6.
Рис. 4.6. Таблица с рамкой толщиной 10 пикселов
В спецификации HTML 3.0 не было включено значение для параметра BORDER. Это сделано лишь в HTML 3.2. Так, в частности, ранние версии Microsoft Internet Explorer не разрешали задания численного значения.
Отметим, что при отсутствии параметра BORDER рамки не прорисовываются, но место под них оставляется (это относится только к Netscape). Общий размер таблицы при отсутствии параметра BORDER или его наличии не изменяется (исключением является случай задания BORDER=0). Таким образом, минимальное расстояние между двумя соседними ячейками в этих случаях будет равно удвоенной толщине рамки, т. е. двум пикселам. Расположить ячейки как можно ближе друг к другу возможно заданием BORDER=0, что означает отсутствие рамок. Некоторые браузеры могут не поддерживать задание численного значения параметра BORDER, тогда значение, равное нулю, будет проигнорировано, и таблица будет прорисована с рамками.
Приведем несколько примеров:
Все три приведенных примера браузером Netscape будут отображены по-разному. Заметим, что здесь имеет место довольно уникальный случай, когда нельзя говорить о значении по умолчанию. Третий пример, в котором параметр BORDER опущен, отличается от любого примера, где этот параметр присутствует. Для Microsoft Internet Explorer второй и третий примеры идентичны, поэтому для этого браузера значение по умолчанию параметра BORDER равно нулю .
Параметр CELLSPACING
Форма записи параметра: CELLSPACING=num, где num — численное значение параметра в пикселах, которое не может быть опущено. Величина num определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию значение принимается равным двум. Заметим, что традиционно в издательских системах смежные ячейки таблицы имеют общую границу. В HTML-таблицах по умолчанию между ними оставляется место, что хорошо видно на приведенном выше рисунке (рис. 4.6). При задании CELLSPACING=0 рамки смежных ячеек сольются и создадут впечатление единой сетки таблицы (рис. 4.7).
Рис. 4.7. Таблица со значением CELLSPACING=0
Параметр CELLPADDING
Форма записи параметра аналогична CELLSPACING. Величина num определяет размер свободного пространства (отступа) между рамкой ячейки и данными внутри ячейки. По умолчанию значение принимается равным единице. Установка параметра CELLPADDING равным нулю может привести к тому, что некоторые части текста ячейки могут касаться ее рамки, что выглядит не очень эстетично.
На рис. 4.8 показан пример таблицы со значением CELLPADDING=10.
Рис. 4.8. Таблица со значением CELLPADDING=10
Действие параметров CELLPADDING и CELLSPACING очень похоже друг на друга. Для таблицы без рамок изменение того или другого параметра приводит к одному и тому же результату. Оба параметра влияют на соответствующие отступы одновременно по горизонтали и по вертикали. К сожалению, раздельного управления горизонтальными и вертикальными отступами так, как это сделано, например, для отступов от изображений (параметры HSPACE и VSPACE тега <IMG>), не предусмотрено.
Все три параметра — BORDER, CELLPADDING и CELLSPACING действуют независимо друг от друга, если какой-нибудь из них опущен, то берется его значение, принятое по умолчанию. В частности, если опущены все перечисленные параметры, то минимальное расстояние между данными из смежных ячеек будет равно 6 пикселам (для Netscape). Это значение складывается из двух пикселов для CELLSPACING, одного пиксела для CELLPADDING и одного пиксела для рамки каждой из ячеек. Наиболее компактная таблица будет получена заданием следующего описания:
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
Только в таком варианте ячейки будут расположены вплотную друг к другу. Примером использования может служить таблица, все ячейки которой содержат рисунки одинакового размера, которые необходимо расположить рядом друг с другом.
Параметры WIDTH и HEIGHT
При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. При отображении расчет размеров таблиц выполняется автоматически с учетом этих факторов, при этом делается попытка представить таблицу в наиболее удобном виде — расположить таблицу так, чтобы она помещалась и окне просмотра. Общая схема просмотра больших документов, как правило, сводится к линейной прокрутке содержимого документа по вертикали и чтении текста, перемежаемого различными таблицами, изображениями и т. п. Это относится как к HTML-документам, так и к обычным документам, создаваемым в любых текстовых редакторах. Большинство как текстовых редакторов (например, Microsoft Word), так и HTML-браузеров автоматически форматируют текст так (если возможно), чтобы длина строк не превосходила ширину окна просмотра. Это позволяет избежать необходимости горизонтальной прокрутки документа. Аналогичные действия предпринимаются браузерами с таблицами — по возможности форматировать их таким образом, чтобы ширина таблицы не превосходила ширины окна просмотра. Можно сделать вывод, что ширина таблиц является более важным, первостепенным параметром, расчет которого выполняется в первую очередь по сравнению с высотой.
В большинстве случаев динамическое определение размеров таблицы дает в результате эстетически соразмерное изображение с эффективным использованием реальной площади окна просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются параметры WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тега <TABLE>. Форма записи: WIDTH=num или WIDTH=num%, где num — численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна. Заметим, что допустимо задавать значения, большие 100%, хотя трудно представить себе случай, где это необходимо. Пример:
Аналогичные параметры могут задаваться и для отдельных ячеек. Заметим, что задание конкретного значения параметра, например WIDTH=200, не означает, что таблица в любом случае будет иметь указанную ширину, а лишь определяет рекомендуемую ширину, которая будет выдержана по возможности. Поясним это на примерах. Пусть имеется таблица, которая в данных условиях по умолчанию имела бы ширину, меньшую заданной. В этом случае браузер увеличит ширину таблицы до требуемой путем пропорционального расширения всех колонок таблицы. При сужении окна просмотра ширина таблицы изменяться не будет, и, возможно, для ее просмотра потребуется горизонтальная прокрутка. Если же таблица по умолчанию имеет ширину, большую заданной, то браузер сделает попытку уменьшить ее ширину за счет, во-первых, сокращения ширины отдельных колонок, для которых заданная ширина больше необходимой, во-вторых, разбиением текста в отдельных ячейках на несколько строк с увеличением высоты таблицы. Эти действия могут не обеспечить требуемого размера таблицы, и тогда она будет иметь минимально возможную ширину. Такие же действия предпринимаются для таблиц, у которых не указаны размеры, при сужении окна просмотра.
Конкретные алгоритмы настройки таблиц для различных браузеров могут несколько отличаться.
Параметр ALIGN
Данный параметр тега <TABLE> определяет горизонтальное расположение таблицы в области просмотра. Допустимые значения — LEFT (выравнивание влево) и RIGHT (выравнивание вправо). По умолчанию таблицы выровнены по левому краю. Заметим, что среди допустимых значений нет типичного значения для параметра выравнивания — CENTER. В некоторых источниках по языку HTML значение CENTER (по центру) приводится в качестве допустимого в данном случае. Это соответствует спецификации HTML, но на практике и Netscape Navigator, и Microsoft Internet Explorer реализуют только два значения. Дело в том, что присутствие параметра ALIGN в тэге <TABLE> не только определяет месторасположение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию картинок. Обтекание таблицы текстом с двух сторон не предусматривается ни в каких случаях. Для более точного управления обтеканием следует использовать тег <BR> с параметром CLEAR так же, как это выполняется для <IMG>. Если параметр ALIGN опущен, то место справа и/или слева от таблицы всегда будет пустым независимо от ее ширины. Если таблица не требует обтекания текстом, то можно добиться ее расположения по центру окна просмотра. Для этого, например, можно все описание таблицы поместить внутри пары тегов <CENTER> и </CENTER>.
Приведем пример таблицы с обтекающим текстом, отображение которой показано на рис. 4.9.
<TITLE>Таблица с обтекающим ее тeкстом</TITLE>
<TABLE ALIGN=LEFT WIDTH=70%>
<CAPTION><H3>Наиболее употребительные мужские имена<BR> взрослого
Свойство empty-cells
Свойство empty-cells указывает браузеру как отображать фон и границу пустых ячеек td или ячеек th HTML таблицы: показывать или нет.
Ячейка считается пустой в следующих случаях: нет вообще никаких символов, в ячейке содержится только пробел (один или несколько), перевод строки или символ табуляции, либо свойство visibility установлено как hidden .
Чтобы сделать ячейку не пустой, но при этом без видимого текста, используют следующий прием: в ячейку записывают неразрывный пробел .
Свойство не работает, если задан border-collapse в значении collapse .
Синтаксис
Значения
| Значение | Описание |
|---|---|
| show | Фон и граница показываются у пустой ячейки. |
| hide | Фон и граница не показываются у пустой ячейки. |
Значение по умолчанию: show .
Пример . Значение show
Сейчас в таблице некоторые ячейки пустые, но они все равно имеют границу и фон: