Подробно доходчиво о таблицах html5. Как убрать промежуток между рамками ячеек. Это большой текст
Working with tables in HTML5 has become more powerful due to the new HTML5 table tags and other elements available in HTML5. This tutorial will show you how to create and format your own tables using HTML5 table tags and elements. If you need to get your HTML5 skills up to speed in a hurry, check out the acclaimed HTML5 Beginners Crash Course and join thousands of students who are learning to harness the power of the new HTML5 tags. This course contains 46 lectures designed to turn beginners into competent web developers. The lessons start with HTML for newcomers, and the lessons will teach you all the tags and HTML elements you need to know to create your own HTML5 webpages. The course also covers how to use the HTML canvas and drawing elements. There are also lectures on geolocation, local storage and forms and will also includes lessons on how to add audio and video to your webpages. Let’s move on to table creation.
HTML5 Tables
Tables are not new to HTML but there are a few new tags available in HTML5. To define a table in HTML you need to use the
tag. Tables are divided into rows using the
tag. To define the cells in the table you need to use the
tag.
Tables can contain column elements, row elements, headers, footers and other elements. This tutorial will show you how to use the various table tags to define these elements and how to format the elements using style sheet options.
HTML5 Table Creation
Here is the code necessary to create your table:
Jack
Sales
555-5555
John
Admin
555-5555
James
Sales
555-5555
The table will be displayed as follows:
Note that HTML defaults to no borders unless you specify a border for the table. To specify borders for your table, you need to add the border element to your table tag:
The table will then look like this:
HTML5 Tables – Adding Headers and Footers
You can use the following tabs to create and format the headers and footers for your table:
– used to denote a table header cell – th stands for table header
– This element tag can be used to group content as the header of a table for formatting purposes
The tag can be used to group table content to format it as the body of the table
– set to group footer information for your table for formatting purposes.
Cells formatted using the
tag will be centered and the text will be bold. Table elements defined using the body tag
will be left aligned and the text will be normal.
All HTML5 attributes can be used to format the table using the ,
and tags. In this tutorial, we will use the color attribute to format the various elements of the table in different colors. We will set the header as green, the body as blue and the footer as red for this tutorial.
Take a look at the following code:
Name
Surname
Telephone
Jack
Sales
555-5555
John
Admin
555-5555
James
Sales
555-5555
Total
Total
Total
The table will look like this on your page:
Note that the Name, Surname and Telephone cells are all center aligned and bold because of the use of the
tag.
If you would like to learn more about HTML5 tags, try enrolling in the HTML5 Fundamentals course. This course offers 43 lessons that include all of the HTML fundamentals you need to know to create your own webpages. You will learn to work with text elements and how to format any text elements. The course will teach you how to create lists and links using HTML5. You will learn to work with tables and images and you will learn website basics to ensure your websites work on various browsers.
HTML5 Tables – Formatting Columns
The column group tag allows you to specify formatting to columns within your table. If you want to add specific formatting to columns in your table then you can specify the elements and formats using the
tag.
The
tag must appear within the table it is being used to format. The span element within the
tag can be used to span multiple columns. If no span element is defined, the formatting will be applied to a single column. All HTML formatting attributes can be used for formatting purposes. For our table we will use the background color attribute to format background color of the various columns.
Take a look at the code below:
Name
Surname
Telephone
Jack
Sales
555-5555
John
Admin
555-5555
James
Sales
555-5555
Total
Total
Total
This is what the table will look like:
HTML5 Tables are Easy
Tables are often a great way to present your data. The HTML5 tags make table creation and formatting really simple.
If you are eager to learn how to take advantage of the new HTML5 tags, then sign up to Learn HTML 5 today. This course offers 44 lectures that will teach you all about the HTML building blocks needed to create a page in HTML5. You will learn about the commonly used HTML tags and how to use them in your development. The course will teach you how to create forms and use the form tags. You will learn how to style HTML. Once you are familiar with HTML basics, the course will teach you about advanced HTML concepts like scripting and handling events. The course will help you create responsive, interactive websites using HTML5.
Создание таблиц
Таблицы HTML создаются в четыре этапа.
На первом этапе в HTML-коде с помощью парного тега
формируют саму таблицу:
Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она размещается отдельно от всех остальных блочных элементов: абзацев, заголовков, больших цитат, аудио- и видеороликов. Так что вставить таблицу в абзац мы не сможем. (Нужно сказать, что таблица в абзаце выглядела бы, по меньшей мере, странно…)
На втором этапе формируют строки таблицы. Для этого предусмотрены парные теги
; каждый такой тег создает отдельную строку. Теги
помещают внутрь тега
(листинг 5.1).
Листинг 5.1
На третьем этапе создают ячейки таблицы, для чего используют парные теги
и
. Тег создает обычную ячейку, а тег - ячейку заголовка
, в которой будет помещаться "шапка" соответствующего столбца таблицы. Теги
и
помещают в теги
, создающие строки таблицы, в которых должны находиться эти ячейки (листинг 5.2).
Листинг 5.2
На четвертом, последнем, этапе указывают содержимое ячеек, которое помещают в соответствующие теги
и
(листинг 5.3).
Листинг 5.3
Столбец 1
Столбец 2
Столбец 3
Ячейка 1.1
Ячейка 1.2
Ячейка 1.3
Ячейка 2.1
Ячейка 2.2
Ячейка 2.3
Если нам нужно поместить в ячейку таблицы простой текст, мы можем просто вставить его в соответствующий тег
или
(как показано в листинге 5.3). При этом заключать его в теги, создающие блочные элементы, необязательно.
Если нам потребуется как-то оформить содержимое ячеек, мы применим изученные в главе 3
теги. Например, мы можем придать номерам ячеек особую важность, воспользовавшись тегом ; в результате они будут выведены курсивом (Листинг 5.4).
Листинг 5.4
Ячейка 1.1
Ячейка 1.2
Ячейка 1.3
Еще мы можем поместить в ячейку графическое изображение:
Но часто бывает необходимо поместить в ячейку таблицы большой текст, иногда состоящий из нескольких абзацев. В таком случае пригодятся знакомые нам по главе 2
теги, создающие блочные элементы страницы. Теги
и
это позволяют (листинг 5.5).
Листинг 5.5
Это большой текст
Это начало большого текста, представляющего собой содержимое ячейки таблицы.
Это продолжение большого текста, представляющего собой содержимое ячейки таблицы.
А это долгожданное окончание большого текста.
Данный HTML-код помещает в ячейку таблицы заголовок и четыре абзаца. Причем один из этих абзацев содержит графическое изображение, а часть другого помечена как очень важная (и будет набрана полужирным шрифтом).
HTML-код, создающий таблицы, может показаться несколько громоздким. Но это плата за исключительную гибкость таблиц HTML. Мы можем поместить в таблицу любое содержимое: абзацы, заголовки, изображения, аудио- и видеоролики и даже другие таблицы.
Теперь настала пора рассмотреть правила, которыми руководствуются Web-обозреватели при выводе таблиц на экран.
Таблица представляет собой блочный элемент Web-страницы (об этом мы уже говорили).
Размеры таблицы и ее ячеек делаются такими, чтобы полностью вместить их содержимое.
Между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ.
Текст ячеек заголовка выводится полужирным шрифтом и выравнивается по центру.
Рамки вокруг всей таблицы и вокруг отдельных ее ячеек не рисуются.
Таблица - всего лишь содержимое Web-страницы, а за ее вывод "отвечает" представление. (Подробнее о содержимом и представлении Web-страницы см. в главе 1
.) Если нам нужно, например, вывести вокруг таблицы рамку, мы сможем создать соответствующее представление. Этим мы и займемся в части II
.
И еще несколько правил, согласно которым создается HTML-код таблиц. Если их нарушить, Web-обозреватель отобразит таблицу некорректно или не выведет ее вообще.
Тег
может находиться только внутри тега
(кроме заголовка и секций таблицы, речь о которых пойдет далее) будет проигнорировано.
Теги
и
могут находиться только внутри тега
. Любое другое содержимое тега
будет проигнорировано.
Содержимое таблицы может находиться только в тегах
и
.
Ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web- обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал).
Все, с теорией покончено. Настала пора практики. Давайте поместим на Web- страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии.
Листинг 5.6 содержит фрагмент HTML-кода Web-страницы index.htm, создающий такую таблицу.
Листинг 5.6
Пожалуй, ни убавить ни прибавить…
Список версий HTML:
Версия HTML
Год выхода
Особенности
1.0
1992
Официально не была стандартизована
Есть три элемента, которые должна содержать каждая таблица: table , tr и td . Есть и другие элементы, и я объясню их позже в этой главе, но начинать нужно с этих трех. Первый элемент, table , является сердцем поддержки табличного контента в HTML и обозначает таблицу в HTML документе. В представлен элемент table .
Таблица 11-2:
Элемент table
Следующим основным элементом таблицы (table) является tr , который обозначает строку таблицы. В HTML таблицах строки играют большую роль, чем столбцы, и каждая строка должна быть обозначена отдельно. В представлен элемент tr .
Таблица 11-3:
Элемент tr
Последним из трех основных элементов является td , который обозначает ячейку таблицы. В представлен элемент td .
Таблица 11-4:
Элемент td
После определения этих трех элементов их можно объединить и создать таблицу, как показано в .
Листинг 11-1:
Использование элементов table , tr и td для создания таблицы
Example
Apples
Green
Medium
Oranges
Orange
Large
В этом примере я определил элемент table , в котором есть две строки (обозначаются двумя элементами tr). Каждая строка состоит из трех столбцов, каждый из которых представлен элементом td . Элемент td может содержать любой потоковый контент, но в этом примере я вставил туда простой текст. На вы можете видеть, как отображается таблица со стилями по умолчанию.
Рисунок 11-1:
Отображение простой таблицы
Это очень простая таблица, но вы можете увидеть в ней основную структуру. Браузер отвечает за размеры строк и столбцов для поддержки таблицы. В качестве примера я добавил в таблицу больше контента, как показано в .
Листинг 11-2:
Больше контента в ячейках таблицы
Example
Apples
Green
Medium
Oranges
Orange
Large
Pomegranate
A kind of greeny-red
Varies from medium to large
В каждом из вновь добавленных элементов td содержания больше, чем в двух предыдущих рядах. Вы можете увидеть, как браузер меняет другие ячейки, чтобы сделать их одинакового размера, что показано на
Если необходимо отобразить описание таблицы, то его можно поместить в элемент
, располагаемый сразу за открывающим тегом
. Далее последовательно располагаются строки таблицы, обозначаемые тегом
. Каждая строка содержит в себе ячейки
или
, формируя таким образом столбцы таблицы.
Элементы
обозначают ячейки с заголовками столбцов или строк. Содержимое их по умолчанию отображается браузерами жирным начертанием и центрируется. Тег
же предназначен для всех остальных ячеек с данными. Наличие заголовков
не является обязательным, но в таблице должна быть хотя бы одна строка с одной ячейкой.
можно определить, будут ли ячейки таблицы обведены рамкой или нет. Значение 1 указывает, что рамка нужна, пустое значение — нет.
Объединение ячеек
Логично, что в каждой строке должно быть одинаковое количество ячеек, чтобы таблица имела прямоугольный вид. Но как быть, если необходимо растянуть какую-нибудь ячейку на несколько столбцов или строк? На помощь приходят атрибуты colspan и rowspan элементов
и
. Присвоив ячейке атрибут colspan="3" , вы сообщите браузеру, что этот элемент занимает место трех ячеек в строке — свое собственное и двух следующих. Соответственно, две следующих ячейки указывать не нужно, и строка будет содержать на 2 элемента
(или
) меньше.
Объединение ячеек в таблице
Аналогично, атрибут rowspan="2" , например, в пятой ячейке строки означает, что она занимает два места в своем столбце, и в следующем элементе
пятую ячейку нужно пропустить. Помните, что если вы примените один из этих атрибутов, но забудете удалить «лишние» ячейки, то браузер сместит их в следующий столбец, передвинув остальные ячейки еще дальше и исказив тем самым таблицу.
Группирование строк и столбцов
Еще 5 тегов предназначены для объединения строк и столбцов в группы. Это необходимо, когда, например, одна ячейка заголовка соответствует нескольким столбцам с данными или, скажем, последняя строка таблицы содержит итоговые значения, лексически выделяясь на фоне остальных строк.
Популяция фруктовых мух
Для объединения строк
в группы предназначены три тега. Во-первых, строки с ячейками заголовка можно поместить в элемент . Во-вторых, завершающие строки с «итоговыми» ячейками — в элемент
. Наконец, все остальные строки с данными группируются в одном или нескольких элементах . Таким образом вы можете сформировать необходимое вам количество групп. Несмотря на то, что строки из будут отображены последними, размещать сам элемент можно как после последнего, так и перед первым элементом (после ). В одной таблице может быть только по одному элементу и , и любое количество . Визуально эти теги не отличаются, пока вы не определите для них соответствующие стили CSS.
Приведенный выше пример таблицы формируется приблизительно таким кодом:
Средний
Красноглазых
Размер
Вес
Среднее
1.8
0.0025
41.5%
Самцы
1.9
0.003
40%
Самки
1.7
0.002
43%
Если вы используете или
, то должны использовать и . Причем в каждой из групп обязательно должна быть хотя бы одна строка
, и не должно быть строк вне групп.
Для группирования столбцов
применяется пустой тег
и парный
. В отличие от элементов, группирующих строки, эти теги размещаются сразу после элемента
или, если его нет, за открывающим тегом
. Они не включают в себя ячейки, а лишь указывают на объединяемые столбцы. Оба тега поддерживают атрибут span , значением которого является количество группируемых столбцов. Если span не указан, то он считается равным единице.
На самом деле,
не создает группу, а лишь позволяет определить общие атрибуты столбцов без необходимости указывать их в каждой ячейке. Например, чтобы назначить всем ячейкам первых двух столбцов class="myData" , достаточно добавить в начало таблицы элемент:
позволяет сделать то же самое, но при этом лексически объединяет столбцы в группу. Бывает необходимость сгруппировать столбцы, но присвоить им разные классы или другие стандартные атрибуты. В таком случае в элемент
помещается необходимое количество тегов
. При этом атрибут span указывается только в них, а его значение для
определяется автоматически, как сумма значений span , присвоенных расположенным внутри элементам
. Другие теги в
запрещены.
Размещая последовательно несколько элементов
и/или
в таблице, можно добиться группирования столбцов любым необходимых образом. Помните, что если вы применяете эти теги, то в итоге должны перечислить в них все столбцы таблицы, количество которых определяется строкой, с наибольшим количеством ячеек. Например, если в таблице 5 столбцов, а вам необходимо сгруппировать только второй и третий, указав им классы second и myGroup соответственно, то выглядеть это будет следующим образом:
Атрибут scope элемента
позволяет указать, относится ли этот заголовок к строке, столбцу или какой-либо группе. Допустимые значения:
Элементы
и
поддерживают также атрибут headers , позволяющий дополнительно указать заголовки, относящиеся к данной ячейке. Для этого у ячеек с этими заголовками должны быть указаны id , которые и надо перечислить в атрибуте headers через пробел.
7 комментариев
По сравнению с html4.1 изменений я не заметил.
Да, нововведений в таблицах нет. Однако большинство старых атрибутов не поддерживается:
оставлена только поддержка colspan , rowspan и headers (и еще scope для
);
В элементах
и
оставлен только атрибут span ;
Прочие атрибуты более не поддерживаются (не считая глобальных), хотя браузеры, вероятно, будут их обрабатывать в целях обратной совместимости. В качестве альтернативы предлагается использовать CSS.
P.S. Есть некоторые дополнения в DOM. В частности, у элемента
появился новый метод createTBody() .
createTBody() - это типо создает тело таблицы как я понял?
Верно, создает элемент
, вставляет его в конец таблицы (или за последним , если таковой имеется) и возвращает ссылку.
Var tbody = table.createTBody();
А как расчертить таблицу?
Максим, ваш вопрос не совсем понятен. Для визуального оформления используйте CSS.
До данной главы всё предельно понятно было, а с таблицами не пойму что к чему. :(
The HTML
tag is used for defining a table. The
tag contains other tags that define the structure of the table.
Table Elements
Tables consist of the
element as well as other table-related elements. These other elements are nested inside the
tags to determine how the table is constructed.
The
element can contain the following elements (and in this order):
optionally a tag
followed by zero or more tags
followed optionally by a tag
followed optionally by a tag
followed by either zero or more tags or one or more tags
followed optionally by a tag (but there can only be one tag child in total)
optionally intermixed with one or more script-supporting elements (i.e. either tag or ) tag
Global Attributes
The following attributes are standard across all HTML 5 tags.
accesskey
class
contenteditable
contextmenu
draggable
dropzone
hidden
itemid
itemprop
itemref
itemscope
itemtype
spellcheck
style
tabindex
title
translate
Event Handler Content Attributes
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
Here are the standard HTML 5 event handler content attributes.
