✅ HTML5 - Разширени стилове за таблици

Съдържание

В рамките на новите спецификации на HTML5 Y CSS Има няколко стила, които могат да бъдат приложени към таблици, за да дефинираме и приспособим поведението им към това, което имаме като концепция в ума си, за да направим нашите страници или документи, елементите, които можем да променим, са ръбовете на таблиците, обработка на празни клетки, включително подреждането на една и съща маса.
срутване на границата
Указва как се обработват граници в съседни клетки, стойностите, които това свойство може да приеме са: колапс Y отделни.
С това свойство можем да контролираме поведението на начина, по който браузърът очертава границите, нека видим това изображение на начина, по който браузърът се справя с него по подразбиране:

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

 Пример 
 Резултати от проучването на плодовете през 2011 г. 

 
 Ранг Ям Цвят  Размер и гласове 

 

 

 
 Любими: Ябълки Зелено  Средно 500 

 
 2 -ри фаворит: Портокали Оранжево  Голям 450 

 

 
  Предприятия за данни за плодове

Ранг	Ям	Цвят	Размер и гласове
Любими:	Ябълки	Зелено	Средно	500
2 -ри фаворит:	Портокали	Оранжево	Голям	450
Предприятия за данни за плодове

Нека да видим какво генерира този код в браузъра, преди да продължим с обяснението:

Стойността на сгъване, която поставяме в свойството за сгъване на границата, ни казва, че не искаме да се чертае граница на всеки съседен елемент, което създава ефекта, който видяхме в предишното изображение.
Задаване на отделни ръбове
Ако вместо да използвате колапс използваме отделната стойност по подразбиране на свойство за сгъване на границата, можем да използваме допълнителни свойства като разстояние между границите За да определим пространството между границите на съседни елементи, нека видим примера:

 Пример 
 Резултати от проучването на плодовете през 2011 г. 

 
 Ранг Ям Цвят  Размер и гласове 

 

 

 
 Любими: Ябълки Зелено  Средно 500 

 
 2 -ри фаворит: Портокали Оранжево   

 

 
 Предприятия за данни за плодове

Ранг	Ям	Цвят	Размер и гласове
Любими:	Ябълки	Зелено	Средно	500
2 -ри фаворит:	Портокали	Оранжево
Предприятия за данни за плодове

В този пример ние просто уточняваме, че границата ще има пространство от 10 пиксела за съседните елементи, нека видим примера за това как това се превежда на браузъра:

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

Нека да видим как изглежда това в браузъра:

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