Таблица html в css: Стилизация таблиц — Изучение веб-разработки — Вебджем.рф

Содержание

Таблица внутри таблицы в html

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

Если вы хорошо знаете HTML, то у вас не возникнет проблемы, но всётаки давайте попробуем это сделать.

Для начала, давайте создадим простую таблицу 2х2:


<table border="1">
	<tr>
		<td>Ячейка 1.1</td>
		<td>Ячейка 1.2</td>
	</tr>
	<tr>
		<td>Ячейка 2.1</td>
		<td>Ячейка 2.2</td>
	</tr>
</table>

Получили простую таблицу:

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

Теперь внутри ячейки 2.1 мы вставим таблицу:


<table border="1">
	<tr>
		<td>Ячейка 1.  1</td>
		<td>Ячейка 1.2</td>
	</tr>
	<tr>
		<td>
    		<table border="1">
            	<tr>
            		<td>Ячейка 2.1 - 1.1</td>
            		<td>Ячейка 2.1 - 1.2</td>
            	</tr>
            	<tr>
            		<td>Ячейка 2.1 - 2.1</td>
            		<td>Ячейка 2.1 - 2.2</td>
            	</tr>
            </table>
		</td>
		<td>Ячейка 2.2</td>
	</tr>
</table>

И мы получим следующие:

Ячейка 1.1

Ячейка 1.2

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

Ячейка 2.2

Вот так просто и создаётся таблица в таблице. Также попробуйте наш генератор html-таблиц.

Таблица

« Предыдущая статья

Закругление углов в css: border-radius

Следующая статья »

Красивая пагинация CSS на основе Bootstrap

Антиспам поле. Его необходимо скрыть через css

Ваше имя

Электронная почта

Ваше сообщение

Присылайте свои вопросы, предложения и пожелания на электронную почту. Будем рады сотрудничеству.

E-mail: [email protected]

Telegram: daruse93

Вы можете сказать спасибо автору сайта или перевести оплату.

Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.

Таблицы и CSS-свойство float в современной веб-разработке / Хабр

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

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

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

Взгляните на этот пример, размещённый на CodePen.

Страница, макет которой основан на таблицах

Попробуйте «прочитать» текст этой страницы с помощью какого-нибудь средства для чтения с экрана, вроде VoiceOver.

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

Можно подумать, что таблицам, после всей той критики, которой они подвергаются уже многие годы, нет места в веб-дизайне. Если вы сами никогда не выпускали в продакшн макеты, основанные на таблицах, то вы, наверняка, слышали байки тех, кто так делал. Или, скорее, не байки, а «страшные сказки». Кажется, что мы превратили таблицы в нечто вроде «Internet Explorer среди HTML-элементов».

Но это не совсем правильно. Дело в том, что у таблиц в веб-дизайне есть своя ниша, и в том, что они, если пользоваться ими правильно, не вредят доступности материалов, оформленных с их помощью.

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

Вот пример использования HTML-элемента <table> для вывода именно тех данных для оформления которых и предназначены таблицы.

Табличные данные, оформленные с помощью элемента <table>

В начале 2000-х годов, когда веб двинулся в сторону стандартизации, таблицы, в роли инструмента для создания макетов страниц, отошли на второй план. Им на замену пришли другие механизмы, среди которых стоит особо отметить CSS-свойство float. Тогда на улице дизайнеров и разработчиков наступил настоящий праздник. Дело в том, что это значило, что у них, впервые, появился настоящее средство для реализации механизма разделения ответственности. А именно, HTML-разметка и CSS могли решать именно те задачи, для решения которых они предназначены. С помощью HTML можно было описывать содержимое страниц, а с помощью CSS — настраивать внешний вид этого содержимого. Это сделало код страниц чище и улучшило возможности по его поддержке. А это, в результате, позволило уделить внимание веб-стандартам, вроде доступности контента, и даже более продвинутым вещам наподобие SEO.

Посмотрите на этот пример, а лучше — попробуйте его «послушать».

Страница, при создании которой используются обычные HTML-элементы и CSS-свойство float

Почувствовали разницу?

Раньше многие из нас работали с «плавающими» элементами, оформленными с помощью CSS-свойства float. Это свойство было задумано как механизм, позволяющий организовывать обтекание изображений текстом. При таком подходе материалы можно «прижимать» к левой или правой сторонам страницы, но при этом не изымать их из нормального потока документа. В наше время, когда появились CSS Grid и Flexbox, «плавающие» элементы, как в своё время таблицы, отошли на второй план. Может, дело в том, что теперь те задачи, которые решали с их помощью, можно решить с помощью более совершенных инструментов.

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

Но CSS-свойство float всё ещё вполне применимо и актуальности оно не потеряло! На самом деле, его необходимо использовать для обеспечения функционирования свойства shape-outside. Взгляните на этот пример.

Применение свойства float в современном веб-дизайне

Вполне обоснованный вариант использования свойства float заключается в настройке обтекания текстом цитат, оформленных с помощью элемента <blockquote>. Вот как это выглядит.

Оформление элемента <blockquote>

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

Вот пример уже знакомого вам макета, при разработке которого не использовалось никаких «хаков» или неоправданно больших объёмов кода. Этот макет создан с помощью Flexbox.

Страница, макет которой создан с помощью Flexbox

В следующий раз, когда вам придётся думать о том, применять или нет HTML-таблицы или CSS-свойство float, вы сможете принять обоснованное решение. Сделать это можно будет, зная о том, для чего предназначены таблицы и «плавающие» элементы. Я вовсе не жду того, что тот, кто дочитал до этого места, с энтузиазмом примется, к месту и не к месту, вставлять в свой код таблицы и свойство

float. Тут главное помнить о том, что это — инструменты, отлично подходящие для решения определённых задач. Это — неотъемлемая часть арсенала современного веб-разработчика. Нужно лишь правильно и оправданно их использовать.

Пользуетесь ли вы HTML-таблицами и CSS-свойством float?

Стили таблиц CSS — темы масштабирования

Обзор

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

Scope

в основном обсуждают следующие моменты:

Что такое CSS Table Style и зачем он нужен.
Различные свойства стиля таблицы.
Несколько быстрых и важных советов по стилизации столов.
Практическое использование таблиц и сброс стиля таблицы CSS по умолчанию в нашу пользу.

Что такое стиль таблицы в CSS?

Давайте ‌взглянем на простую HTML-таблицу, содержащую лишь некоторые данные, то есть вообще без добавления стилей CSS.

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

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

С небольшой рамкой, выравниванием по центру и небольшим количеством цвета фона та же таблица выглядит намного лучше, не так ли?

Ну, это что-то вроде стиля таблицы CSS. Благодаря этому ваши простые HTML-таблицы выглядят намного лучше и читабельнее. И, если это то, что вы хотите сделать со своими собственными HTML-таблицами, то оставайтесь и переходите к следующему разделу этой статьи 🤓!

Как стилизовать таблицу в CSS?

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

HTML-код для создания таблицы:

  
    <таблица>
        Таблица штатов Индии и их столиц
        
            
                Sl №
                Штат
                Капитал
            
        
        
            
                <тд>1
                Западная Бенгалия
                Калькутта
            
            
                <тд>2
                Мадхья-Прадеш
                Бхопал
            
            
                <тд>3
                Карнатака
                Бангалуру

Приведенный выше HTML-код создает таблицу с 3 столбцами с именем Серийный номер. (номер Sl), государственный и столичный . Затем мы добавляем к нему 3 записи таблицы. Заголовок таблицы установлен на «Таблица индийских штатов и их столиц».

Вывод , показывающий очень простую таблицу HTML без каких-либо стилей CSS:

Теперь давайте посмотрим, что означают различные элементы HTML.

Значение каждого тега таблицы HTML

99699699699699969969969969969969969969969969969969969969969966996699699669. таблицы

Теги таблицы HTML

Значение метки таблицы HTML

<Таблица>

Сама таблица

<Подпись>

. Заголовок

Тело таблицы, состоящее из основных данных

Нижний колонтитул таблицы

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

Ячейка, содержащая данные стиль для этих элементов и сделать их привлекательными, а также повысить их читабельность.

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

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

Код CSS для добавления некоторых стилей таблиц:

  td, th {
    граница: 1px сплошная #777;
    набивка: 0,5 бэр;
    выравнивание текста: по центру;
}
 
стол {
    граница коллапса: коллапс;
}
 
tbody tr:nth-child(нечетный) {
    фон: #еее;
}
подпись {
    размер шрифта: 0.8rem;
}

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

Давайте теперь посмотрим на нашу стилизованную таблицу CSS:

Это все о том, как стилизовать таблицу в CSS. В следующем разделе мы обсудим различные доступные нам свойства таблицы CSS.

Свойства таблицы CSS

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

Давайте вспомним простую HTML-таблицу, которую мы создали с 3 столбцами и тремя записями, каждая из которых представляет собой серийный номер, штат и столицу.

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

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

, так как именно они образуют ячейки.

Синтаксис:

  td, th{
    граница: <измерение> <тип границы> <цвет границы>;
}

Пример: Давайте применим некоторую границу к нашей простой HTML-таблице.

Код CSS:

  тд, т {
    граница: 1px сплошная #777;
}

Приведенный выше код CSS помещает сплошную рамку толщиной 1 пиксель вокруг всех ячеек с шестнадцатеричным цветом границы #777 (слегка темно-серым).

Выход:

CSS Table Border-Spacing

Теперь, как мы видим, расстояние между границами двух ячеек по умолчанию составляет 2 пикселя. Это можно настроить с помощью свойства border-spacing. Мы применяем это свойство к элементу

Примечание : это свойство не следует путать со свойством поля в CSS.

Синтаксис:

  таблица {
  border-spacing: <измерение>;
}

Пример: Давайте попробуем установить для свойства border-spacing простой HTML-таблицы значение 15 пикселей.

Код CSS :

  td, th {
    граница: 1px сплошная #777;
}
 
стол {
     интервал между границами: 15 пикселей;
}

Приведенный выше код CSS добавляет сплошную рамку шириной 1 пиксель вокруг всех ячеек и устанавливает интервал между границами равным 15 пикселей.

Вывод:

CSS Table Border-Collapse

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

. Это свойство имеет два значения: отдельные и свернуть. отдельно установлено по умолчанию.

Синтаксис:

  таблица {
    граница-коллапс: <отдельный | коллапс>;
}

Пример: Давайте применим свойство border-collapse: Collapse к простой HTML-таблице.

Код CSS:

  тд, т {
    граница: 1px сплошная #777;
}
 
стол {
    граница коллапса: коллапс;
}

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

Выход:

CSS Table Padding

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

, или мы можем добавить отдельный класс или идентификатор и применить цвет конкретной ячейки).

Синтаксис:

  tbody{
    цвет: <имя_цвета | код_цвета>;
}

Пример: Сделаем цвет шрифта в приведенной выше таблице белым, чтобы тексты были читабельными.

Код CSS:

  tbody{
    белый цвет;
}

Приведенный выше код CSS изменяет цвет шрифта на белый для всех текстов в теле таблицы.

Выход:

Теперь у нас есть красивая таблица в стиле CSS!

Высота и ширина таблицы CSS

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

Примечание : Свойство padding изменяет расстояние между содержимым ячейки и границей ячейки, с другой стороны, свойство border-spacing изменяет расстояние между двумя соседними границами ячейки.

Синтаксис:

  td, th{
    заполнение: <измерение>;
}

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

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

Код CSS:

  тд, т {
    набивка: 0,5 бэр;
}

Приведенный выше код CSS применяет к ячейкам заполнение 0,5 rem.

Выход:

Таблица CSS Текстовое выравнивание

Как видно из приведенного выше вывода, все содержимое, за исключением ячеек заголовков, выровнено по левому краю. Используя свойство text-align, мы можем изменить выравнивание по центру или по правому краю. Мы применяем это свойство к элементу

Синтаксис:

  td{
    выравнивание текста: <влево | центр| справа>;
}

Пример: Давайте выровняем тексты в таблице по центру после того, как мы добавили отступы и границы.

Код CSS:

  тд{
    выравнивание текста: по центру;
}

Приведенный выше центр кода CSS выравнивает текст во всех ячейках.

Код CSS для выравнивания по левому и правому краю:

  td{
    выравнивание текста: по левому краю;
}

  тд{
    выравнивание текста: вправо;
}

Вывод для выравнивания по центру (это будет аналогично для выравнивания по левому и правому краям):

Цвет фона таблицы CSS

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

Синтаксис:

  ттел{
фон: ;
}

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

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

Код CSS:

  tbody tr:nth-child(нечетный) {
     фон: #202932;
}
tbody tr:nth-child(even) {
     фон: #2c3844;
}

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

Выход:

Но, как мы видим, черный цвет шрифта не делает текст очень читабельным, не так ли?

Для этого у нас есть свойство цвета таблицы CSS.

Цвет таблицы CSS

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

, и

(т. е. всех элементов, которые имеют свойства высоты и ширины). Синтаксис:

  <элемент таблицы HTML>{
ширина: <измерение>;
}

<Элемент HTML-таблицы>{
высота: <измерение>;
}

Пример: Давайте попробуем изменить высоту строки заголовка в нашей таблице на 80 пикселей, а высоту элементов данных таблицы на 50 пикселей. Сделаем так же всю ширину таблицы 50% от всего окна просмотра.

Код CSS:

  {
    высота: 80 пикселей;
}
 
тд {
    высота: 50 пикселей;
}
 
стол {
    ширина: 50%;
}

Приведенный выше код CSS изменяет высоту элемента заголовка таблицы

на 80 пикселей, высоту элемента данных таблицы

на 50 пикселей и ширину всей таблицы , установлен на 50% окна просмотра.

Выход:

Пустая ячейка таблицы CSS

Это свойство позволяет удалить границу пустых ячеек. У значения есть два свойства: показать и скрыть. Значение по умолчанию — показать. Мы применяем это свойство к HTML-элементу

ВАЖНО: Это свойство не будет иметь никакого эффекта при использовании вместе с border-collapse: свернуть.

Синтаксис:

  таблица{
    пустые ячейки: <скрыть | показать>;
}

Пример: Рассмотрим следующую таблицу:

Последние две ячейки в третьем столбце пусты. И границы тоже видны. Теперь давайте применим свойство empty-cells: hide.

Код CSS:

  таблица {
    пустые ячейки: скрыть;
}

Приведенный выше код CSS применяет свойство empty-cells: hide к элементу

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

Вывод:

Таблица CSS Table-Tayout

Это свойство определяет способ отображения макета таблицы в браузере . У этого свойства есть два значения: автоматическое и фиксированное. Значение по умолчанию — авто. Мы применяем это свойство к HTML-элементу

Примечание : Макет — это способ расположения всех визуальных элементов на веб-сайте.

авто: Таблица изменит ширину столбца, чтобы уместить все содержимое в этом конкретном столбце. Таким образом, перед установкой ширины столбца необходимо проверить все ячейки в столбце. По этой причине рендеринг таблицы с table-layout: auto происходит медленно.
исправлено: Ширина столбца определяется на основе ширины таблицы или указанной ширины столбца. Ширина столбца определяется на основе ширины элемента первой строки этого столбца. Поскольку ширину всего столбца можно определить, взглянув только на первую строку, рендеринг выполняется быстрее по сравнению с автоматическим режимом.

Синтаксис:

  <таблица>{
    макет таблицы: <авто | исправлено>;
}

Пример: Сделаем таблицу с тремя столбцами и тремя строками. Ширина первого столбца первой строки установлена нами равной 400 px (мы увидим, что при изменении макета таблицы с автоматического на фиксированный этот столбец остается неизменным). А остальные записи не имеют заданной ширины. Вся таблица имеет ширину 100%.

HTML-код:

  <тело>
    <таблица>

<таблица>

Приведенный выше HTML-код создает необходимую таблицу. Теперь давайте добавим к нему немного CSS. Код CSS:

  заголовок {
    размер шрифта: 1.8rem;
}
стол {
    ширина: 100%;
    размер шрифта: 1.2rem;
    поле: 20px авто;
}
 
tbody tr:nth-child(нечетный) {
    фон: #202932;
}
 
tbody tr:nth-child(even) {
    фон: #2c3844;
}
 
тело {
    белый цвет;
}
 
стол, тд, й {
    граница коллапса: коллапс;
}
 
й, тд {
    отступ: 10 пикселей;
    граница: 1px сплошная #777;
    выравнивание текста: по центру;
}
 
.firstRowFirstColumn {
    ширина: 400 пикселей;
}

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

Выход: макет таблицы: авто

Теперь добавим свойство table-layout: fixed и посмотрим, как визуально изменится таблица.

Код CSS:

  <таблица>{
    макет таблицы: фиксированный;
}

Вышеприведенный код CSS устанавливает для свойства table-layout фиксированное значение.

Выход: макет таблицы: фиксированный

Как мы видим, ширина первого столбца остается фиксированной и составляет 400 пикселей независимо от значения table-layout. Это потому, что мы явно упомянули об этом в нашем коде CSS. В то время как другие столбцы настроены так, чтобы иметь одинаковую ширину.

Советы по стилю таблицы

Выравнивание текста внутри ячеек
- Горизонтальное выравнивание содержимого ячейки: текст можно выровнять по горизонтали (т. е. слева, по центру или справа от ячейки) с помощью свойства text-align. У этого свойства есть три значения: слева, по центру и справа. Оставлено значение по умолчанию.

Вертикальное выравнивание содержимого ячейки: Текст можно выровнять по вертикали (т. е. по нижнему, среднему или верхнему краю ячейки) с помощью свойства вертикального выравнивания. У этого свойства есть три значения: нижнее, среднее и верхнее. Значение по умолчанию — среднее.

На приведенном выше изображении значение стороны заголовка установлено наверх.

На изображении выше показано, когда значение стороны заголовка установлено внизу.

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

Код CSS:

  tbody tr:nth-child(нечетный) {
    фон: ;
}

tbody tr:nth-child(even) {
    фон: ;
}

Создание адаптивной таблицы: Чтобы сделать таблицу адаптивной, нам нужно установить ширину таблицы, используя относительные единицы, такие как %. Таким образом, при изменении размера окна просмотра таблица будет соответственно уменьшаться.

Далее нам нужно установить для свойства overflow-x элемента

Пример фиксированного макета
Заголовок 1	Длинный текст в качестве заголовка 2, например, для отображения фиксированного макета	Заголовок 3
Длинный текст в качестве образца данных таблицы, например, для демонстрации фиксированного макета	Пример данных таблицы	Пример данных таблицы
Пример данных таблицы	Пример данных таблицы	Пример данных таблицы

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

Пример: Давайте создадим таблицу с большим количеством столбцов и сделаем ее отзывчивой, используя относительные единицы и свойство overflow-x.

Код HTML для создания таблицы:

  <дел>
    <таблица>

Содержимое таблицы записывается внутри элемента

Код CSS:

  таблица {
    ширина: 100%;
}

Приведенный выше код CSS делает ширину таблицы адаптивной и устанавливает ее равной 100% ширины окна просмотра.

Вывод:

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

Обработка пустых ячеек: Пустые ячейки можно обрабатывать с помощью свойства empty-cells: hide.

Когда использовать таблицы?

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

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

Образец 1:

Образец 2:

Когда не использовать таблицы?

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

У вас могут возникнуть вопросы, например, будет ли это видно зрителю? Ну, ответ на это НЕТ. Но поток вашей веб-страницы будет совершенно другим. Вы можете получить четкое представление об искаженном потоке, когда используете программу чтения страниц. Он будет рассматривать весь макет веб-страницы, разработанный с элементами таблицы, как таблицу. Часто он может считывать начало таблицы, что будет звучать совершенно неправильно!

или.

;

Атрибут	Что это делает
Colspan		>; <число> определяет ширину текущей ячейки в несколько столбцов.»
rowspan	,	Заставляет ячейку расширяться до высоты 2 или более ячеек, т. е. одна ячейка будет иметь высоту 2 или более ячеек.	>; определяет, сколько строк должна иметь текущая ячейка по высоте.»
span
Он определяет, сколько столбцов должен занимать HTML-элемент

Устаревшие атрибуты

Устаревшие атрибуты — это атрибуты, которые больше не используются. Это не значит, что вы не можете их использовать! Вы можете использовать их в своем коде, но есть и более новые способы сделать то же самое! При использовании STRICT DOCTYPE эти устаревшие атрибуты могут быть объявлены недействительными.

ПРИМЕЧАНИЕ. Просто чтобы устранить путаницу между свойствами и атрибутами, мы используем атрибуты следующим образом:

  <таблица bgcolor="F57A0A">

Но мы используем свойства в нашем CSS или внутри тегов