HTML-таблицы по умолчанию выглядят довольно удручающе — украсьте их красивыми CSS-эффектами.

Добавление таблицы на ваш веб-сайт — это полезный способ четко представить большие объемы информации. Таблицы также обеспечивают эффективное использование пространства и упрощают чтение и сравнение сложных данных.

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

Современный дизайн отдельных строк и столбцов

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

Вы можете просмотреть код для этого упражнения в его репозиторий GitHub.

  1. В новый файл HTML добавьте базовую структуру кода HTML:
    HTML>
    <HTML>
    <голова>
    <заголовок>Моя простая таблицазаголовок>
    голова>
    <тело>

    тело>
    HTML>
    2. instagram viewer
  2. Внутри тела добавьте теги таблицы:
    <стол>

    стол>
  3. Элемент таблицы HTML должен содержать строка таблицы теги для каждой строки внутри таблицы. Верхний ряд обычно используется для заголовков. Использовать заголовок таблицы Теги HTML для представления каждого столбца в таблице:
    <тр>
    <й>Заголовок 1й>
    <й>Заголовок 2й>
    <й>Заголовок 3й>
    тр>
  4. Добавьте больше строк под строкой заголовка. Использовать данные таблицы Теги HTML для добавления данных в каждую ячейку таблицы:
    <тр>
    <тд>Строка 1, столбец 1тд>
    <тд>Строка 1, столбец 2тд>
    <тд>Строка 1, столбец 3тд>
    тр>
    <тр>
    <тд>Строка 2, столбец 1тд>
    <тд>Строка 2, столбец 2тд>
    <тд>Строка 2, столбец 3тд>
    тр>
    <тр>
    <тд>Строка 3, столбец 1тд>
    <тд>Строка 3, столбец 2тд>
    <тд>Строка 3, столбец 3тд>
    тр>
    <тр>
    <тд>Ряд 4, столбец 1тд>
    <тд>Ряд 4, столбец 2тд>
    <тд>Строка 4, столбец 3тд>
    тр>
    <тр>
    <тд>Ряд 5, столбец 1тд>
    <тд>Ряд 5, столбец 2тд>
    <тд>Строка 5, столбец 3тд>
    тр>
  5. Добавьте тег стиля внутри тега заголовка. Добавьте к таблице некоторые общие стили, такие как тени, закругленные углы таблицы, шрифты и поля:
    <стиль>
    стол {
    обрушение границы: крах;
    ширина: 100%;
    цвет: #333;
    семейство шрифтов: Ариал, без засечек;
    размер шрифта: 14пикс.;
    выравнивание текста: левый;
    радиус границы: 10пикс.;
    переполнение: скрытый;
    коробка-тень: 0 0 20пикс.RGBA(0, 0, 0, 0.1);
    допуск: авто;
    верхняя граница: 50пикс.;
    нижняя граница: 50пикс.;
     } 
    стиль>
  6. Настройте заголовок таблицы, чтобы придать ему цвет фона и выровненный текст:
    столй {
    фоновый цвет: #ff9800;
    цвет: #ффф;
    вес шрифта: смелый;
    набивка: 10пикс.;
    преобразование текста: верхний регистр;
    Межбуквенное расстояние: 1пикс.;
    верхняя граница: 1пикс.твердый#ффф;
    нижняя граница: 1пикс.твердый#ccc;
    }
  7. Настройте строки таблицы так, чтобы они чередовались между серым и белым цветами и добавляли эффект при наведении курсора на строку:
    столтр:nth-ребенок (четный)тд {
    фоновый цвет: #f2f2f2;
    }
    столтр:наведитетд {
    фоновый цвет: #ffedcc;
    }
  8. Стилизовать данные внутри ячеек таблицы:
    столтд {
    фоновый цвет: #ффф;
    набивка: 10пикс.;
    нижняя граница: 1пикс.твердый#ccc;
    вес шрифта: смелый;
    }
  9. Откройте файл HTML, чтобы просмотреть таблицу в веб-браузере:

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

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

  1. Удалите все текущие строки таблицы, оставив только верхнюю с заголовками:
    <стол>
    <тр>
    <й>Заголовок 1й>
    <й>Заголовок 2й>
    <й>Заголовок 3й>
    тр>
    стол>
  2. Создайте многострочную ячейку, используя атрибут rowspan. Это расширит эту ячейку на указанное количество строк.
     Секция 1 
    <тр>
    <тдряд="2">Многострочная ячейкатд>
    <тд>Строка 1, столбец 2тд>
    <тд>Строка 1, столбец 3тд>
    тр>
    <тр>
    <тд>Строка 2, столбец 2тд>
    <тд>Строка 2, столбец 3тд>
    тр>
  3. При добавлении другой многоячеечной строки с другим значением rowspan добавьте соответствующее количество строки таблицы HTML-теги. Это должно соответствовать высоте или количеству строк, через которые проходит ячейка. Например, если ячейка имеет строку rowspan, равную 3, вам потребуется добавить три строки к другим столбцам, чтобы правильно выровнять таблицу.
     Раздел 2 
    <тр>
    <тдряд="3">Многострочная ячейкатд>
    <тд>Строка 3, столбец 2тд>
    <тд>Строка 3, столбец 3тд>
    тр>
    <тр>
    <тд>Ряд 4, столбец 2тд>
    <тд>Строка 4, столбец 3тд>
    тр>
    <тр>
    <тд>Ряд 5, столбец 2тд>
    <тд>Строка 5, столбец 3тд>
    тр>
  4. Откройте файл HTML, чтобы просмотреть таблицу в веб-браузере:

Дизайн объединенной таблицы строк

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

  1. Удалите все текущие строки таблицы, оставив только верхнюю с заголовками:
    <стол>
    <тр>
    <й>Заголовок 1й>
    <й>Заголовок 2й>
    <й>Заголовок 3й>
    тр>
    стол>
  2. Добавьте в таблицу больше строк таблицы. Используйте атрибут colspan, чтобы объединить одну из строк в 3 столбцах:
     Секция 1 
    <тр>
    <тдстиль="цвет фона: #ffedcc"колспан="3">Q1тд>
    тр>
    <тр>
    <тд>Строка 2, столбец 1тд>
    <тд>Строка 2, столбец 2тд>
    <тд>Строка 2, столбец 3тд>
    тр>
    <тр>
    <тд>Строка 3, столбец 1тд>
    <тд>Строка 3, столбец 2тд>
    <тд>Строка 3, столбец 3тд>
    тр>
    <тр>
    <тд>Ряд 4, столбец 1тд>
    <тд>Ряд 4, столбец 2тд>
    <тд>Строка 4, столбец 3тд>
    тр>
  3. Добавьте еще одну объединенную строку, чтобы разделить разделы таблицы:
     Раздел 2 
    <тр>
    <тдстиль="цвет фона: #ffedcc"колспан="3">Q2тд>
    тр>
    <тр>
    <тд>Ряд 6, столбец 1тд>
    <тд>Ряд 6, столбец 2тд>
    <тд>Ряд 6, столбец 3тд>
    тр>
    <тр>
    <тд>Ряд 7, столбец 1тд>
    <тд>Ряд 7, столбец 2тд>
    <тд>Ряд 7, столбец 3тд>
    тр>
    <тр>
    <тд>Ряд 8, столбец 1тд>
    <тд>Ряд 8, столбец 2тд>
    <тд>Ряд 8, столбец 3тд>
    тр>
  4. Откройте файл HTML, чтобы просмотреть таблицу в веб-браузере:

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

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

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