Html5 таблицы


Каждая таблица состоит из строк и ячеек, минимально может быть одна строка и одна ячейка. В таком случае, впрочем, непонятно, зачем использовать таблицу, потому что как такового табличного представления уже нет. Кроме того, таблице можно задать заголовок, который кратко описывает её содержимое, указать «шапку», «тело» и «подвал» таблицы. Они нужны для стилевого или смыслового выделения части данных. В примере 1 показано создание таблицы, содержащей все упомянутые компоненты.

Пример 1. Создание таблицы

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Таблица</title>   <style>   table {   width: 100%; /* Ширина таблицы */   border-collapse: collapse; /* Убираем двойные границы */   }   td, th {   border: 1px solid #333; /* */   padding: 3px; /* Поля в ячейках */   }   thead, tfoot {   background: #f0f0f0; /* Цвет фона */   }   tbody:hover {   background: #f5e0.  

t;td>Горячая штамповка</td> <td>20, Ст3кп3, Ст3сп3</td> <td>ГОСТ 1050–79</td> </tr> </tbody> <tbody> <tr> <td rowspan="2">5</td> <td>Холодная штамповка</td> <td>10, 10кп</td> <td>ГОСТ 0702–78</td> </tr> <tr> <td>Горячая штамповка</td> <td>20</td><td></td> </tr> </tbody> <tbody> <tr> <td>6</td> <td>Холодная штамповка</td> <td>10, 10кп, 15, 15кп</td> <td>ГОСТ 0702–78</td> </tr> </tbody> <tbody> <tr> <td rowspan="2">8, 9</td> <td>Горячая штамповка</td> <td>35</td> <td rowspan="2">ГОСТ 1050–74<br>ГОСТ 4543–71<br>ГОСТ 10702–78</td> </tr> <tr> <td>Холодная штамповка</td> <td>20, 20кп</td> </tr> </tbody> <tfoot> <tr> <th>Класс прочности</th> <th>Технологические процессы</th> <th>Марка стали</th> <th>Обозначение стандарта</th> </tr> </tfoot> </table> </body> </html>

Результат данного примера показан на рис. 1.

Таблица с заголовком, «шапкой» и «подвалом»

Рис. 1. Таблица с заголовком, «шапкой» и «подвалом»

При использовании элементов <thead>, <tbody> и <tfoot> придерживайтесь следующих правил.

  • Заголовок таблицы <caption> пишется в самом верху таблицы, сразу после открывающего тега <table>.
  • <thead> вставляется вверху таблицы, сразу после заголовка, если он присутствует.
  • <tfoot> вставляется после <tbody>, при этом отображается всегда в самом низу таблицы.
  • Элемент <tbody> для таблиц нужен обязательно, но для простых таблиц без <thead> и <tfoot> его можно не указывать. Браузеры сами научились вставлять его автоматически в код, понимая, что большинство разработчиков ленятся добавлять элемент, который визуально никак не влияет на таблицу.
  • <tbody> может быть один или несколько, вы сами решаете, по какому принципу их добавлять. Например, в примере выше в некоторых строках имеются объединения ячеек и чтобы строки при наведении на них курсора мыши выделялись как нам требуется, мы их объединяем в <tbody> согласно нашей логике.

Колонки

Кроме объединения группы строк через <thead> есть ещё один способ группирования ячеек — по колонкам с помощью элементов <col> и <colgroup>. Каждая колонка таблицы сопоставляется со своим элементом <col> который пишется после открывающего тега <table>. Часть колонок можно объединять с помощью атрибута span, его значением выступает число объединяемых колонок. Элементы <col> допустимо помещать в один или несколько <colgroup>, объединяя колонки согласно нашим понятиям.

Элементы <col> и <colgroup> никак не влияют на вид таблицы и её отображение в браузере и применяются только со стилями, как показано в примере 2. Между колонками здесь добавляются двойные линии.

Пример 2. Колонки таблицы

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Таблица</title>   <style>   table {   width: 100%;   border-collapse: collapse;   }   td, th {   border: 1px solid #333;   padding: 3px;   }   col { border-left: 4px double #333; }   col:first-child { border-left-width: 1px; }   </style>   </head>   <body>   <table>   <colgroup>   <col>   <col span="3".  

<td>5</td><td>5,6</td> <td>5,8</td><td></td> <td>≤ М16</td> </tr> <tr> <td>6</td><td>6,8</td> <td></td><td></td> <td>≤ М48</td> </tr> </table> </body> </html>

Результат данного примера показан на рис. 2. Заметим, что похожего результата можно добиться заменив в стилях селектор col на td и th.

Двойные линии между колонок

Рис. 2. Двойные линии между колонок

webref.ru

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 <table> tag. Tables are divided into rows using the <tr> tag. To define the cells in the table you need to use the <td> 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:

<table style="width:300px"><tr><td>Jack</td><td>Sales</td><td>555-5555</td></tr><tr><td>John</td> <td>Admin</td> <td>555-5555</td> </tr> <tr> <td>James</td> <td>Sales</td> <td>555-5555</td> </tr> </table>

The table will be displayed as follows:

HTML51

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:

<table border=”1″ style=”width:300px”>

The table will then look like this:

HTML55

HTML5 Tables – Adding Headers and Footers

You can use the following tabs to create and format the headers and footers for your table:


  • <th> – used to denote a table header cell – th stands for table header
  • <thead> – This element tag can be used to group content as the header of a table for formatting purposes
  • The <tbody> tag can be used to group table content to format it as the body of the table
  • <tfoot> – set to group footer information for your table for formatting purposes.

Cells formatted using the <th> tag will be centered and the text will be bold. Table elements defined using the body tag <td> will be left aligned and the text will be normal.

All HTML5 attributes can be used to format the table using the <thead>, <tbody> and <tfoot> 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:

<!DOCTYPE html><html><head><style>thead {color:green;} tbody {color:blue;} tfoot {color:red;} table,th,td {border:1px solid black;} </style> </head> <body> <table border="1" style.  

gt; <tfoot> <tr> <td>Total</td> <td>Total</td> <td>Total</td> </tr> </tfoot> </table> </body> </html>

The table will look like this on your page:

HTML53

Note that the Name, Surname and Telephone cells are all center aligned and bold because of the use of the <th> 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 <colgroup> tag.

The <colgroup> tag must appear within the table it is being used to format. The span element within the <colgroup> 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:

<!DOCTYPE html><html><head><style>thead {color:green;} tbody {color:blue;} tfoot {color:red;} table,th,td {border:1px solid black;} </style> </head> <body> <table border="1" style="width:300px"> <thead> <tr> <th>Name</th> <th>Surname</th> <th>Telephone</th> </tr> </thead> <tbody> <tr> <td>Jack</td> <td>Sales</td> <td>555-5555</td> </tr> <tr> <td>John</td> <td>Admin</td> <td>555-5555</td> </tr> <tr> <td>James</td> <td>Sales</td> <td>555-5555</td> </tr> <tbody> <tfoot> <tr> <td>Total</td> <td>Total</td> <td>Total</td> </tr> </tfoot> </table> </body> </html>

This is what the table will look like:
HTML54


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.

 

blog.udemy.com

Объединение столбцов

Объединение столбцов в элементах <td> (ячейка данных) или <th> (заголовочная ячейка) допускается производить с помощью атрибута colspan (при этом ячейка растягивается вправо на заданное количество ячеек).


 <!DOCTYPE html> <html> 	<head> 		<title>Пример объединения столбцов в таблицах</title> 	</head> 	<body> 		<table border = "1"> <!--начало содержимого таблицы--> 			<caption>Элементарная таблица</caption>  <!--наименование таблицы--> 			<tr> <!--описываем первую строку--> 				<th colspan = "2">Ячейка заголовка 1</th> <!--растягиваем на 2 ячейки--> 				<th>Ячейка заголовка 2</th>  			</tr>  			<tr> <!--описываем вторую строку--> 				<td>Ячейка данных 1 Строка 2</td><td>Ячейка данных 2 Строка 2</td><td>Ячейка данных 3 Строка 2</td> 			</tr> 			<tr> <!--описываем третью строку--> 				<td>Ячейка данных 1 Строка 3</td><td>Ячейка данных 2 Строка 3</td><td>Ячейка данных 3 Строка 3</td> 			</tr> 		</table> <!--конец таблицы--> 	</body> </html> 

Результат нашего примера:

Рис. 18 Пример таблицы с объединёнными столбцами на HTML.
Рис. 18 Пример таблицы с объединёнными столбцами на HTML.

Объединение строк

Объединение строк в элементах <td> или <th> допускается с помощью атрибута rowspan (диапазон ячеек задается сверху вниз и охватывает несколько строк – ячейка растягивается вниз).

 <!DOCTYPE html> <html> 	<head> 		<title>Пример объединения строк в таблицах</title> 	</head> 	<body> 		<table border = "1"> <!-- начало содержимого таблицы--> 			<caption>Элементарная таблица</caption> <!--наименование таблицы--> 			<tr> <!--описываем первую строку--> 				<th colspan = "2">Ячейка заголовка 1</th><!--растягиваем на 2 ячейки--> 				<th>Ячейка заголовка 2</th> 			</tr> 			<tr><!--описываем вторую строку--> 				<td rowspan = "2">Ячейка данных 1 Строка 2</td><td>Ячейка данных 2 Строка 2</td><td>Ячейка данных 2 Строка 3</td> 			</tr> 			<tr> <!--описываем третью строку (первая ячейка занята предыдущей строкой) --> 				<td>Ячейка данных 2 Строка 3</td><td>Ячейка данных 3 Строка 3</td> 			</tr> 		</table> <!--конец таблицы--> 	</body> </html> 

Результат нашего примера:

Рис. 19 Пример таблицы с объединёнными столбцами и строками на HTML.
Рис. 19 Пример таблицы с объединёнными столбцами и строками на HTML.

Свойства столбцов

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

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

Пример использования атрибута span к отдельным столбцам таблицы:

 <!DOCTYPE html> <html> 	<head> 		<title>Применение стилей к отдельным столбцам таблицы</title> 	</head> 	<body> 		<table> 			<colgroup> 	<!-- задаем определённый стиль для двух колонн (атрибут span="2"), а после для каждой последующей свой --> 				<col span = "2" style = "background-color:khaki">  				<col style = "background-color:silver"> 				<col style = "background-color:coral"> 			</colgroup> 			<tr> 				<th>№ заявки </th><th>Услуга</th><th>Цена, руб.</th><th>Итого</th> 			</tr> 			<tr> 				<td>31337</td><td>Чтение в слух</td><td>1 000</td><td>1 000</td> 			</tr> 		</table> 	</body> </html>  

Результат нашего примера:

Рис. 20 Свойства столбцов в HTML таблице.
Рис. 20 Свойства столбцов в HTML таблице.

Если Вам необходимо стилизовать только один столбец, то достаточно указать атрибут span внутри элемента <colgroup>, а не внутри элемента <col>:

 <!DOCTYPE html> <html> 	<head> 		<title>Пример использования атрибута span HTML тега <colgroup></title> 	</head> 	<body> 		<table> 			<colgroup span = "2" style = "background-color:lime"> 			</colgroup> 			<tr> 				<th>№ заявки</th><th>Услуга</th><th>Цена, руб.</th><th>Комиссия, руб.</th> 			</tr> 			<tr> 				<td>31337</td><td>Чтение в слух</td><td>1 000</td><td>150</td> 			</tr> 		</table> 	</body> </html> 

Результат нашего примера:

Рис. 21 Пример использования атрибута span HTML тега <colgroup> (определяет какое количество столбцов должна охватывать группа).
Рис. 21 Пример использования атрибута span HTML тега <colgroup> (определяет какое количество столбцов должна охватывать группа).

Разделение таблицы на части

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

  • Тег <thead> используется для содержания заголовка группы в таблице («шапка таблицы», не путайте с заголовками).
  • Тег <tfoot> используется для содержания «подвала» таблицы (футер).
  • Тег <tbody> используется для содержания «тела» таблицы (боди).


Элемент <thead> должен быть использован только один раз в одной таблице в следующем контексте: в составе элемента <table> (как дочерний (вложенный) элемент), при наличии тегов <caption> (наименование таблицы) и <colgroup> (определяет группу столбцов в таблице) должен следовать после этих элементов, но прежде, чем любой тег <tbody>, <tfoot> и <tr>. Кроме того, элемент <thead> должен иметь один или более тегов <tr> внутри (контейнер для создания строки).


Элементы <thead>, <tbody> и <tfoot> не влияют на расположение таблицы по умолчанию. Тем не менее, с использованием CSS, вы сможете стилизовать эти элементы по своему усмотрению.

Пример:

 <!DOCTYPE html> <html> 	<head> 		<title>Пример использования тега <thead></title> 	</head> 	<body> 		<table> 			<thead style="background-color:silver"> 				<tr> 					<th>Услуга</th><th>Стоимость</th> 				</tr> 			</thead> 			<tfoot style="background-color:coral"> <!-- Тег <tfoot> применяется для создания подвала таблицы. Его принято писать после тега<thead>, но отображается он в самом низу таблицы. --> 				<tr> 					<td>Сумма</td><td>3 000</td> 				</tr> 			</tfoot> 			<tbody style="background-color:khaki"> 				<tr> 					<td>Чтение в слух</td><td>1 000</td> 				</tr> 				<tr> 					<td>Игра на перфораторе</td><td>2 000</td> 				</tr> 			</tbody> 		</table> 	</body> </html> 

Результат нашего примера:

Рис. 22 Пример использования тегов <thead>, <tbody> и <tfoot>.
Рис. 22 Пример использования тегов <thead>, <tbody> и <tfoot>.

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

Тег Описание
<table> Определяет содержимое таблицы.
<caption> Определяет наименование таблицы.
<th> Определяет заголовочную ячейку таблицы.
<tr> Определяет строку таблицы.
<td> Определяет ячейку данных таблицы.
<thead> Используется для содержания заголовка группы в таблице (шапка таблицы).
<tbody> Используется для содержания «тела» таблицы.
<tfoot> Используется для содержания «подвала» таблицы (футер).
<col> Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>.
<colgroup> Определяет группу столбцов в таблице.


basicweb.ru

Основные html теги таблицы

Чтобы сделать таблицу в html, достаточно следующих тегов:

<table>…</table> обрамление самой таблицы;
<tr>…</tr> обрамление строки таблицы;
<td>…</td> обрамление обычной ячейки таблицы;
<th>…</th> обрамление особой ячейки таблицы (текст, размещенный между этими тегами, отображается жирным начертанием с выравниванием по центру).

По умолчанию вокруг ячеек таблицы рамок нет.

Пример
<style type="text/css">  table {  border-collapse: collapse;  }  table th,  table td {  padding: 0 3px;  }  table.brd th,  table.brd td {  border: 1px solid #000;  } </style> <h3>Таблица без рамок</h3> <table>  <tr>  <th>Имя</th>  <th>Фамилия</th>  </tr>  <tr>  <td>Лариса</td>  <td>Исаева</td>  </tr>  <tr>  <td>Дмитрий</td>  <td>Колесников</td>  </tr> </table> <h3>Таблица c рамками</h3> <table class="brd">  <tr>  <th>Имя</th>  <th>Фамилия</th>  </tr>  <tr>  <td>Лариса</td>  <td>Исаева</td>  </tr>  <tr>  <td>Дмитрий</td>  <td>Колесников</td>  </tr> </table>
Атрибуты тегов <td> и <th> для объединения ячеек
colspan Число столбцов, перекрываемых ячейкой
rowspan Число строк, перекрываемых ячейкой
Пример
<style type="text/css">  table {  border-collapse: collapse;  }  table th,  table td {  padding: 0 5px;  border: 1px solid #000;  text-align: center;  } </style> <table>  <tr>  <td rowspan="2"></td>  <td colspan="2">хорьки</td>  </tr>  <tr>  <td>вес</td>  <td>размер</td>  </tr>  <tr>  <td>самцы</td>  <td>1.2 – 2.5 кг</td>  <td>до 70см</td>  </tr>  <tr>  <td>самки</td>  <td>0.7 – 1.0 кг</td>  <td>до 40см</td>  </tr> </table>

Теги группирования строк html таблицы

Для создания более сложных таблиц можно использовать теги:

<caption>…</caption> обрамление заголовка таблицы (текст, размещенный между этими тегами, выравнивается по центру).
В исходном коде тег <caption> ставится сразу после тега <table>;
<thead>…</thead> обрамление шапки таблицы
(в одной таблице допускается не более одного тега <thead>);
<tbody>…</tbody> группирует строки таблицы в один табличный блок
(таких блоков в таблице может быть несколько);
<tfoot>…</tfoot> обрамление футера, т.е. нижней, завершающей части таблицы
(в одной таблице допускается не более одного тега <tfoot>).
В исходном коде тег <tfoot> ставится до тега <tbody>.
Пример
<style type="text/css">  table {  border-collapse: collapse;  }  table th,  table td {  padding: 0 3px;  }  table tr td:last-child {  text-align: right;  }  table tbody {  border-top: 1px solid #000;  border-bottom: 1px solid #000;  } </style> <table>  <caption>Потребление пива</caption>  <thead>  <tr>  <th>Ф.И.О.</th>  <th>литров</th>  </tr>  </thead>  <tfoot>  <tr>  <td>Итого</td>  <td>250</td>  </tr>  </tfoot>  <tbody>  <tr>  <td>Иванов Иван Иванович</td>  <td>133</td>  </tr>  <tr>  <td>Петров Петр Петрович</td>  <td>117</td>  </tr>  </tbody> </table>

Теги группирования столбцов html таблицы

<colgroup>…</colgroup>

группирование столбцов для более удобного форматирования.
В исходном коде тег <colgroup> ставится после открывающего тега <table> и после тега <caption> (если он присутствует), перед тегами <thead>, <tbody>, <tfoot> и <tr>;
<col> один или несколько столбцов в контейнере <colgroup>…</colgroup>
(<col> – одиночный тег).
Атрибут тегов <colgroup> и <col>
span Число столбцов, следующих друг за другом

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

Тег col устанавливает параметры отдельно для каждого столбца. При этом неважно, как написать в исходном коде:

<colgroup><col span="3"></colgroup> или <colgroup><col><col><col></colgroup>

Пример
<style type="text/css">  table {  width: 200px;  }  col {  border: 1px solid #000;  width: 25%;  }  th {  border: 1px solid #000;  padding: 5px;  }  tr {  height: 20px;  } </style> <table>  <colgroup style="background-color: yellow"><col span="2"></colgroup>  <colgroup style="background-color: red"><col><col></colgroup>  <tr>  <th colspan="2">желтый</th>  <th colspan="2">красный</th>  </tr>  <tr><td></td><td></td><td></td><td></td></tr>  <tr><td></td><td></td><td></td><td></td></tr>  <tr><td></td><td></td><td></td><td></td></tr>  <tr><td></td><td></td><td></td><td></td></tr> </table>

Горизонтальное выравнивание текста в определенном столбце таблицы можно изменить, указав стиль text-align для псевдокласса td:nth-child(n), где n – номер столбца. Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan.

htmlweb.ru

Простая HTML таблица

Чтобы создать простую таблицу HTML достаточно 3 тега: <table>, <tr> и <td>.

Тег <table> является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.

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

В HTML таблицах строка (ряд) <tr> является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка <td> внутри строки <tr> будет в первой колонке, второй элемент <td> — во второй колонке и так далее.

Для разделения таблицы на колонтитулы (об этом ниже) и основную часть, как обвертку строк <tr> основной части таблицы используют тег <tbody>. Его использование не обязательно в простых таблицах, однако некоторые браузеры и HTML редакторы добавляют его автоматически, поэтому в примерах ниже мы также будем его использовать. Если ваша таблица не имеет колонтитулов, вы можете не использовать тег <tbody>.

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

Исходный код простой таблицы HTML

<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</tbody>
</table>

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

В HTML таблицах существует 2 типа ячеек. Тег <td> определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега <th>.

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

Пример HTML таблицы с заголовком th

Исходный код таблицы HTML с заголовками th

<table>
<tbody>
<tr>
<th>Volkswagen AG</th>
<th>Daimler AG</th>
<th>BMW Group</th>
</tr>
<tr>
<td>Audi</td>
<td>Mercedes-Benz</td>
<td>BMW</td>
</tr>
<tr>
<td>Skoda</td>
<td>Mercedes-AMG</td>
<td>Mini</td>
</tr>
<tr>
<td>Lamborghini</td>
<td>Smart</td>
<td>Rolls-Royce</td>
</tr>
</tbody>
</table>

Объединение ячеек в таблице HTML

В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

<td colspan="3" rowspan="2">Текст ячейки</td>

Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке <tr>. Например, если в таблице 3 колонки с ячейками <td>, и мы объединяем первую и вторую ячейку, то всего внутри тега <tr>, определяющего данную строку будет 2 элемента <td>, первый из них будет содержать атрибут colspan=»2″.

Пример HTML таблицы с объединением ячеек

Исходный код таблицы HTML с объединенными ячейками

<table>
<tbody>
<tr>
<th colspan="3">Nissan</th>
</tr>
<tr>
<th>Модель</th>
<th>Комплектация</th>
<th>Наличие</th>
</tr>
<tr>
<td rowspan="2">Nissan Qashqai</td>
<td>VISIA</td>
<td>+</td>
</tr>
<tr>
<td>TEKNA</td>
<td>+</td>
</tr>
<tr>
<td rowspan="2">Nissan X-Trail</td>
<td>ACENTA</td>
<td>+</td>
</tr>
<tr>
<td>CONNECTA</td>
<td>-</td>
</tr>
</tbody>
</table>

Колонтитулы и подпись в HTML таблицах

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

Делается это при помощи обвертки строк <tr> выбранной части таблицы тегами. <thead> определяет область верхнего колонтитула, <tfoot> — область нижнего колонтитулы, <tbody> — основную часть таблицы.

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

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

По необходимости к таблице можно добавить подпись. Для этого используйте тег <caption>.

Подпись <caption>, при использовании, ставится сразу после открывающего тега <table>.

Пример HTML таблицы с колонтитулами и подписью

Исходный код таблицы с колонтитулами и подписью

<table>
<caption>Комплектации Renault Sandero Stepway</caption>
<thead>
<tr>
<th>Характеристика</th>
<th>SUTA 09H 6R</th>
<th>SUTA 09HR6R</th>
<th>SUTA 15H 5R</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Наличие</th>
<td>+</td>
<td>+</td>
<td>+</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Мощность двигателя</th>
<td>0,9 (90 л.с.)</td>
<td>0,9 (90 л.с.)</td>
<td>1,5 (90 л.с.)</td>
</tr>
<tr>
<th>Топливо</th>
<td>бензин</td>
<td>бензин</td>
<td>дизель</td>
</tr>
<tr>
<th>Норма токсичности</th>
<td>Евро-6</td>
<td>Евро-6</td>
<td>Евро-5</td>
</tr>
</tbody>
</table>

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов <col> и <colgroup>.

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

Теги <col>и <colgroup> ставятся внутри тега <table> перед тегами <thead>, <tfoot>, <tbody>, <tr> и после тега <caption>.

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

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

Если внутри <colgroup> есть вложенные теги <col>, то атрибут span у тега <colgroup> не ставится, а количество колонок на которые влияет тег определяется вложенными <col> элементами.

Пример HTML таблицы с разделением на колонки

Исходный код таблицы HTML c <col> и <colgroup>

<table>
<colgroup style="background-color: #ddd;">
<col>
<col style="background-color: #ccc;">
<col>
</colgroup>
<tbody>
<tr>
<th>ZEN 2E2C AL A</th>
<th>ZEN 2E2C J5 A</th>
<th>INTENSE 2E3C AL A</th>
<th>Характеристика</th>
</tr>
<tr>
<td>1.5 (90 л.с.)</td>
<td>1.2 (115 л.с.)</td>
<td>1.5 (90 л.с.)</td>
<th>Мощность двигателя</th>
</tr>
<tr>
<td>дизель</td>
<td>бензин</td>
<td>дизель</td>
<th>Топливо</th>
</tr>
<tr>
<td>АКП6 (EDC)</td>
<td>АКП6 (EDC)</td>
<td>АКП6 (EDC)</td>
<th>Трансмиссия</th>
</tr>
</tbody>
</table>

Таблицы в макете страниц сайта

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

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

guruweba.com

10. Таблицы

В HTML есть мощный инструмент отображения информации, структурированной в виде таблиц. Для этой цели предусмотрен десяток структурных тегов. Простейшая таблица состоит из элемента <table>, включающего по одному или несколько элементов <tr>, <th> и <td>.

<table border="1">   <caption>Выписка лицевого счета</caption>   <tr>   <th>Месяц</th>   <th>Баланс</th>   </tr>   <tr>   <td>Январь</td>   <td>500 грн.</td>   </tr>  </table>

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

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

С помощью атрибута border элемента <table> можно определить, будут ли ячейки таблицы обведены рамкой или нет. Значение 1 указывает, что рамка нужна, пустое значение — нет.

Объединение ячеек

Логично, что в каждой строке должно быть одинаковое количество ячеек, чтобы таблица имела прямоугольный вид. Но как быть, если необходимо растянуть какую-нибудь ячейку на несколько столбцов или строк? На помощь приходят атрибуты colspan и rowspan элементов <td> и <th>. Присвоив ячейке атрибут colspan="3", вы сообщите браузеру, что этот элемент занимает место трех ячеек в строке — свое собственное и двух следующих. Соответственно, две следующих ячейки указывать не нужно, и строка будет содержать на 2 элемента <td> (или <th>) меньше.

Этот пример демонстрирует объединение ячеек в таблице.
Объединение ячеек в таблице

Аналогично, атрибут rowspan="2", например, в пятой ячейке строки означает, что она занимает два места в своем столбце, и в следующем элементе <tr> пятую ячейку нужно пропустить. Помните, что если вы примените один из этих атрибутов, но забудете удалить «лишние» ячейки, то браузер сместит их в следующий столбец, передвинув остальные ячейки еще дальше и исказив тем самым таблицу.

Группирование строк и столбцов

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

Для объединения строк в группы предназначены три тега. Во-первых, строки с ячейками заголовка можно поместить в элемент <thead>. Во-вторых, завершающие строки с «итоговыми» ячейками — в элемент <tfoot>. Наконец, все остальные строки с данными группируются в одном или нескольких элементах <tbody>. Таким образом вы можете сформировать необходимое вам количество групп. Несмотря на то, что строки из <tfoot> будут отображены последними, размещать сам элемент <tfoot> можно как после последнего, так и перед первым элементом <tbody> (после <thead>). В одной таблице может быть только по одному элементу <thead> и <tfoot>, и любое количество <tbody>. Визуально эти теги не отличаются, пока вы не определите для них соответствующие стили CSS.

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

<table class="datatbl">   <col class="yellow"/>   <colgroup span="2"></colgroup>   <col class="red"/>   <thead>   <tr>   <th rowspan="2"></th>   <th colspan="2" scope="colgroup">Средний</th>   <th rowspan="2" scope="col">Красноглазых</th>   </tr>   <tr>   <th scope="col">Размер</th>   <th scope="col">Вес</th>   </tr>   </thead>   <tfoot class="green">   <tr>   <th scope="rowgroup">Среднее</th>   <td>1.8</td>   <td>0.0025</td>   <td>41.5%</td>   </tr>   </tfoot>   <tbody>   <tr>   <th scope="row">Самцы</th>   <td>1.9</td>   <td>0.003</td>   <td>40%</td>   </tr>   <tr>   <th scope="row">Самки</th>   <td>1.7</td>   <td>0.002</td>   <td>43%</td>   </tr>   </tbody>  </table>

Если вы используете <thead> или <tfoot>, то должны использовать и <tbody>. Причем в каждой из групп обязательно должна быть хотя бы одна строка <tr>, и не должно быть строк вне групп.

Для группирования столбцов применяется пустой тег <col /> и парный <colgroup>. В отличие от элементов, группирующих строки, эти теги размещаются сразу после элемента <caption> или, если его нет, за открывающим тегом <table>. Они не включают в себя ячейки, а лишь указывают на объединяемые столбцы. Оба тега поддерживают атрибут span, значением которого является количество группируемых столбцов. Если span не указан, то он считается равным единице.

На самом деле, <col /> не создает группу, а лишь позволяет определить общие атрибуты столбцов без необходимости указывать их в каждой ячейке. Например, чтобы назначить всем ячейкам первых двух столбцов class="myData", достаточно добавить в начало таблицы элемент:

<col span="2" class="myData" />

<colgroup> позволяет сделать то же самое, но при этом лексически объединяет столбцы в группу. Бывает необходимость сгруппировать столбцы, но присвоить им разные классы или другие стандартные атрибуты. В таком случае в элемент <colgroup> помещается необходимое количество тегов <col />. При этом атрибут span указывается только в них, а его значение для <colgroup> определяется автоматически, как сумма значений span, присвоенных расположенным внутри элементам <col />. Другие теги в <colgroup> запрещены.

Размещая последовательно несколько элементов <col /> и/или <colgroup> в таблице, можно добиться группирования столбцов любым необходимых образом. Помните, что если вы применяете эти теги, то в итоге должны перечислить в них все столбцы таблицы, количество которых определяется строкой, с наибольшим количеством ячеек. Например, если в таблице 5 столбцов, а вам необходимо сгруппировать только второй и третий, указав им классы second и myGroup соответственно, то выглядеть это будет следующим образом:

<col />  <colgroup>   <col class="second" />   <col class="myGroup" />  </colgroup>  <col span="2" />

Атрибут scope элемента <th> позволяет указать, относится ли этот заголовок к строке, столбцу или какой-либо группе. Допустимые значения:

col  — ячейка является заголовком столбца
row  — ячейка является заголовком строки
colgroup  — ячейка является заголовком группы столбцов, в которой находится
rowgroup  — ячейка является заголовком группы строк, в которой находится

Элементы <td> и <th> поддерживают также атрибут headers, позволяющий дополнительно указать заголовки, относящиеся к данной ячейке. Для этого у ячеек с этими заголовками должны быть указаны id, которые и надо перечислить в атрибуте headers через пробел.

7 комментариев

www.exlab.net

Есть три элемента, которые должна содержать каждая таблица: table, tr и td. Есть и другие элементы, и я объясню их позже в этой главе, но начинать нужно с этих трех. Первый элемент, table, является сердцем поддержки табличного контента в HTML и обозначает таблицу в HTML документе. В таблице 11-2 представлен элемент table.

Следующим основным элементом таблицы (table) является tr, который обозначает строку таблицы. В HTML таблицах строки играют большую роль, чем столбцы, и каждая строка должна быть обозначена отдельно. В таблице 11-3 представлен элемент tr.

Последним из трех основных элементов является td, который обозначает ячейку таблицы. В таблице 11-4 представлен элемент td.

После определения этих трех элементов их можно объединить и создать таблицу, как показано в листинге 11-1.

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

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

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

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

smarly.net

html таблицы

Доброго времени уважаемые подписчики!

Сегодняшний урок мы посвятим созданию таблиц в языке HTML. Таблицы в HTML создаются с помощью тега table.

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

html таблицы

Сколько вы таких страниц видели в Internet?

Тысячи и тысячи. Но если разобраться, то это вот такая таблица.

Спросите вы, а как располагаются элементы на странице, ровно? А они заключаются в свои таблицы и выравниваются нужным образом.

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

HTML-тегом таблицы является тег table, строкой таблицы является тег tr, а столбцом таблицы — тег td.

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

Давайте рассмотрим пример, и вы сразу все поймете.

Сделаем такую таблицу:

html таблицы

Сделаем это следующим образом:

Ставим тег <table> и начинаем формировать первую строку, пишем:

У нас получилась первая строка таблицы с тремя столбцами. Аналогично формируем вторую строку:

И третью:

Наши три строки сформированы, осталось закрыть тег </table>.

Наша таблица готова.

Если таблице нужно дать заголовок, то за это отвечает тег <caption> Заголовок таблицы </caption> .

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

В принципе заголовок можно сделать, поставив тег <h3> Заголовок таблицы </h3>перед тегом <table>.

Если столбцу нужно дать заголовок, то для этого предусмотрен тег <th> Заголовок столбца </th>.

Тег <th> — то же что и тэг <td>, но его содержимое отображается полужирным шрифтом с выравниванием по центру, а содержимое <td>, как вы уже увидели, с выравниванием по левому краю, со шрифтом по умолчанию.

С тегами, касающихся таблиц, пожалуй, все.

Теперь рассмотрим параметры этих тегов.

Тег <table> имеет следующие параметры:

Рассмотрим параметры тегов <tr>, <td>, <th>:

Давайте подробнее остановимся на параметрах colspan и rowspan.

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

html таблицы

Для этого нам понадобятся параметры тега <td> colspan и rowspan..

Итак:

Формируем первую строку: так как в первой строке у нас одна ячейка, и она объединяет три ячейки второй строки, то для одной ячейки первой строки укажем параметр colspan=3.

Вторая строка это просто три ячейки:

Третья строка: пятая ячейка третьей строки объединяет две ячейки второй строки ( 2 и 3) и две строки (третью и четвертую).

Поэтому для нее зададим colspan=2 и rowspan=2. Ячейка № 6 остается.

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

Наша таблица построена.

Роль таблиц в WEB очень велика, поэтому рекомендую разобраться с построением таблиц.

Поупражняться можно на примерах.

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

Ссылка на файл Архив 5 урока

Упражнение:

Таблица 1.

html таблицы

Таблица 2.

html таблицы

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

Если есть вопросы пишите на E-mail: contact@webformyself.com

Проект webformyself.com — основы самостоятельного сайтостроения

С уважением, Андрей Бернацкий.

Html5 таблицы

webformyself.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.