Как да стилизирате таблица с CSS за максимално въздействие и да бъдете забелязани

Ще срещнете много атрибути и етикети, когато работите с HTML (Hypertext Markup Language) и други езици за маркиране като XML. Таблиците са атрибути, които винаги трябва да използвате, за да улесните потребителите да сканират, сравняват и анализират големи количества данни.

С таблиците потребителите могат да видят ключовите точки, заключения или резултати с един поглед, дори без да четат цялата статия. Можете да използвате CSS, за да стилизирате и промените външния вид на вашите таблици.

Това са някои от причините, поради които може да се наложи да стилизирате таблица във вашето приложение;

Подобрете визуалния външен вид: Обикновените маси могат да бъдат скучни и обикновени. Оформянето на такива маси ще подобри външния им вид и ще ги направи привлекателни за потребителите.
Подобряване на достъпността: Стилизиращите маси могат да ги направят достъпни дори за хора с увреждания.
Подобрете четливостта: Можете да използвате различни техники за стилизиране, за да улесните потребителите да сканират данните, представени във вашите таблици.
Брандиране: Можете да подсилите идентичността на марката си, когато прилагате последователни шрифтове и цветове върху масите си във вашето приложение.
Добър за търсачките: Организирането на вашите данни в таблични формати ще бъде полезно, ако искате да класирате уебсайта си високо в търсачките.

Съдържание

Създайте основна таблица с HTML

За да демонстрираме как една таблица работи в HTML, ще създадем папка на проекта, ще отидем в папката и ще създадем два файла; index.html, който ще носи нашия HTML код, и styles.css, който носи нашия CSS код (стайлинг).

Ако искате да следвате, използвайте тези команди, за да започнете;

mkdir Styling-HTML-Tables

cd стилизиране-HTML-таблици

докоснете 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>

Ако погледнете внимателно тази таблица, ще забележите още няколко етикета, затворени в тага

Какво е EAMR твърд диск и как работи?

;

, ред от таблица, е ограден в елемента

и	. Тези тагове правят следното;

. Тагът

може да включва един или повече елементи

. По подразбиране съдържанието му е удебелено.

, заглавка на таблица, се съдържа в тага

, таблични данни, описва съдържанието на данните в клетките на таблицата.

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

CSS свойства, използвани за стилизиране на таблици

Таблицата, която създадохме по-горе, е напълно функционална. Въпреки това оставя много да се желае, тъй като не е оформен добре. За да постигнем желаните стилове и да направим таблицата визуално привлекателна, ще използваме CSS.

Помните ли CSS файла, който създадохме? Сега е време да го използвате. Въпреки това, първо трябва да импортирате вашия CSS файл във вашия HTML файл, за да работи стилът. Нарекохме нашия CSS файл styles.css. В секцията на вашия HTML документ добавете следното;

Вече сме готови да стилизираме нашата маса. Можем да го стилизираме по следния начин;

#1. Граница

Можем да добавим рамка навсякъде около клетките в нашата таблица. За да постигнем това, ще дефинираме свойство border на елементите

. Можем да зададем границата на 2px.

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: отделно; Имот.

Можем да имаме клас таблица както следва;

table {

    border-collapse: separate;

    border-spacing: 3px;

  }

Границите на клетките имат разстояние от 3px.

Когато изобразите таблицата, тя ще изглежда по следния начин;

#4. Таблица-оформление

Свойството Table-layout определя характера на таблицата. Можете да имате маси, които винаги имат еднаква дължина. От друга страна, можете също да създавате таблици, които се променят в зависимост от съдържанието.

Ако искаме да имаме клетки с подобни размери, можем да зададем свойството за оформление на таблицата като фиксирано.

оформление на таблица: фиксирано;

Нашият окончателен код на класа на таблицата ще бъде;

table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

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

оформление на маса: авто;

Класът на финалната таблица в нашия 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 или външен инструмент като този, за да тествате дали кодът ви отговаря.

Има няколко подхода, които можете да предприемете, но ще покрием само един.

Следвай тези стъпки;

Задайте ширината на елемента
във вашия код;

table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}

Задайте разделяне на думи на td и th, за да направите дълги думи в клетката.

th, td {

    border: 2px solid orange;

    word-break: break-word;

  }

Най-добри практики за таблици за оформяне

CSS може да бъде забавен веднъж, особено когато го знаете. Това са някои от най-добрите практики, за да сте сигурни, че получавате най-доброто, когато оформяте вашите маси;

Използвайте външен стилов лист: Имахме опция за използване на вграден стил, но избрахме външен лист. Успяхме да използваме повторно нашия стил в различни маси, намалявайки времето за разработка.
Бъдете прости: може да се увлечете и да прекалите стила на масите си. Винаги обаче поддържайте прост дизайн и направете таблиците си сканируеми и четими.
Добавете граници към вашите таблици: Рамката прави таблицата лесна за четене и сканиране.
Използвайте последователни цветове: Ако имате няколко таблици на вашите уеб страници, уверете се, че използвате последователни цветове и шрифтове. Използването на цветовете на вашата марка може да подобри видимостта на вашата марка.
Направете вашите маси отзивчиви: може никога да не разберете размера на екрана на устройствата на крайните потребители.
Използвайте надписи, за да опишете вашите маси: Надписът описва накратко какво представлява масата.
Използвайте бели интервали, за да разделите вашите маси: Ако няколко таблици следват една след друга, добавете малко празно пространство и ги озаглавете съответно.

Заключение

Вярвам, че сега можете да създадете и стилизирате основна HTML таблица. Може да не сме покрили всичко, тъй като HTML и CSS са широки. Можете да създадете по-малки или по-големи таблици в зависимост от естеството на данните, които искате да заснемете.

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