Въведение в CSS стайлинг на таблици

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

CSS таблиците са доста прости за разбиране и използване. Въпрос е само да запомните съответните стойности на свойствата на дисплея на CSS за основните елементи на HTML таблицата. С помощта на CSS ние сме способни да направим няколко стилни маси.

Какво представлява CSS таблицата за стайлинг?

Таблица CSS (Cascading Style Sheets) описва как да разположите набор от елементи в редове и колони. CSS по подразбиране, приложен към HTML таблица, е CSS таблица.

  • CSS има проектирана и препроектирана гъвкавост.
  • Това означава, че базираното на CSS оформление гарантира, че поставяте всичките си стилове (т.е. от малки промени до основните правила) на едно място.
  • Променяйки правилата за оформление, които задавате в този стилов лист, и вие засягате всяка страница, която се отнася до него.
  • CSS базираната подредба на страниците обикновено ще се появява по-бързо на екрана и дори изтеглянето ще бъде по-бързо от оформлението на базата на таблицата.

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

По-долу са различните свойства на стиловете на таблицата CSS:

1. Граничен срив

Използва се за посочване дали границите около клетките на таблицата трябва да бъдат разделени или свити.

Синтаксис: border-collapse: separate|collapse|initial|inherit;

  • Срив на границата: отделно: Използва се така, че съседните клетки да имат свои собствени и независими граници, които не се споделят.

Синтаксис

border-collapse: separate;

Стойността по подразбиране, която е зададена на свойството border-колапт, е отделна. Когато са разделени, браузърите поставят интервал от няколко пиксела между всяка клетка, като използват свойството за разделяне на границите.

код

изход:

  • Срив на границата: колапс: всеки път, когато зададем свойството border-срив да го срине, той премахва пространството между клетките.

Синтаксис

border-collapse: collapse;

код

Резултат:

Дори ако елиминирате това пространство, като зададете атрибута на клетките за етикет HTML на 0, браузърите все още показват двойни граници. Тоест долната граница на една клетка ще се появи над горната граница на клетката отдолу, което ще доведе до удвояване на граничните линии. Задаването на свойството за граничен срив да се срива елиминира както пространството между клетките, така и удвояването на граничните линии.

  • Срив на границата: първоначален: Използва се за задаване на свойството за граничен срив по подразбиране.
  • Срив на границата: наследяване: Използва се, когато свойството за граничен срив наследява от своите родителски елементи. Това свойство работи само когато се прилага към a маркер.

    Стойности: свиване, отделяне, начално, наследяване;

    2. Гранично разстояние

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

    атрибут, освен че има незадължителна втора стойност. Това свойство работи само когато се прилага към a
    маркер.

    Синтаксис

    border-spacing: Length|initial|inherit;

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

    код

    изход:

    В този случай, ако са посочени две стойности, първата стойност определя хоризонталното разстояние между клетките (пространството от двете страни на всяка клетка), а второто определя вертикалното разстояние между клетките. (пространството, отделящо дъното на една клетка от горната част на тази под нея).

    3. От надписа

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

    Синтаксис

    caption-side: top|bottom|initial|inherit;

    Това свойство може да има една от четирите стойности:

    • От надписа: отгоре: Това е стойността по подразбиране. В това тя поставя надписа над таблицата.

    Синтаксис: caption-side:top;

    код

    изход:

    • От надписа: долу: поставя надписа под таблицата.

    Синтаксис: страна на caption-side:bottom;

    код

    изход:

    • От надписа: начална: Използва се за задаване на свойството по подразбиране.
    • Надпис от страна: наследяване: Наследява това свойство от неговия родителски елемент.

    Стойности: отгоре, отдолу, първоначално, наследяване;

    4. Празни клетки

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

    Синтаксис: empty-cells: show|hide|initial|inherit;

    Това свойство може да има една от четирите стойности:

    • Празна клетка: показване: Това свойство се използва за показване на границите на празната клетка.

    Синтаксис: empty-cells: show;

    код

    изход:

    • Празна клетка: скриване: Това свойство се използва за скриване на границите в празната клетка.

    Синтаксис: empty-cells: hide;

    код

    изход:

    • Празна клетка: начална : Използва се за задаване на свойството по подразбиране.
    • Празна клетка: наследява: Наследява това свойство от своя родителски елемент.

    Стойности: показване, скриване, начално, наследяване;

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

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

    Синтаксис: table-layout: auto|fixed|initial|inherit;

    Свойството по подразбиране е автоматично.

    1. Оформление на таблицата: auto: Автоматично кара ширината на елементите да се регулира автоматично, за да отговарят на съдържанието.

    2. Таблица - оформление: фиксирана : Фиксираната настройка принуждава браузъра да направи всички колони същата ширина като колоните в първия ред. Ако съдържанието е по-широко от първия ред, то ще бъде обвито, отрязано или разширено извън клетките.

    код

    изход:

    3. Оформление на таблицата: първоначално: Използва се за задаване на свойството по подразбиране.

    4. Оформление на таблицата: наследява: Наследява това свойство от неговия родителски елемент.

    заключение

    С помощта на CSS можем да направим стилни маси и да подобрим външния вид на таблицата.

    Препоръчителни статии

    Това е ръководство за CSS стайлинг на таблици. Тук обсъждаме свойствата с кодове, изходи и синтаксис на CSS таблица Styling. Можете също да прегледате нашите статии, за да научите повече -

    1. Предимства на CSS
    2. Използване на CSS
    3. Въведение в CSS
    4. CSS форматиране на текст

    Категория:

    Инструменти за уеб разработка