Как двигать таблицу в html

Сетка таблицы

Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse .

Рис. 1. Вид таблицы с сеткой

При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse , как показано в примере 1.

Пример 1. Создание сетки

    Таблица       2004 2005 2006  
 Рубины 43 51 79  
 Изумруды 28 34 48  
 Сапфиры 29 57 36

	2004	2005	2006
Рубины	43	51	79
Изумруды	28	34	48
Сапфиры	29	57	36

В данном примере также устанавливается цвет фона для ячеек заголовка (тег ) через свойство background .

Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).

Рис. 2. Сетка внутри таблицы

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

Пример 2. Таблица без внешней рамки

    Таблица       2004 2005 2006  
 Рубины 43 51 79  
 Изумруды 28 34 48  
 Сапфиры 29 57 36

	2004	2005	2006
Рубины	43	51	79
Изумруды	28	34	48
Сапфиры	29	57	36

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

Как двигать таблицу в html

ну так и в примере не вся таблица

центр все центрует. начните с нуля. отключите все классы

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

Регистрация: 11.04.2017
Сообщений: 3

  
 AzTec-140  5  116  116…120  21,33  4 3/8  
  AzTec-146  5 3/4  118  124…128  21,33  4 7/8  
 AzTec-168  6 5/8  137  143…148  22,97  5 5/8  
 AzTec-178  7  154  156  26,90  6 1/8  Тип устройства  Диаметр обсадной колонны, дюйм  Максимальный диаметр устройства, мм  Диаметр фреза, мм  Общая длина устройства, м  Диаметр долота для последующего бурения, дюйм  
 AzTec-194  7 5/8  160  168  27,56  6 3/4  
 AzTec-219  8 5/8  180  194  27,62  7 1/2  
 AzTec-245  9 5/8  200  216…223  27,62  8 3/4

Вот друг вся таблица. выручай

______________________
Используйте тег [CODE] (кнопка с решеткой # в форме сообщения) при вставке кода на форум.

Последний раз редактировалось Alex11223; 11.04.2017 в 15:25 .
Администратор
Регистрация: 28.10.2006
Сообщений: 17,736

   AzTec-140  5  116  116…120  21,33  4 3/8  
  AzTec-146  5 3/4  118  124…128  21,33  4 7/8  
 AzTec-168  6 5/8  137  143…148  22,97  5 5/8  
 AzTec-178  7  154  156  26,90  6 1/8  Тип устройства  Диаметр обсадной колонны, дюйм  Максимальный диаметр устройства, мм  Диаметр фреза, мм  Общая длина устройства, м  Диаметр долота для последующего бурения, дюйм  
 AzTec-194  7 5/8  160  168  27,56  6 3/4  
 AzTec-219  8 5/8  180  194  27,62  7 1/2  
 AzTec-245  9 5/8  200  216…223  27,62  8 3/4

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как вставить фрейм в таблицу html!	mr.bilochka	HTML и CSS	4	18.04.2013 15:39
разместить таблицу по центру!	ny6asik	Помощь студентам	4	24.10.2010 20:31
Расположить содержимое(таблицу) ячейки по центру	Jakethefish	HTML и CSS	1	21.06.2010 16:01
Необходимо разместить таблицу по центру страницы	Никки	HTML и CSS	1	10.02.2009 23:26

Организация данных с помощью таблиц

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

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

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

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

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

Строки таблицы

Данные таблицы

  Не заставляйте меня думать Стив Круг  На складе  1  $30.02  
 UX-дизайн. Практическое руководство по проектированию опыта взаимодействия Расс Унгер, Кэролайн Чендлер  На складе  2  $52.94 ($26.47 × 2)  
 Изучаем HTML5 Брюс Лоусон, Реми Шарп  Нет на складе  1  $22.23  
 Пуленепробиваемый веб-дизайн Дэн Сидерхолм  На складе  1  $30.17

Демонстрация таблицы

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

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

Заголовки таблицы могут быть задействованы в столбцах и строках; данные в таблице определяют, где заголовки уместны. Атрибут scope помогает точно определить, какое содержимое связано с заголовком. Атрибут scope со значениями col , row , colgroup и rowgroup у элемента применяется к строке или столбцу. Наиболее используемые значения col и row . Значение col указывает, что каждая ячейка внутри столбца имеет непосредственное отношение к этому заголовку таблицы, а значение row указывает, что каждая ячейка в строке относится непосредственно к этому заголовку таблицы.

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

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

  Название  Наличие  Кол-во  Цена  
 Не заставляйте меня думать Стив Круг  На складе  1  $30.02  
 UX-дизайн. Практическое руководство по проектированию опыта взаимодействия Расс Унгер, Кэролайн Чендлер  На складе  2  $52.94 ($26.47 × 2)  
 Изучаем HTML5 Брюс Лоусон, Реми Шарп  Нет на складе  1  $22.23  
 Пуленепробиваемый веб-дизайн Дэн Сидерхолм  На складе  1  $30.17

Название	Наличие	Кол-во	Цена
Не заставляйте меня думать Стив Круг	На складе	1	$30.02
UX-дизайн. Практическое руководство по проектированию опыта взаимодействия Расс Унгер, Кэролайн Чендлер	На складе	2	$52.94 ($26.47 × 2)
Изучаем HTML5 Брюс Лоусон, Реми Шарп	Нет на складе	1	$22.23
Пуленепробиваемый веб-дизайн Дэн Сидерхолм	На складе	1	$30.17

Демонстрация заголовка таблицы

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

Атрибут headers

Структура таблицы

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

  .Книги по дизайну и фронтенд-разработке

Демонстрация названия таблицы

, и

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

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

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

  .Книги по дизайну и фронтенд-разработке  Название  Наличие  Кол-во  Цена  
 
  Не заставляйте меня думать Стив Круг  На складе  1  $30.02  
  Сумма  $135.36  
 НДС  $13.54  
 Итого  $148.90

Книги по дизайну и фронтенд-разработке
Название	Наличие	Кол-во	Цена
Не заставляйте меня думать Стив Круг	На складе	1	$30.02
Сумма	$135.36
НДС	$13.54
Итого	$148.90

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

Объединение нескольких ячеек

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

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

  .Книги по дизайну и фронтенд-разработке  Название  Кол-во  Цена  
 
  Не заставляйте меня думать Стив Круг  На складе  1  $30.02  
  Сумма  $135.36  
 НДС  $13.54  
 Итого  $148.90

Книги по дизайну и фронтенд-разработке
Название	Кол-во	Цена
Не заставляйте меня думать Стив Круг	На складе	1	$30.02
Сумма	$135.36
НДС	$13.54
Итого	$148.90

Демонстрация объединения ячеек

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

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

Свойство border-collapse

Свойство border-collapse определяет модель границы в таблице. Есть три значения для свойства border-collapse : collapse , separate и inherit . Значение по умолчанию separate у свойства border-collapse означает, что все разные границы складываются друг с другом, как описано выше. Значение collapse , с другой стороны, сжимает границы в одну, выбирая ячейку таблицы в качестве основной.

table < border-collapse: collapse; >th, td

Демонстрация border-collapse

Свойство border-spacing

Когда свойство border-collapse со значением separate позволяет соединять одну границу с другой, так свойство border-spacing задаёт, какое расстояние, если оно есть, отображается между этими границами.

Например, таблица с однопиксельной границей вокруг всей таблицы и однопиксельной границей вокруг каждой ячейки будет иметь двухпиксельную границу вокруг каждой ячейки, потому что границы складываются друг с другом. Добавление border-spacing со значением 4px отделяет границы на 4 пикселя.

table < border-collapse: separate; border-spacing: 4px; >table, th, td < border: 1px solid #cecfd5; >th, td

Демонстрация border-spacing

Свойство border-spacing работает только тогда, когда значение свойства border-collapse задано как separate , это значение по умолчанию. Если свойство border-collapse ранее не указывалось, мы можем использовать свойство border-spacing не волнуясь.

Кроме того, свойство border-spacing может принимать два значения размера: первое значение для горизонтального расстояния, а второе — для вертикального. К примеру, запись border-spacing: 5px 10px установит 5 пикселей горизонтального расстояния между границами и 10 пикселей — вертикального.

Добавление границ к строкам

table < border-collapse: collapse; >th, td < border-bottom: 1px solid #cecfd5; padding: 10px 15px; >tfoot tr:last-child td

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

Чередование в таблице

Здесь наша таблица с книгами использует псевдокласс :nth-child с параметром even для выбора всех чётных строк таблицы и применения к ним серого фона. Следовательно, каждая строка через одну в теле таблицы будет серой.

table < border-collapse: separate; border-spacing: 0; >th, td < padding: 10px 15px; >thead < background: #395870; color: #fff; >tbody tr:nth-child(even) < background: #f0f0f2; >td < border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5; >td:first-child

Демонстрация чередования строк в таблице

Выравнивание текста

В дополнение к границам и чередованию, важную роль в формировании таблицы играет выравнивание текста внутри ячеек. Имена, описания и тому подобное, как правило, выравниваются по левому краю, в то время как номера и другие числа выравниваются по правому. Другая информация, в зависимости от контекста, может быть по центру. Мы можем переместить текст по горизонтали с помощью свойства text-align в CSS, как мы рассмотрели это в уроке 6, «Работа с типографикой».

Для выравнивания текста по вертикали, однако, применяется свойство vertical-align . Это свойство работает только со строчными элементами и ячейками таблицы и не будет работать для блочных, строчно-блочных или ещё каких-либо других элементов.

Свойство vertical-align принимает несколько разных значений, самые популярные — top , middle и bottom . Эти значения вертикально позиционируют текст относительно ячейки таблицы или ближайшего родительского элемента для строчных элементов.

Исправив HTML и CSS и включив свойства text-align и vertical-align , мы можем очистить макет нашей таблицы с книгами. Обратите внимание, что данные в таблице становится намного яснее и удобнее.

   Название  Кол-во  Цена  
 
    Стив Круг    
  Расс Унгер, Кэролайн Чендлер   
   Брюс Лоусон, Реми Шарп    
  Дэн Сидерхолм    
  Сумма  $135.36  
 НДС  $13.54  
 Итого  $148.90

Название	Кол-во	Цена
Стив Круг
Расс Унгер, Кэролайн Чендлер
Брюс Лоусон, Реми Шарп
Дэн Сидерхолм
Сумма	$135.36
НДС	$13.54
Итого	$148.90

table < border-collapse: separate; border-spacing: 0; color: #4a4a4d; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; >th, td < padding: 10px 15px; vertical-align: middle; >thead < background: #395870; color: #fff; >th:first-child < text-align: left; >tbody tr:nth-child(even) < background: #f0f0f2; >td < border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5; >td:first-child < border-left: 1px solid #cecfd5; >.book-title < color: #395870; display: block; >.item-stock, .item-qty < text-align: center; >.item-price < text-align: right; >.item-multiple < display: block; >tfoot < text-align: right; >tfoot tr:last-child

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

Полностью стилизованная таблица

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

 СуммаНДС  Название  Кол-во  Цена  
 
        
    $26.47 × 2  
       
      
  $135.36  
  $13.54  
 Итого  $148.90

table < border-collapse: separate; border-spacing: 0; color: #4a4a4d; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; >th, td < padding: 10px 15px; vertical-align: middle; >thead < background: #395870; background: linear-gradient(#49708f, #293f50); color: #fff; font-size: 11px; text-transform: uppercase; >th:first-child < border-top-left-radius: 5px; text-align: left; >th:last-child < border-top-right-radius: 5px; >tbody tr:nth-child(even) < background: #f0f0f2; >td < border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5; >td:first-child < border-left: 1px solid #cecfd5; >.book-title < color: #395870; display: block; >.text-offset < color: #7c7c80; font-size: 12px; >.item-stock, .item-qty < text-align: center; >.item-price < text-align: right; >.item-multiple < display: block; >tfoot < text-align: right; >tfoot tr:last-child < background: #f0f0f2; color: #395870; font-weight: bold; >tfoot tr:last-child td:first-child < border-bottom-left-radius: 5px; >tfoot tr:last-child td:last-child

Демонстрация стилизации таблицы

На практике

Теперь, когда мы знаем, как создать и стилизовать таблицы, давайте завершим последнюю оставшуюся страницу нашего сайта Styles Conference — расписание.

/* ======================================== Расписание ======================================== */ table < margin-bottom: 44px; width: 100%; >table:last-child

 .   Семинары  24 августа

    Семинары  24 августа  
 
   8:30  Регистрация

Семинары	24 августа
8:30	Регистрация

    Семинары  24 августа  
 
   8:30  Регистрация  
  9:00   Адам Коннор
 Свет! Камера! Мотор! Вдохновение дизайна от кинематографа   Дженифер Джонс
 Чему дизайнеры могут научиться у родителей

Семинары	24 августа
8:30	Регистрация
9:00	Адам Коннор Свет! Камера! Мотор! Вдохновение дизайна от кинематографа	Дженифер Джонс Чему дизайнеры могут научиться у родителей

    Семинары  24 августа  
 
   8:30  Регистрация  
  9:00   Адам Коннор
 Свет! Камера! Мотор! Вдохновение дизайна от кинематографа   Дженифер Джонс
 Чему дизайнеры могут научиться у родителей  
  12:30  Обед  
  14:00   Тесса Хармон
 Искусство кодирования: Генерация вязанных шаблонов   Расс Унгер
 От Маппетов к мастерству: Основные принципы UX от Джима Хенсона

Семинары	24 августа
8:30	Регистрация
9:00	Адам Коннор Свет! Камера! Мотор! Вдохновение дизайна от кинематографа	Дженифер Джонс Чему дизайнеры могут научиться у родителей
12:30	Обед
14:00	Тесса Хармон Искусство кодирования: Генерация вязанных шаблонов	Расс Унгер От Маппетов к мастерству: Основные принципы UX от Джима Хенсона

th, td < padding-bottom: 22px; vertical-align: top; >th < padding-right: 45px; text-align: right; width: 20%; >td

thead < line-height: 44px; >thead th

tbody th

tbody td < border-top: 1px solid #dfe2e5; padding-top: 21px; >tbody td:first-of-type < padding-right: 15px; >tbody td:last-of-type < padding-left: 15px; >tbody td:only-of-type

table a < color: #888; >table h4

.schedule-offset

После того, как класс находится на месте, добавим его ко всем элементам

, которые объединяют два столбца и включают дату, либо мероприятие — регистрацию, обед или перерыв. Вспоминая нашу таблицу для первого дня с семинарами, HTML будет выглядеть следующим образом:

  .  .   Семинары  24 августа  
 
   8:30  Регистрация  
 12:30  Обед

Семинары	24 августа
8:30	Регистрация
12:30	Обед

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

Страница Расписание включает несколько таблиц для Styles Conference

Рис. 11.01. Страница Расписание включает несколько таблиц для Styles Conference

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Ладно, теперь мы знаем, как семантически скомпоновать табличные данные в HTML, также делая это интуитивно с помощью CSS. Обсуждение таблиц было нашим последним основным препятствием при изучении HTML и CSS и мы на этом официально завершили наш сайт Styles Conference.

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

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

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

Ресурсы и ссылки

Bring on the tables на 456 Berra St.

См. также

Подсветка строк и колонок таблицы
Структура таблицы
Таблицы
Таблицы
Таблицы в Bootstrap 5
Таблицы в HTML

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

Откройте текстовый редактор, например, Visual Studio Code. Если вы ещё не работали с VS Сode, то сначала прочитайте статью.

Первый шаг

Второй шаг

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

Третий шаг

   Заголовок 1  Заголовок 2

Четвёртый шаг

После добавим для создания тела таблицы — в него мы добавляем ячейки с информацией.

   Заголовок 1  Заголовок 2

Пятый шаг

   Заголовок 1  Заголовок 2

Шестой шаг

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

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

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

Седьмой шаг

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

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

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

Таблица с границами

Сохраните файл с расширением .html и откройте его в веб-браузере, чтобы увидеть созданную таблицу.

Или можете воспользоваться нашим генератором.

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

Сгенерировать таблицу

HTML код таблицы

Скопируйте его и используйте в своих HTML-документах.

Материалы по теме

Как добавить изображение на страницу
Как сделать кнопку
Как сделать картинку ссылкой

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

22 ноября 2023

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

1 ноября 2023

Специальные символы в HTML

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

23 октября 2023

Простое диалоговое окно на HTML

Вот короткое демо:

18 октября 2023

Зачем нужен метатег viewport

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

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

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

18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

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

14 сентября 2023

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

12 сентября 2023

Осмысленный alt-текст: 6 правил

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

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

31 июля 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

13 июня 2023

Как понять, что перед вами заголовок

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

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

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

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

8 июня 2023

Как двигать таблицу в html

Сетка таблицы

Как двигать таблицу в html

Организация данных с помощью таблиц

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

Строки таблицы

Данные таблицы

Демонстрация таблицы

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

Демонстрация заголовка таблицы

Атрибут headers

Структура таблицы

Демонстрация названия таблицы

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

Объединение нескольких ячеек

Демонстрация объединения ячеек

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

Свойство border-collapse

Демонстрация border-collapse

Свойство border-spacing

Демонстрация border-spacing

Добавление границ к строкам

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

Чередование в таблице

Демонстрация чередования строк в таблице

Выравнивание текста

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

Полностью стилизованная таблица

Демонстрация стилизации таблицы

На практике

Адам Коннор

Дженифер Джонс

Адам Коннор

Дженифер Джонс

Тесса Хармон

Расс Унгер

Демонстрация и исходный код

Резюме

Ресурсы и ссылки

См. также

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

Первый шаг

Второй шаг

Третий шаг

Четвёртый шаг

Пятый шаг

Шестой шаг

Седьмой шаг

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

HTML код таблицы

Материалы по теме

Читать дальше

Что такое Lazy Loading и как её включить на сайте

Знакомство с HTML

Специальные символы в HTML

Простое диалоговое окно на HTML

Зачем нужен метатег viewport

Атрибут class в HTML на примерах

В чём отличия цитат blockquote, cite и q

Осмысленный alt-текст: 6 правил

Растровая и векторная графика

Как понять, что перед вами заголовок

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