Як стилізувати таблицю за допомогою CSS, щоб отримати максимальний ефект і бути поміченим

Автор

Під час роботи з HTML (мова розмітки гіпертексту) та іншими мовами розмітки, такими як XML, ви зустрінете багато атрибутів і тегів. Таблиці – це атрибути, які слід завжди використовувати, щоб полегшити користувачам сканування, порівняння та аналіз великих обсягів даних.

За допомогою таблиць користувачі можуть одразу побачити ключові моменти, висновки чи результати, навіть не читаючи всю статтю. Ви можете використовувати CSS для стилізації та зміни зовнішнього вигляду своїх таблиць.

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

  • Покращте візуальний вигляд: звичайні столи можуть бути нудними та простими. Стилізація таких таблиць покращить їх зовнішній вигляд і зробить їх привабливими для користувачів.
  • Покращення доступності: стилізовані столи можуть зробити їх доступними навіть для людей з обмеженими можливостями.
  • Покращення читабельності: ви можете використовувати різні методи стилізації, щоб полегшити користувачам перегляд даних, представлених у ваших таблицях.
  • Брендінг: ви можете посилити ідентичність свого бренду, застосувавши узгоджені шрифти та кольори на таблицях у своїй програмі.
  • Добре для пошукових систем: систематизація даних у табличних форматах буде корисною, якщо ви хочете, щоб ваш веб-сайт був високо оцінений у пошукових системах.

Створіть основну таблицю за допомогою HTML

Щоб продемонструвати, як таблиця працює в HTML, ми створимо папку проекту, перейдемо в папку та створимо два файли; index.html, який містить наш HTML-код, і styles.css, який містить наш CSS-код (стилі).

Якщо ви бажаєте слідувати, використовуйте ці команди, щоб почати;

mkdir Styling-HTML-Tables

cd Styling-HTML-Tables

торкніться Styling-HTML-Tables

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

Для створення HTML-таблиці всі дані повинні бути укладені в тег

…

.

У вашому файлі HTML створіть базову структуру документа HTML. Додайте цей код у тег . 

<table>

        <tr>

          <th>Language</th>

          <th>Common Uses</th>

          <th>Companies Using</th>

        </tr>

        <tr>

          <td>Java</td>

          <td>Web apps, Android apps, enterprise applications</td>

          <td>Google, Amazon, LinkedIn</td>

        </tr>

        <tr>

          <td>Python</td>

          <td>Data science, web dev, automation</td>

          <td>Google, Dropbox,Spotify</td>

        </tr>

        <tr>

          <td>JavaScript</td>

          <td>Web dev, front-end dev, browser scripting</td>

          <td>PayPal, Facebook, Netflix</td>

        </tr>

        <tr>

          <td>C++</td>

          <td>Game dev, systems programming, embedded systems</td>

          <td>Tesla, Microsoft, Adobe</td>

        </tr>

        <tr>

          <td>Swift</td>

          <td>iOS development, macOS development</td>

          <td>Apple</td>

        </tr>

        <tr>

          <td>PHP</td>

          <td>Web dev, server-side scripting, CMSs</td>

          <td>WordPress, Wikipedia, Yahoo</td>

        </tr>

      </table>

Якщо ви уважно подивіться на цю таблицю, ви помітите ще кілька тегів, укладених у тег

  Як перенести відео на iPad
;

,

, рядок таблиці, укладено в елемент

і

.

Ці теги роблять наступне;

. Тег

може містити один або кілька елементів

. За замовчуванням його вміст виділено жирним шрифтом.
    • і

    		.
    		• , заголовок таблиці, міститься в тегу

    , табличні дані, описує вміст даних у клітинках таблиці.

    Коли ви візуалізуєте код, який ми написали вище, ми матимемо це в нашому браузері;

    Властивості CSS, що використовуються для стилізації таблиць

    Таблиця, яку ми створили вище, повністю функціональна. Однак він залишає бажати кращого, оскільки він погано укладений. Щоб досягти бажаних стилів і зробити таблицю візуально привабливою, ми будемо використовувати CSS.

    Пам’ятаєте файл CSS, який ми створили? Настав час ним скористатися. Однак вам потрібно спочатку імпортувати файл CSS у файл HTML, щоб стиль працював. Ми назвали наш файл CSS styles.css. У розділі вашого документа HTML додайте наступне;

    Тепер ми готові стилізувати наш стіл. Ми можемо стилізувати його наступним чином;

    #1. Кордон

    Ми можемо додати рамку навколо клітинок нашої таблиці. Щоб досягти цього, ми визначимо властивість border для елементів

    		і

    		. Ми можемо встановити рамку на 2 пікселя. 

    th, td {

    border: 2px solid orange;

  }

    Ми встановили значення рамки як 2 і додали помаранчевий як наш колір.

    Коли ви візуалізуєте нову сторінку, ви побачите наступне;

    #2. Кордон-колапс

    Якщо ви подивитеся на знімок екрана вище, ви помітите, що між межами кожної комірки є проміжки. Властивість border-collapse визначає, чи мають суміжні клітинки в таблиці мати спільну межу.

    Якщо ви хочете, щоб клітинки мали спільну рамку, додайте цей код до свого файлу CSS;

    table {

  border-collapse: collapse;

}

    Коли ви візуалізуєте свою сторінку, ви можете побачити, що клітинки мають спільні межі наступним чином;

    Якщо ви хочете, щоб клітинки мали різні рамки, додайте це до свого файлу CSS;

    table {

  border-collapse: separate;

}

    Відтворена сторінка відобразиться наступним чином;

    #3. Інтервал між межами

    Використовуючи властивість border-space, ми можемо створити невеликий простір між клітинками нашої таблиці. Ми встановлюємо правило всередині класу таблиці в нашому файлі CSS.

    Щоб ця властивість працювала, нам потрібно використовувати border-collapse: separat; власність.

    Ми можемо мати наш табличний клас наступним чином;

    table {

    border-collapse: separate;

    border-spacing: 3px;

  }

    Відстань між клітинками становить 3 пікселя.

    Коли ви візуалізуєте таблицю, вона буде виглядати наступним чином;

    #4. Таблиця-розкладка

    Властивість Table-layout визначає характер таблиці. Ви можете мати столи, які завжди мають однакову довжину. З іншого боку, ви також можете створювати таблиці, які змінюються залежно від вмісту.

    Якщо ми хочемо мати комірки однакового розміру, ми можемо встановити властивість table-layout як фіксовану.

    таблиця-верстка: фіксована;

    Наш остаточний код у класі таблиці буде таким: 

    table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

    Якщо ми хочемо, щоб комірки змінювалися залежно від вмісту, ми можемо змінити властивість table-layout на auto.

    таблиця-верстка: авто;

    Клас кінцевої таблиці в нашому коді CSS буде таким:

    Перевірте останню клітинку таблиці та зверніть увагу, що я додав ці слова; MailChimp і багато іншого.

    Тепер ви можете бачити, що комірки в останньому рядку більші за інші, оскільки макет таблиці є гнучким залежно від вмісту.

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

    Ми можемо стилізувати ці властивості наступним чином;

    #5. Колір фону

    Ми можемо змінити фон нашого верхнього ряду на жовто-зелений. Ми можемо використовувати селектор псевдокласу :first-child для досягнення наших цілей.

    Додайте цей код до свого коду CSS;

    tr:first-child {

    background-color: yellowgreen;

  }

    Остаточний відображений код буде виглядати наступним чином;

    #6. Шрифт

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

    Ми націлимося на вміст останнього стовпця на нашій сторінці (Компанії, які використовують), щоб змінити стиль шрифту.

    Ми виділимо весь вміст цього стовпця курсивом, націлившись на селектор класу td:last-child. Ви можете додати наступний код до свого файлу CSS;

    td:last-child {

  font-style: italic;

}

    Остаточний результат буде таким, коли ви перезавантажите відрендерену сторінку;

    Ми також можемо змінити колір і розмір шрифту першого стовпця, щоб зробити його унікальним.

    Додайте наступний код до файлу CSS;

    tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

    Коли ви візуалізуєте свою сторінку, ви помітите наступне; вміст у першому стовпці (Мова) має більший розмір шрифту, червоний і жирніший.

    Як зробити таблицю адаптивною

    Таблиця, яку ми створили, може не реагувати на маленькі екрани. Щоб перевірити, чи адаптивний ваш код, можна скористатися Інструментами розробника Chrome або іншим зовнішнім інструментом.

    Ви можете скористатися кількома підходами, але охопимо лише один.

    Виконайте наступні дії;