Как в css сделать таблицу: Стилизация таблиц — Изучение веб-разработки

Leave a Comment / Css / By /

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

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

Теги и атрибуты таблиц

Вот основные элементы, которые нужны для создания таблиц:

  • <table> — контейнер, внутри которого располагается таблица (такой же, как <ul> для маркированных или <ol> для нумерованных списков).
  • border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
  • <caption> задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега <table>, вне ячеек и строк.
  • <tr> — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
  • <th> — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри <th> обозреватель выделяет жирным и размещает по центру.
  • <td> — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег <tr>, столько ячеек в ней и будет: один тег — одна ячейка.
  • <colgroup> позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега <caption>, если его нет, то после <table>.
  • <col> используется для той же цели, что и <colgroup>. <colgroup> может содержать <col>, но не наоборот.
  • span — атрибут, задающий число столбцов, к которым применяются свойства контейнера <col>.
  • <thead>, <tbody> и <tfoot> — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров <head>, <body> и <footer> в HTML-документе.
  • colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
  • rowspan объединяет ячейки по столбцам.

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

Создайте документ формата HTML и скопируйте в него следующий код:

<!DOCTYPE html>
<html>
   <head>
	<title>Пример таблицы</title>
   </head>
   <body>
	<table border="1">
	 <caption>Инструменты создания сайтов</caption>
	 <tr>
	  <th>Назначение</th><th colspan="2">Инструмент</th>
	 </tr>
	 <tr>
	  <td>Разметка</td><td>HTML</td><td>XHTML</td>
	 </tr>
	 <tr>
	  <td>Оформление</td><td colspan="2">CSS</td>
	 </tr>
	 <tr>
	  <td>Разработка</td><td>PHP</td><td>Python</td>
	 </tr>
	</table>
   </body>
</html>

В браузере документ будет выглядеть так:

Разберём, какие строчки кода за что отвечают.

  • <table border=»1″> — открыли таблицу, задав ей толщину рамок.
  • <caption> Инструменты создания сайтов </caption> — озаглавили её.
  • <tr> — открыли строку.
  • <th>Назначение</th> — создали ячейку с оформлением заголовка.
  • <th colspan=»2″>Инструмент</th> — создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
  • </tr> — закрыли строку. Аналогично создали остальные строки.
  • <tr> <td>Разметка</td><td>HTML</td><td>XHTML</td> </tr> — добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
  • </table> — закрыли таблицу.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Скачать приложение

Смотрите также

Вставка изображения в HTML

Табличная HTML верстка сайта

Шпаргалка фронтендера: гид по таблицам | GeekBrains

Подробное руководство, как сделать опрятную и информативную таблицу

6 минут

15889

Автор статьи

Светлана Сирвида-Льорентэ

Автор статьи

Светлана Сирвида-Льорентэ

https://gbcdn. mrgcdn.ru/uploads/post/1803/og_cover_image/706da601b44ca4015a1b2f704d68a496

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

Как отобразить данные

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

В «Справочнике издателя и автора» Аркадия Мильчина и Людмилы Чельцовой даются правила, которые помогают устранить информационный шум: убрать повторы, лишние ячейки и слова, упростить информацию в целом. Чтобы уменьшить размер таблиц, Аркадий Мильчин советует их сдваивать, страивать и «перевертывать», объединять графы, менять местами заголовки столбцов и строк, выносить информацию за пределы таблицы. Для длинных сложных таблиц желательно придумать, как переформатировать данные.

Было

Стало

Сделать чище. Иногда таблицы выглядят неопрятными — в них много цвета, жирности, линеек. Если убрать оформление полностью, как правило, становится лучше. Цифры в строгих столбиках на белом фоне читаются проще, и информативность таблицы повышается.

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

Сделать удобной. Таблицы не составляют только для того, чтобы они были. Цель каждой — донести до читателя важную информацию. При составлении таблицы задайте себе вопрос «Что именно должен узнать читатель?» В зависимости от ответа сгруппируйте данные и выделите важные. Если сравниваете стоимость, посчитайте разницу в цене за читателя и сразу укажите ее в таблице. Выделите важное цветом или расположите на особом месте в таблице — внизу или отдельно от других данных.

Таблица — маленькое исследование. В ней должны быть полные и достоверные данные. При возможности указывайте ссылку на источник. Располагайте информацию логически — колонки и строки должны соподчиняться между собой. Если в заголовке года, не стоит внутри делить на недели — разбейте таблицу по месяцам или кварталам. Размещайте в одной графе сопоставимые данные — не смешивайте литры и штуки. Часто точные числа не нужны — округлите их до целого. В числах с множеством нулей уберите разряды: вместо 333 500 000 напишите 333,5 млн.

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

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

Основные теги — <table>, <tr> и <td>. Таблицы верстают не столбцами, а строками. То есть мы сначала прописываем первую строку (<tr>) и сразу в ней — нужное количество ячеек (<td>), таким же образом вторую строку. И так создаем все строки. Саму таблицу помещают в тег <table>. Простая таблица выглядит так:

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

Для шапки и итога таблицы есть собственные теги — <thead> и <tfoot>. Они не обязательны. Раньше при табличной верстке их использовали как шапку и подвал сайта, так же как сейчас — <header> и <footer>. Теперь <thead> и <tfoot> применяют на усмотрение фронтендера.

Для группировки строк по блокам можно использовать тег <tbody>. Теги <thead>, <tbody> и <tfoot> вкладывают в родительский тег <table>. Внешне таблицы, оформленные разными тегами, не отличаются друг от друга. Но при семантической верстке мы сможем для каждого блока применить собственное оформление.

Для заголовка таблицы используйте тег <caption>, который ставится сразу после открывающего тега <table>. Новички часто для заголовков таблицы используют тег <h4>, однако это неверно. Браузер не сможет определить, к чему именно относится заголовок, а <caption> сразу свяжет его с таблицей. Заголовок оформляют средствами CSS, а выравнивают через свойство text-align. Мы его рассмотрим ниже.

Чтобы сэкономить время, можно воспользоваться html-генераторами таблиц: Daruse, «Замётки», Tables Generator и другими. Вам необходимо будет ввести количество строк и столбцов и при необходимости указать, какие из них нужно объединить. В некоторых генераторах можно настроить стиль, цвет, добавить заголовок.

Группировка ячеек. Иногда ячейки требуется объединить. Используйте для тега <td> атрибуты: colspan для объединения по горизонтали и rowspan — по вертикали. Запись выглядит так:


<td colspan=”число”></td>
<td rowspan=”число”></td>

Для атрибута указывайте количество ячеек для объединения.

Ячейки, которые больше не нужны, удалите вручную, иначе таблица «поедет».

Границы. По умолчанию в таблице нет границ и фона. Их можно задать с помощью свойства css border — установить ширину, жирность и цвет. Свойство не наследуется, поэтому если его применить только к тегу <table>, то у таблицы будет только внешняя граница, без разделения на ячейки внутри.

Чтобы границы были еще и у ячеек, необходимо присвоить свойство тегу <td>. В нашем примере внешняя граница таблицы — красная, внутренние — синие.

Если нужна таблица с сеткой, присваивайте границы только тегу <td>, чтобы не дублировать внешнюю границу.

Мы видим, что по умолчанию все границы двойные. Чтобы сделать их одинарными, используйте свойство border-collapse для тега <table>:


border-collapse: separate; /* двойная рамка */
border-collapse: collapse; /* одинарная рамка */

Если нужно сделать двойную рамочку, используйте свойство CSS border-spacing. Оно задает расстояние между ячейками. Можно сделать одинаковые отступы — например, border-spacing: 5px;, или разные — border-spacing: 3px 6px;. Здесь первое значение задает отступы по горизонтали, второе — по вертикали. Свойство не работает при border-collapse: collapse;.

Когда нужна не сетка, а линии внутри таблицы, используйте свойства: border-bottom (линия снизу), border-top (линия сверху), border-left (линия слева) и border-right (линия справа). Они работают с тегами <table> и <td>.

Размеры таблицы. Высота и ширина таблицы задается текстом внутри нее. Чем его больше, тем шире таблица. Чтобы управлять размерами, используйте свойства CSS: width (ширина) и height (высота). Их задают в процентах, пикселях, em — во всех единицах измерения. Например, width:100% задает ширину таблицы по ширине родительского контейнера.

А это таблица со строгой шириной — 600 пикселей.

Фон. Цвет устанавливают с помощью свойства background. Оно наследуется, поэтому проверяйте, к какому элементу прописываете.

Чтобы сделать «зебру», используйте псевдокласс :nth-child для тега <tr>: even (четные) и odd (нечетные). Записывается так:


tr:nth-child(odd) {
    background: green;
}

Текст внутри. По умолчанию для текста установлено выравнивание по левому краю и по центру высоты. Чтобы его изменить, используйте свойство text-align. Оно задает тексту шесть положений:

  • left — по левому краю;
  • right — по правому краю;
  • start — по левому краю, когда текст идет слева направо, и по правому краю, если справа налево;
  • end — по правому краю, если текст идет слева направо, и по левому краю, если справа налево;
  • center — по центру;
  • justify — по ширине (браузер добавляет пробелы).

Для выравнивания по высоте применяйте свойство vertical-align, которое задает четыре положения:

  • baseline — по умолчанию выравнивает базовую линию ячейки с базовой линией первой строки;
  • bottom — по нижнему краю;
  • middle — по середине;
  • top — по верхнему краю.

Нужна ли нам таблица

Лучше текстом. Иногда в таблице много текста, который переходит на несколько строчек. Издалека она выглядит опрятно, но читать ее неудобно. Автору приходится мельчить и выбрасывать важные подробности, чтобы уместить текст в таблицу. Вместо этого лучше оформить информацию текстом в виде наборных подзаголовков. Для каждой ячейки таблицы написать отдельный абзац, а смысл изложить в мире читателя. Например, построить структуру в таблице, в которой сравниваются языки программирования, не по их названиям: С, Java, Swift, — а по назначению: «Языки для мобильной разработки», «Языки для web-разработки» и подобное.

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

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

Инфографика Diversity in Tech, портал informationisbeautiful.net

Шпаргалка

верстка, front-end, front-end development

Нашли ошибку в тексте? Напишите нам.

CSS — Столбцы таблицы

CSS — Столбцы таблицы

Вернуться к оглавлению.

Спецификация.

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

Какие столбцы

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

HTML 
<таблица>
  <кол /> 
   

Первый TD первого TR
Второй TD первого TR
Третий TD первого TR
Четвертый ТД первого ТР


Первый TD второго TR
Второй TD второго TR
Третий TD второго TR
Четвертый ТД второго ТР

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

Ограничения

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

Во-вторых, W3C указывает, что только несколько объявлений могут быть использованы для столбцов: граница , фон , ширина и видимость . Исключение: IE7 и более ранние версии разрешают все объявления.

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

цвет фона и цвет

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

<таблица>
<столбец />
Первое ТД первого ТУ Второй ТД первого ТЗ Третье ТД первого ТЗ Четвертая ТД первой ТР
Первое ТД второго ТУ Второй ТД второго ТР Третий ТД второго ТУ Четвертый ТД второго ТУ

Чтобы ячейки были читаемыми, я также хочу, чтобы текст был белого цвета. Это, к сожалению, не работа. Большинство браузеров не поддерживают цвет : #ffffff , потому что W3C не разрешает объявление цвета по столбцам.

Проводник Windows является исключением: он позволяет использовать цвет. В этом вопросе я склоняюсь на сторону Microsoft; Я не понимаю, почему вы не можете использовать все обычные стили на столбцы.

Строки и ячейки имеют приоритет над столбцами

Помните общее правило: любой стиль строки или ячейки имеет приоритет над стилем столбца. Следовательно background-color s из и применяются а те, что в столбцах, игнорируются.

Первый TD первого TR
[... и т. д ...]
 // второй ТР
Первое ТД первого ТУ Второй ТД первого ТЗ Третье ТД первого ТЗ Четвертая ТД первой ТР
Первое ТД второго ТУ Второй ТД второго ТР Третий ТД второго ТУ Четвертый ТД второго ТУ

граница

Применим границу ко второму столбцу. Это допустимое объявление, но оно не работает сразу:
Первое ТД первого ТУ Второй ТД первого ТЗ Третье ТД первого ТЗ Четвертая ТД первой ТР
Первый ТД второго ТУ Второй ТД второго ТР Третий ТД второго ТУ Четвертый ТД второго ТУ

Без границы. Это правильное поведение: объявление границы на столбец действителен только в том случае, если вся таблица имеет border-collapse: Collapse .

<таблица>
Первое ТД первого ТУ Второй ТД первого ТУ Третье ТД первого ТЗ Четвертая ТД первой ТР
Первое ТД второго ТУ Второй ТД второго ТР Третий ТД второго ТУ Четвертый ТД второго ТУ

После добавления border-collapse граница работает. К сожалению, браузеры расходятся во мнениях относительно точного объема границы. Браузеры WebKit делают это:

Другие браузеры добавляют среднюю границу:

ширина

В столбцах ширина означает min-width , что соответствует с определениями ширины для элементов таблицы в целом. Что еще более странно, считается объявление ширины . для каждого столбца , заключенного в тег . Таким образом, площадь второго тега имеет общую ширину 10em + Cellspacing.

<столбец />

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

ТД ТД ТД ТД
ТД ТД ТД ТД

Я использую этот трюк во всех своих таблицах совместимости, где я определяю ширину TD через столбцы. Точная ширина зависит от диапазона столбцов. Я делаю это так, чтобы у шести столбцов IE было столько же, сколько у двух столбцов Firefox или трех столбцов Chrome/Яндекс.

видимость: свернуть

Обычно видимость принимает три значения:

  1. видимый : видимый элемент. Это значение по умолчанию.
  2. hidden : элемент скрыт, но место, которое он занимает, остается пустым.
  3. свернуть : элемент скрыт, а занимаемое им место тоже удалено.

Однако в спецификации четко указано, что в случае столбцов только свернуть является допустимым значением.
Первое ТД первого ТУ Второй ТД первого ТЗ Третье ТД первого ТЗ Четвертая ТД первой ТР
Первое ТД второго ТУ Второй ТД второго ТР Третий ТД второго ТУ Четвертый ТД второго ТУ

Пошаговое руководство

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

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

В этом руководстве на примерах будет обсуждаться, как оформить таблицу с помощью CSS. К концу этого урока вы станете в этом экспертом.

Найдите свой матч для буткемпа

  • Career Karma подберет для вас лучшие учебные курсы по технологиям
  • Получите доступ к эксклюзивным стипендиям и подготовительным курсам

Выберите свой интерес
Программная инженерия Дизайн Наука о данных Аналитика данных Информационная безопасность Имя

Фамилия

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

Номер телефона

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

HTML-таблицы

Код HTML определяет структуру таблиц. Вы используете тег

для определения таблицы. Теги, <тд>79 <тд>57

Эта таблица включает три столбца и шесть строк, включая одну строку заголовка.

CSS-таблицы

CSS используется для стилизации таблиц. Хотя в приведенной выше таблице данные отображаются упорядоченно, они написаны в простом HTML (стили отсутствуют). Используя CSS, вы можете сделать таблицы более эстетичными.

Существует множество функций CSS, которые можно использовать для стилизации таблицы. Используя CSS, вы можете:

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

Мы рассмотрим все эти темы в обсуждении ниже.

Границы

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

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

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

В нашем коде мы определяем сплошную черную рамку шириной в 1 пиксель. Вот результат нашего кода:

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

Венера, инженер-программист в Rockbot

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

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

Давайте рассмотрим пример HTML-таблицы. В приведенном ниже примере у нас есть таблица, в которой перечислены пять лучших книг на Газета «Нью-Йорк Таймс список бестселлеров за неделю от 23 марта 2020 года:

Код для нашей таблицы выглядит следующим образом: 

 <таблица>
Название книги Автор Недели в списке
Зеркало и свет Хилари Мантел Новинки этой недели
Путешествие фараонов Клайв Касслер и Грэм Браун Новинки этой недели
Где поют раки Делиа Оуэнс
Американская грязь Джанин Каммингс 8
Повсюду маленькие пожары Селеста Нг
), ее заголовкам () в нашей таблице менялся на светло-серый, когда пользователь наводит на них курсор. Мы можем сделать это, используя этот код: 

 тр: наведение {
цвет фона: светло-серый;
}

Наш код возвращает:

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

Таблица цветов

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

-й {
цвет фона: серый;
белый цвет;
}

Наш код возвращает:

В этом примере ячейки заголовка нашей таблицы (

) и ее ячейкам (). Чтобы объединить двойные границы в одинарные, мы можем использовать свойство border-collapse.

Обрушение границы

Свойство border-collapse преобразует двойные границы в таблице в одинарные. Значение свойства border-collapse по умолчанию — свернуто. Если свойству border-collapse присвоено значение крах , границы вокруг таблицы будут свернуты.

Вот пример свойства border-collapse в действии: 

 таблица {
граница коллапса: коллапс;
}

Наш код возвращает:

Наша таблица и ее содержимое теперь имеют единую границу.

Расстояние между границами

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

Вот пример, в котором используется свойство border-spacing для нашей исходной таблицы (та, у которой нет свернутых границ): 

 таблица {
интервал между границами: 10px 10px;
}

Наш код возвращает:

Каждая из наших ячеек имеет интервал 10 пикселей как по горизонтали, так и по вертикали.

Ширина и высота

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

Предположим, мы хотим, чтобы ширина нашей приведенной выше таблицы — той, что со свернутыми границами — была шириной самой веб-страницы. И давайте предположим, что мы хотим, чтобы высота заголовка каждой таблицы составляла 30 пикселей. Мы можем сделать это, используя следующий код CSS: 

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

Наш код возвращает:

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

Прокладка

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

 и.

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

-й, тд {
отступ: 10 пикселей;
}

Наш код возвращает:

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

Горизонтальное выравнивание текста

Вы можете использовать свойство text-align для горизонтального выравнивания текста, хранящегося в тегах

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

Наиболее часто используемые значения атрибута text-align:

  • слева, по центру, справа (поддерживается всеми браузерами, кроме Microsoft Edge и Internet Explorer)
  • начало и конец (поддерживается всеми браузерами, кроме Microsoft Edge и Internet Explorer)

Предположим, мы хотим центрировать элементы

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

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

Наш код возвращает:

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

Вертикальное выравнивание текста

Свойство CSS vertical-align используется для указания вертикального выравнивания содержимого в тегах

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

Предположим, мы хотим выровнять текст в наших ячейках

 по нижнему краю ячеек. Мы можем сделать это, используя этот код: 

 тд {
высота: 40 пикселей;
вертикальное выравнивание: снизу;
}

Наш код возвращает:

В этом примере мы устанавливаем высоту каждой ячейки

 равной 40 пикселям. Затем мы вертикально выровняли содержимое этих ячеек по нижней части ячеек.

Горизонтальные границы

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

 и.

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

-й, тд {
нижняя граница: 1px сплошной черный;
}

Наш код возвращает:

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

Наведение курсора мыши (: наведение)

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

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

Предположим, мы хотим, чтобы цвет фона строк (

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

Полосатый дизайн

При разработке таблицы вы можете использовать подход в стиле зебры. В этом стиле цвета строк чередуются между двумя цветами. Это создает полосатый эффект зебры. Для выполнения этой задачи мы можем использовать селектор nth-child().

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

 tr:nth-child(четный) {
цвет фона: светло-серый;
}

Наш код возвращает:

Мы устанавливаем цвет фона каждой четной строки в нашей таблице на светло-серый.

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

Пустые ячейки

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

Свойство empty-cells принимает одно из двух значений: скрыть или показать. CSS делает следующее, чтобы очистить ячейки, когда пользователь указывает одно из этих значений:

  • скрывать : скрывает цвет фона и границы.
  • показывать : показывает цвет фона и границы.

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

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

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

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