Html таблица


html table tag

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

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

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

Что-то вроде этого и наблюдается при применении табличной верстки. Перейдем к практике.

Как в HTML сделать таблицу


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

Для добавления на страницу таблицы используется тег <table>. Это основной и главный контейнер, в который помещают элементы таблицы (строки и столбцы). И этот контейнер нужно закрывать — </table>.

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

Строки таблицы (<tr></tr>) должны быть помещены строго между <table></table>. А столбцы таблицы (<td></td>) в свою очередь помещаются строго между тегами <tr></tr>.

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

Результат:

как создать и сделать таблицу в html

Теперь давайте используем тег <th>, чтобы больше не возвращаться к этому.

Результат:


использование th вместо td при создании таблицы

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

Давайте немного подробнее о ширине, раз я ее упомянул. Ширина таблицы задается атрибутом width, высота — height. Изменять подобным образом можно не только ширину и высоту таблицы, но и размеры ячеек (они все должны помещаться в таблицу, иначе браузер не поймет, что вы от него хотите).

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

Ну а если вы хотите выровнять содержимое одной или нескольких табличных ячеек, — используйте атрибут align со значениями left, center, right. Это горизонтальное выравнивание, а есть еще вертикальное и у него свой отдельный атрибут — valign, который может принимать значения: baseline (вертикальное выравнивание точно по базовой линии), bottom (по нижнему краю), middle (значения ячеек будут выравнены вертикально по середине), top (по верхнему краю). По умолчанию браузеры выравнивают ячейки по центру (середине).

Идем дальше.

Увеличиваем рамку (границы) таблицы и меняем ее цвет


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

как сделать таблицу с несколькими столбцами и строками

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

Добавляем всего 1 атрибут и становится уже получше:

как создать границы у ячеек таблицы

Это как в Экселе! Представьте, что не было бы разделения ячеек линиями (сеткой)? Ну ужас же. А вот что будет, если выставить border, равный 10.

как сделать внешнюю границу у таблицы

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

Давайте изменим цвет этой рамки, ведь для этого тоже есть атрибут — bordercolor. Установим его значение равным «d3d3d3». Результат:

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

Как сделать отступы в таблице


Отступы в таблице также нужны для повышения «читаемости», как и границы ячеек. Для создания отступов нам понадобится атрибут «cellspacing». Я буду по прежнему работать с нашей 4х4 таблицей, применяя к ней этот атрибут. Актуализирую код для вас (я привожу только одну строку, чтобы не загромождать пост):

Результат:

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

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

Результат:

как увеличить отступы внутри ячеек

Теперь уберем «cellspacing» и оставим только «cellpadding». Результат:

как оставить отступы у ячеек и убрать отступы между ячейками

Вот и разобрались с тем как создать отступы в таблице и управлять ими. Отлично! Если Вас интересуют как делать перенос строки, то об этом написано здесь.

Как грамотно объединить ячейки в таблице


Для объединения ячеек в вашей таблице также есть специальные атрибуты. Это «colspan» и «rowspan». Первый (colspan) объединяет ячейки по столбцам (горизонтали), второй (rowspan) — по строкам или по вертикали. Давайте объединим что-нибудь в нашей таблице.

Здесь внимательно! При объединении ячеек, вам нужно уменьшить их количество на то число (минус один), которое вы прописываете в параметрах атрибута. Если вы будете создавать таблицу в HTML, объединять ячейки не удаляя лишние, то сайт будет ехать. Объединяем две — удаляем одну. Объединяем три — удаляем две. И так далее.

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

При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете.

Сейчас покажу на примере. Вот наша текущая таблица:

образец таблицы в html

Давайте объединим ячейки с номерами «1 и 2», «5 и 9», «4, 8, 12», «6 и 7». Смотрите как круто получилось, я сам не ожидал!


как объединить ячейки таблицы в html

Принцип объединения такой.

При горизонтальном объединении ячейки номер 1 и 2, нужно в первой прописать «colspan=»2″», содержимое второй поместить в первую (мы же объединяем) и удалить вторую ячейку (или скрыть ее от HTML как это сделал я — потом покажу.)

При вертикальном объединении ячеек номер 4, 8, 12, нужно в первой ячейке (номер 4) прописать «rowspan=»2″», а содержимое остальных удалить, предварительно поместив в объединенную ячейку.

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

Надеюсь понятно объяснил и привел хороший пример.

Как сделать заголовок у таблицы

Чтобы задать таблице заголовок — используйте теги <caption></caption> после начала таблицы (<table>), но до начала тега <tr>. Вот что получается:

как сделать заголовок у таблицы сверху

Ну и небольшой HTML-хак для тех, кому нужно разместить заголовок таблицы под самой таблицей. Используйте атрибут align со значением bottom вот так:

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

как сделать заголовок у таблицы снизу, под таблицей

Итак, мы рассмотрели почти все, за исключением… Фона!

Как сделать красивый фон у ячейки или всей таблицы


HTML позволяет задать цвет не только у всего фона таблицы, но и у каждой отдельной ячейки (если есть такая потребность). Устанавливает цвет фона таблицы или ячейки атрибут «bgcolor».

Давайте я сначала задам фон для всей таблицы. Это будет цвет «»lightgreen»» (а вообще можно задать его и вот так — «»#90EE90″»). Вот так теперь у меня начинается таблица:

Результат:

как сделать одним цветом фон у таблицы

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

Tada! Результат:

как сделать фон для одной из ячеек таблицы

По-моему круто! Если бы я участвовал в конкурсе креативных таблиц (или обучения дошкольников HTML) — точно бы победил.

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

Удачи и успехов в изучении HTML.

blogwork.ru

Граница таблицы


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

<style>  table, th, td {  border: 1px solid black;  } </style>
Свойство border следует устанавливать как для самой таблицы <table> так и для её ячеек <th> и <td>.

Одинарная рамка для таблицы

По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:

<style>  table {  border-collapse: collapse;  } </style>  

Поля и интервалы таблицы

По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу <td> или <th>. Интервал ячеек (border-spacing) — это расстояние между ними (<td> или <th>). Сначала присвойте значение separate свойству border-collapse элемента <table>, а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента <table>, но в спецификации HTML5 они были признаны устаревшими.

Пример использования padding и border-spacing:

Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает.

Ширина таблицы

Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:

table {width: 100%;} 

Объединение ячеек (colspan и rowspan)

Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки <th> или ячейки <td> объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.

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

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

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

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

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

Для создания заголовка или подписи таблицы используется парный тег <caption> (от англ. caption – подпись). Элемент <caption> предназначен для организации заголовка таблицы. Располагается сразу после тега <table>, но вне описания строки или ячейки.

Теги группирования элементов таблиц

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

<thead> <tr><th>Заголовок 1</th><th>Заголовок 2< /th></tr> </thead>

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

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


wm-school.ru

Создание таблиц в HTML

  • Содержание:
  • 1. Как создать таблицу
  • 2. Как создать строки (ряды) таблицы
  • 3. Как сделать ячейку заголовка столбца таблицы
  • 4. Как сделать ячейку тела таблицы
  • 5. Как добавить подпись (заголовок) к таблице
  • 6. Группирование строк и столбцов таблицы <colgroup> и <col>
  • 7. Группировка разделов таблицы <thead>, <tbody> и <tfoot>
  • 8. Как объединить ячейки таблицы
  • 9. Атрибуты элементов таблицы
  • 10. Пример создания таблицы

1. Как создать таблицу

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

<table>  <tr><th>текст заголовка</th><th>текст заголовка</th></tr> <!--ряд с ячейками заголовков-->  <tr><td>данные</td><td>данные</td></tr> <!--ряд с ячейками тела таблицы-->  </table>
текст заголовка текст заголовка
данные данные
Рис.1. Внешний вид таблицы без форматирования css-свойствами

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

/* внешние границы таблицы серого цвета толщиной 1px */  table {border: 1px solid grey;}   /* границы ячеек первого ряда таблицы */  th {border: 1px solid grey;}  /* границы ячеек тела таблицы */  td {border: 1px solid grey;} 

Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;}.

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

/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */  table {width: 100%;}  /* задаст фиксированную ширину для таблицы */  table {width: 600px;}

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right, ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

2. Как создать строки (ряды) таблицы

Строки или ряды таблицы создаются с помощью тега <tr>. Количество горизонтальных строк таблицы определяется количеством парных тегов <tr></tr>.

3. Как сделать ячейку заголовка столбца таблицы

Элемент <th> создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов <th></th>. Для элемента доступны атрибуты colspan, rowspan, headers.

<table>  <tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>  </table>

4. Как сделать ячейку тела таблицы

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

<table>  <tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>  <tr><td>ячейка тела таблицы</td><td>ячейка тела таблицы</td></tr>  </table>

5. Как добавить подпись (заголовок) к таблице

Элемент <caption> создает подпись таблицы. Добавляется непосредственно после тега <table>, вне строки или ячейки.

<table>  <caption>Перечень продуктов</caption>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>   </tr>  </table>

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

Элемент <colgroup> создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов <table> и <caption>.

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

<table>   <colgroup>   <col span="2" style="background:Khaki"><!-- С помощью этой конструкции задаем цвет фона для первых двух столбцов таблицы-->   <col style="background-color:LightCyan"><!-- Задаем цвет фона для следующего (одного) столбца таблицы-->   </colgroup>   <tr>   <th>№ п/п</th>   <th>Наименование</th>   <th>Цена, руб.</th>   </tr>   <tr>   <td>1</td>   <td>Карандаш цветной</td>   <td>20,00</td>   </tr>   <tr>   <td>2</td>   <td>Линейка 20 см</td>   <td>30,00</td>   </tr>  </table>
table_primer
Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов <col> и <colgroup>

7. Группировка разделов таблицы

Элемент <thead> создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами <tbody> и <tfoot> для указания каждой части таблицы.

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

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

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

<table>   <thead>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   </thead>  <tfoot>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>   </tr>  </tfoot>  <tbody>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>  </tbody>   </table>

Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают <thead> и <tfoot> как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

<table>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td><!-- Задаем количество ячеек по горизонтали для объединения-->   </tr>  </table>
table_primer2
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

9. Атрибуты элементов таблицы

Таблица 1. Атрибуты элементов таблицы
Атрибут Описание, принимаемое значение
colspan Количество ячеек в строке для объединения по горизонтали.
<td colspan="3">
Возможные значения: число от 1 до 999.
headers Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.
<th id="идентификатор">...</th>
<th headers="идентификатор">...</th>

Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id.
rowspan Количество ячеек в столбце для объединения по вертикали.
<td rowspan="2">
Возможные значения: число от 1 до 999.
span Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.
<col span="2">
Принимаемые значения: любое целое положительное число.

10. Пример создания таблицы

table-html
Рис. 4. Создание меню ресторана с помощью HTML-таблицы

Разметка HTML

<table>   <caption>Меню ресторана "Ромашка"</caption>    <tr>   <th rowspan="2" class="first">Кухня</th>   <th colspan="2">Холодные блюда</th>   <th colspan="2">Горячие блюда</th>   <th rowspan="2">Десерты</th>   </tr>   <tr>   <td class="first">Салаты</td>   <td class="first">Закуски</td>   <td class="first">Первые блюда</td>   <td class="first">Вторые блюда</td>   </tr>   <tr>   <td rowspan="3" class="first">Русская</td>   <td>Винегрет</td>   <td>Язык с хреном</td>   <td>Щи с квашеной капустой</td>   <td>Вареники с картошкой</td>   <td>Печеные яблоки с медом</td>   </tr>   <tr>   <td>Оливье</td>   <td>Студень говяжий</td>   <td>Рассольник домашний</td>   <td>Караси запеченые в сметане</td>   <td>Блинчатый пирог</td>   </tr>   <tr>   <td>Сельдь под "шубой"</td>   <td>Судак заливной</td>   <td>Мясная солянка</td>   <td>Котлеты "Пожарские"</td>   <td>Пирожное "Картошка"</td>   </tr>   <tr>   <td rowspan="3" class="first">Испанская</td>   <td>Севиче из гребешков</td>   <td>Эмпанадас</td>   <td>Хлебный суп с чесноком</td>   <td>Паэлья с морепродуктами</td>   <td>Чуррос</td>   </tr>   <tr>   <td>Тимбал из авокадо и тунца</td>   <td>Ахотомате</td>   <td>Астурийская фабада</td>   <td>Свиное раксо</td>   <td>Альмойшавена</td>   </tr>   <tr>   <td>Фасоль с ветчиной</td>   <td>Чанфайна</td>   <td>Рыбный суп с манными клецками </td>   <td>Тортилья картофельная</td>   <td>Бунуэлос</td>   </tr>   <tr>   <td rowspan="3" class="first">Французская</td>   <td>Вогезский салат</td>   <td>Рийет из курицы</td>   <td>Баклажанный крем-суп "Ренуар"</td>   <td>Картофель огратен</td>   <td>Бриоши</td>   </tr>   <tr>   <td>Салат "Панзанелла"</td>   <td>Делисьез из сыра</td>   <td>Французский тыквенный суп</td>   <td>Гратин из птицы</td>   <td>Лигурийский лимонный пирог</td>   </tr>   <tr>   <td>Тар-тар</td>   <td>Маринованный лосось</td>   <td>Суп "Конти"</td>   <td>Тартифлетт</td>   <td>Саварен "Триумф"</td>   </tr>   </table>

Стили CSS

body {   margin: 0;   background: #F4F1F8;  }  table {   border-collapse: collapse;    line-height: 1.1;   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;   background: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);   color: #0C213B;  }  caption {   font-family: annabelle, cursive;   font-weight: bold;   font-size: 2em;   padding: 10px;    color: #F3CD26;   text-shadow: 1px 1px 0 rgba(0,0,0,.3);   }  caption:before, caption:after {   content: "274B";   color: #A9E2CC;   margin: 0 10px;  }  th {   padding: 10px;    border: 1px solid #A9E2CC;  }  td {   font-size: 0.8em;   padding: 5px 7px;   border: 1px solid #A9E2CC;  }  .first {   font-size: 1em;   font-weight: bold;   text-align: center;  }

html5book.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-документе служат для создания дизайна страницы а также для вставки в ячейки таблицы самых разнообразных данных-текст,графика,формы и тд.
Например,вам надо разместить текст в одной стороне страницы,фотографии в другой,рекламу в третьей.Здесь без таблицы не обойтись.

Атрибуты таблицы<table></table>.
Состоит она из строки <tr></tr> и столбца <td></td>.
Пересечение строки и столбца дает ячейку,в которую и надо вписывать данные.Ячейки <td> должны находиться внутри строки <tr>.

Необходимо соблюдать принцип вложенности тегов,иначе говоря столбец
<td></td> должен находиться между тегами строки <tr> </tr> вот так
<tr>
<td></td>
</tr>

а они должны быть между тегами таблицы <table></table>. Это обязательное условие.

Составляем самую простую таблицу

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

Эта таблица состоит из одной строки и одной ячейки.

Выглядит она так:

Html таблица

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

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

Вот ее вид:

Html таблица

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

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

Это ее схема:

Html таблица

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

Что бы увидеть таблицу, надо в теге таблицы указать рамку<table border="1"> где 1-ширина рамки в пикселях и вы можете менять это значение на ваше усмотрение.
После заполнения контентом сайта можно убрать рамки таблицы- <table border=0>

Таблицы можно окрасить цветом так:
<table bgcolor="#цвет"> или
<tr bgcolor="#цвет"> или
<td bgcolor="#цвет">

Не делайте цвет таблицы и цвет текста одинаковым иначе вы ничего не увидите

Изменение размеров строк и ячеек

Измененение по высоте строки задается значением height в теге <tr>
<tr height="100"> где "100" размер в пикселях, или в процентах "100%",или <td>
<td height="100".
Изменение по ширине задается значением width и также вставляется в тег
<td width="500"> (в пикселях) ,или например <td width="80%">
Следует обратить внимание на то что все браузеры должны показывать таблицы с одинаковым количеством ячеек в строке по всей таблице.Иными словами если у вас в первой строке находятся три ячейки,то и во второй и в следующих строках тоже должно быть три ячейки.Ячейки можно объединять по высоте <td rowspan="?"> где"?" количество объединеных ячеек,а также по ширине <td colspan="?">

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

<html>
<head><title></title>
</head>
<body>
<table style="text-align: center; width: 350px; height: 200px;" border="1" cellpadding="2" cellspacing="2"> <tbody>
<tr>
<td colspan="2">Объединеные ячейки</td>
<td colspan="1" rowspan="2">Объединеные ячейки</td>
</tr>
<tr>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
</tr>
<tr>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
</tr>
</tbody>
</table>
</body>
</html>

Вид этой таблицы

Html таблица

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

На странице можно разместить несколько таблиц.Например:

<table width="100%" height="50%" border="1" bgcolor="#E7FEE1">
<tr>
<td>Первая таблица,первая ячейка</td><td>Первая таблица,вторая ячейка</td>
</tr>
</table>
<table width="100%" height="50%" border="1" bgcolor="#FEFFE0">
<tr>
<td>Вторая таблица,первая ячейка</td><td>Вторая таблица,вторая ячейка</td>
</tr>
</table>

Html таблица

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

<table border="1" width="30%"height="35%">

<tr>
<td>1</td>
<td>2</td>
</tr>

<tr>
<td>3</td>
<td>

<table border="1">
<tr>
<td>4</td>
<td>5</td>
</tr>

<tr>
<td>6</td>
<td>7</td>
</tr>

</table>

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

Выглядит она так
Html таблица

Дополнительно настроить прорисовку таблицы можно с помощью параметров FRAME и RULES тега <TABLE>.
Параметр FRAME управляет прорисовкой внешней линии таблицы и может принимать следующие значения:
BOX или BORDER — рамка рисуется со всех четырех сторон
ABOVE — только с верхней стороны
BELOW — только с нижней стороны
HSIDES — рисуется нижняя и верхняя сторона
VSIDES — рисуется левая и правая сторона
LHS — только с левой стороны
RHS — только с правой стороны
VOID — таблица без внешних рамок

Например:

<table border=1 CellSpacing=0 CellPadding=0 Width="%" Align="" vAlign="" frame="vsides">

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

Например:

<table Border=1 CellSpacing=0 CellPadding=0 Width="%" Align="" vAlign="" rules="cols">

Обратите внимание на то что параметры frame и rules работают только тогда когда в значении border установлена 1 и более.

Теги для создания таблиц.

Таблица ---------------<table></table>
Рамка таблицы---- -----<table border=?></table>
Расстояние между ячейками--<table cellspacing=?>
Ширина в пикселях------<table width=?>
Ширина в процентах-----<table width="?%">
Строка таблицы --------<tr></tr>
Выравнивание ----------<tr align=left|right|center>|middle|bottom>
Ячейка таблицы ----------<td></td>.
Без перевода строки -----<td nowrap>
Объединение ячеек по ширине -<td colspan=?>
Объединение ячеек по высоте -<td rowspan=?>
Желаемая ширина ---------<td width=?> (в точках)
Ширина в процентах ------<td width="%">
Цвет ячейки -------------<td bgcolor="#******">
Заголовок таблицы -------<th></th>
Выравнивание ------------<th align=left|right|center|middle |bottom>
Запрет перевода строки --<th nowrap>
Растягивание по колонке -<th colspan=?>
Растягивание по строке --<th rowspan =?>
Ширина в пикселях -------<th width=?>
Ширина в процентах ------<th width="%">
Цвет ячейки -------------<th bgcolor="#$$$$$$">
Заглавие таблицы --------<caption></caption>
Выравнивание-------------<caption align=top|bottom>(сверху/снизу таблицы)

sitesaid.ru

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Тег TABLE</title>  </head>  <body>  <table border="1" width="100%" cellpadding="5">  <tr>  <th>Ячейка 1</th>  <th>Ячейка 2</th>  </tr>  <tr>  <td>Ячейка 3</td>  <td>Ячейка 4</td>  </tr>  </table>  </body> </html>

Порядок расположения ячеек и их вид показан на рис. 12.1.

Рис. 12.1

Рис. 12.1. Результат создания таблицы с четырьмя ячейками

htmlbook.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


You May Also Like

About the Author: admind

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

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

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