Ако зададете ширината на таблицата с атрибута. Поведение на празни клетки

създава низ и етикет :

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

Заглавка на таблицата

1-ва клетка 1-ви ред	2-ра клетка 1-ви ред
1-ва клетка от 2-ри ред	2-ра клетка от 2-ри ред

Подравняване на таблицата. Подравняване на съдържанието на клетките

Атрибутът align на маркера се използва за подравняване на таблицата

.

Използвайки атрибута align, можете да поставите таблицата в лявата или дясната част (align = "left" и align = "right") част на прозореца на браузъра ( родителски елемент) или в центъра му (подравняване = "център").

Подравняване на съдържанието на редовете ( етикет

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

Стойностите за височина и ширина са посочени в пиксели или като процент от свободното пространство. За да зададете стойности:

Посочено е положително цяло число. В този случай размерът ще бъде зададен в пиксели;

Посочено е положително цяло число, последвано от символ %.

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

) хоризонтално и определяне на местоположението му - над или под таблицата.

По подразбиране съдържанието на клетката е подравнено вляво хоризонтално и вертикално в средата.

Височина и ширина на таблицата и клетките

Размерите по подразбиране ( височина и ширина) както таблиците, така и клетките се променят в зависимост от размера на съдържанието им.

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

етикет

) хоризонтално също се прави с помощта на атрибута align, а вертикално с помощта на атрибута valign: Атрибутът align приема стойностите ляво, дясно, център и justify, които задават подравняването на съдържанието на редове и клетки съответно вляво, вдясно, център и ширина; Атрибутът valign, който приема стойностите отгоре, отдолу и от средата, задава подравняването на съдържанието на редовете и клетките съответно към горната, долната и средата им. Атрибутът align служи и за подравняване на заглавието ( етикет

>

Както можете да видите от примера: като зададете ширината на една от клетките на колоната, по този начин задавате ширината на цялата колона; и като зададете височината на една от клетките в ред, задавате височината на целия ред.

Граници на таблица и клетки

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

Атрибутът граница на маркера

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

Дебелина на границата ( или рамка) се задава в пиксели. Стойността на атрибута border е цяло положително число. Ако атрибутът border е посочен без стойност, дебелината на границата е 1 пиксел.

Дебелината на границата е зададена само за масата. Ширината на границата около клетките винаги е 1 пиксел ( или липсва).

По подразбиране границата се изобразява в 3D и е черна.

Атрибутът bordercolor задава цвета на границата и премахва 3D ефекта. Атрибутът може да се използва за задаване на цвета на границата на таблицата ( етикет

), линии ( етикет ) или клетки ( етикет - ред на html таблица
- колона (клетка) на html таблицата.

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

Много е лесно да се направи такава html таблица. Първо, нека поставим етикетите на самата таблица, вътре в която поставяме необходимия брой редове (в нашия пример 2 реда):

). Атрибутът bordercolor не се поддържа от всички браузъри и следователно не се препоръчва. За да зададете цвета на границата, по-добре е да използвате стиловете ( вече е в CSS). Атрибутът граница не е посочен. Следователно няма граници. Границата на таблицата е с дебелина 3 пиксела. Клетките имат граници от 1 пиксел! Частично показване на граници Границата на таблицата и рамката около клетките могат да бъдат показани частично. Атрибут на рамката на маркера указва къде да се начертае границата на таблицата. Атрибутът правила определя как да се показват границите на клетките. "500px" рамка ="hsides" rules = "cols"> Инсталиран хоризонтален граници на таблицата И показани граници между високоговорители Отстъпи вътре и извън клетките Когато форматирате таблици в HTML, може да бъде полезно да използвате отстъпи вътре и извън клетките, за да визуализирате някаква информация и да я улесните за четене. Вътрешно подреждане - от границите на клетките до тяхното съдържание, зададено от атрибута cellpadding на маркера . Външно запълване - разстоянието между границите на съседните клетки и разстоянието от границите на клетките до границата на таблицата, зададено от атрибута за клетките на етикета . Стойностите на атрибута са положителни цели числа, които определят разстоянието в пиксели. Разстояние от съдържанието на клетката до техните граници е 10 пиксела Разстояние между клетките и от клетките до границата на таблицата е 25 пиксела Сливане на клетки Когато оформяте и форматирате таблици в HTML, често е необходимо да се комбинират съседни клетки. И ако възникне такава нужда, тогава трябва да използвате атрибутите colspan и rowspan на маркера	. Атрибутът colspan определя броя на клетките, които трябва да бъдат обединени хоризонтално, а атрибутът rowspan определя броя клетки, които да бъдат вертикално обединени. И двата атрибута са смислени, ако таблицата има няколко реда. 1 2 3 4 1 2 3 4 Фон на масата. Фон на клетките на таблицата В HTML е възможно да се зададе общ фон за цялата таблица, както и фон за отделно избрана клетка. Фонов атрибут на маркера определя изображението, което ще бъде фоновото изображение на таблицата. Стойността на атрибута е адресът на файла с изображението - абсолютният или относителен път към файла (). Атрибут на маркера Bgcolor задава цвета на фона на таблицата. Цветът може да се настрои по два начина () Използвайки същите атрибути, задайте фоновото изображение и цвета на фона за всяка клетка в таблицата ( етикет , и . Всеки от тях може да се използва за промяна на някои свойства на един или повече редове в таблицата: това отново е подравняването на съдържанието на клетките в редовете хоризонтално и вертикално, като се използват съответно атрибутите align и valign; и задаване на цвета на фона на клетките с помощта на атрибута bgcolor. Има няколко нюанса, които трябва да знаете, когато използвате тези тагове, които определят разликите между тях. Етикети и трябва да се постави преди етикета , непосредствено след отварящия етикет на таблицата ). Тъмно розовият цвят е фоновият цвят на масата. Фоновото изображение на отделна клетка е небето! Припомнете си и за съществуването на атрибута cols на етикета което казва на браузъра броя на колоните в таблицата. Използването на атрибута cols позволява на браузъра да показва по-бързо съдържанието на таблицата. Редактиране на таблица В този раздел ще разгледаме таговете, които се използват при редактиране на няколко елемента на таблица наведнъж. Тези етикети могат да бъдат разделени на две групи. Първата група включва етикети и ... Те са почти идентични и служат за задаване на някои свойства и промяна на характеристиките на една или повече колони на таблицата. Един от тези тагове се поставя непосредствено след етикета ... Да кажем, че това е маркер . Използване на атрибута span на маркера посочете броя на колоните, към които ще бъдат приложени атрибутите align, valign или width ( подравняване на съдържанието на клетките на колоните хоризонтално, вертикално или задаване на ширината на колоните). Ако атрибутът span в маркера липсва, тогава характеристиките на една - първата колона на таблицата ще бъдат променени. При второто използване на етикета свойствата са зададени за следното ( следващ - ако липсва атрибутът span) колони на таблицата и др. "2" ширина ="70px"> 1 2 3 4 5 1 2 3 4 5 Втората група тагове също включва тагове, които са почти идентични един с друг. ... Струни, увити в етикет са представени в горната част на таблицата, а редовете са включени в етикета ще се намира в долната част на таблицата. И двата маркера могат да бъдат приложени само веднъж в рамките на една и съща таблица. етикет може да се използва няколко пъти в етикет . "right" bgcolor = "# 00FF33"> 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 1. Какво представляват HTML таблиците и защо са необходими? html таблици- това е един от най-основните компоненти на всяка html страница и съответно на всеки сайт. Например в сайта, целият сайт се състои от таблици: снимки, текстове, връзки, регистрационни формуляри - всичко е поставено една спрямо друга с помощта на html таблици (всъщност целият сайт също е разположен в една голяма таблица). 2. Какви са таговете за html таблици? Етикетипосочването на html таблицата се записват така: Но тъй като знаем, всички таблици се състоят от редове и колони (клетки), така че трябва да зададете тагове и за тях:

След това разделяме всеки ред на клетки с помощта на етикети на колони:

- клетка 1.1
- клетка 1.2
- клетка 1.3


- клетка 2.1
- клетка 2.2
- клетка 2.3

Всъщност първата цифра в етикетите е номерът на реда, а втората е номерът на клетката (1x2 е първият ред, втората клетка и т.н.).

3. Как да настроите цвета на фона на html таблиците?

Сега нека да разберем как фонът на таблицата или всяка клетка е зададен отделно.

Така че, за да зададете фона, се използва атрибутът bgcolor = "background_color".

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

bgcolor = "background_color">

- клетка 1.1
- клетка 1.2
- клетка 1.3


- клетка 2.1
- клетка 2.2
- клетка 2.3

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

Ако е необходимо задайте цвета на фона на ред html таблица, след това атрибута bgcolor = "background_color"приложи към етикета

Трябва да зададем ширината на таблицата, но понякога трябва да променим ширината на таблицата. И ние трябва да го разберем. как да промените ширината на таблицата. Ширината на таблицата може да се променя в пиксели или като процент ... Сега ще се заемем с промяната на ширината на таблицата в html! Последния път направихме таблица с ширина 500 пиксела, с три колони и три реда! (Запомнете границата = "1 атрибут - който отговаря за границата) Ето кода за тази таблица; Сега, за да разберем как да променим ширината на таблица или колона, ще променим и добавим някои числа към нашия код ширина на таблицата = "500" - променете на 599. Тази страница е изградена върху таблици, а ширината на текстовото поле, т.е. където се намират тези думи е равно на 600 пиксела. ще получим: Ширината на колона № 2 ще бъде 200 пиксела: Ширината на колона #3 ще бъде 299 пиксела: И получаваме следния код: Гледаме нашата маса Сега нека променим стойността на атрибута ширина на половината = 50%. Гледаме нашата таблица, която е 50%. Това е всичко, което исках да ви кажа как да промените ширината на масата. Сега да преминем към височината на масата! информира браузъра за попълването на таблицата. Всяка таблица се състои от колони и редове. етикет
клетка в ред. Съответно, колкото клетки са включени в един ред, толкова колони ще има в таблицата. етикет	също създава клетка. Разликата му от етикета	в това клетката, създадена от маркера	е клетка - заглавие: съдържанието му е центрирано и ако е текст, браузърът го показва с удебелен шрифт. Съдържание на клетката, създадена от маркера	по подразбиране се намира в лявата му част. етикет

bgcolor = "# FFFF00"> bgcolor = "# 0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

В този случай атрибутът мобилен номер задава текста вътре в етикета на бял.

По същия начин се задава и цвят на всяка клетка поотделно... Например, ако трябва да промените цвета на клетка 1.2 на син, тогава вътре в отварящия маркер атрибут bgcolor = "background_color":

4. Как да задам размера на ширината и височината на клетките на html таблицата?

Така че, за да зададете ръчно ширината и височината на клетките, използвайте атрибутите за височина и ширина. Могат да се задават за цялата таблица, за един ред, за клетка (колона). Височината и ширината могат да бъдат зададени в пиксели или като процент. В нашия случай ще зададем ширината и височината в пиксели за колоните (клетките).

височина- атрибут, който задава височината на клетката

ширина- атрибут, който задава ширината на клетката

А сега с пример:

Сега ще обясня защо задаваме височината на клетките само веднъж на ред.

Ако в един ред посочите по-висока височина за която и да е клетка, отколкото за други, тогава, въпреки това, всички клетки (колони) на вашия ред ще станат равни по височина на най-голямата. А ширината на всеки ред е най-добре да се задава отделно!

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

Също така много често трябва да зададете височината и ширината. в проценти:

клетъчно съдържание

Ако зададем ширината на клетката на 40 процента, както в нашия пример, това означава, че ни остават 60 процента за останалите клетки, т.е. сумата от техните ширини не трябва да надвишава 60 процента. Много е просто: общо имаме само 100%. Ние считаме: 100 - 40 = 60.

5. Как да подравните текста в html таблицата?

Сега нека разберем как да подравним текста в нашата html таблица отляво, отдясно и в центъра.

Това се прави с помощта на атрибута:

подравняване = "ляво"- подравнява текста в html таблицата вляво

подравняване = "център"- подравнява текста на html таблицата в центъра

подравняване = "вдясно"- подравнява текста в html таблицата вдясно

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

Например, html кодът на таблица, чийто текст е центриран, изглежда така:

подравняване = "център"> подравняване = "ляво"> 1x1 подравняване = "център">1.2 подравняване = "вдясно"> 1x3 подравняване = "ляво">2.1 подравняване = "център"> 2x2 подравняване = "вдясно">2.3

Чрез изписване на атрибута подравняване = "център"при отваряне

, подравнихме html таблицата в центъра на страницата на браузъра.

Това е резултатът, който получавате в браузъра:

1x1	1.2	1x3
2.1	2x2	2.3

Сега нека разгледаме пример как да подравните текста в html таблица отгоре или отдолу, тоест как да се уверите, че съдържанието на клетка не е разположено точно в средата й (както по подразбиране), но също и отгоре или отдолу.

Вертикалното подравняване се определя от атрибута:

valign = "отгоре"- съдържанието ще бъде позиционирано в горната част на клетката

valign = "среда"- съдържанието ще бъде центрирано в клетката

valign = "отдолу"- съдържанието ще се намира в долната част на клетката

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

valign = "отгоре"> 1x1 1.2 valign = "отгоре"> 1x3 valign = "отдолу">2.1 2x2 valign = "отдолу">2.3

Това получаваме, ако погледнем резултата от работата на атрибутите в браузъра. подравнетеи valign:

1x1	1.2	1x3
2.1	2x2	2.3

6. Как да комбинирам клетки и колони на html таблица?

В тази част от нашата статия ще говорим за атрибутите colspanи rowspan.

colspan- определя броя на колоните, за които се прилага тази клетка

rowspan- определя броя на редовете, за които се прилага тази клетка

Стойностите colspanи rowspanможе да приеме стойност от 2 или повече, т.е. една клетка може да бъде разтеглена в две или повече колони (редове).

И така, сега, използвайки примера, ще разтегнем клетка 1x1 на две колони (клетки). За да направим това, ще използваме атрибута colspan = "2", като го присвоим на клетката 1x1. Кодът ще изглежда така:

Както можете да видите, клетка 1x1 се простира по дължината на две клетки. Съответно дължината му е равна на сумираната дължина на тези две клетки (160 пиксела). Не сме задали атрибута ширина за клетката 1x1, но ако решим да направим това, тогава ще зададем ширината равна на 160 пиксела. И също така, имайте предвид, че в нашия пример няма клетка 1x3, т.е. има само две клетки в първия ред, защо - вече обсъдихме това - клетка 1x1 е равна на две клетки, благодарение на атрибута colspan.

С атрибутите colspan и rowspan трябва да се работи много внимателно. Грешка може да накара вашия сайт да "отиде".

Сега, когато се справихме с параметъра colspan, нека се справим с параметъра rowspan. Тук принципът на действие е същият:

colspan = "2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

Така се научихме как да комбинираме клетки в редове и колони на html таблици.

7. Как да премахнете, добавите или промените отстъпи и как да зададете граница за html таблица?

И така, по-рано създадохме html таблица, между клетките на която са ясно видими отстъпи. За да ги направим още по-добре видими, нека добавим рамка за нашата таблица. Това се прави с помощта на атрибути:

border = "ширина на границата в пиксели"- задава ширината на рамката

bordercolor = "цвят на границата"- задава цвета на рамката

Например, нека направим нашата html таблица с черна рамка с ширина 1 пиксел.

За това, етикетът

добавяне на атрибути:

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

cellpacing = "ширина на допълване в пиксели"- отстъп между клетките

cellpadding = "ширина на допълване в пиксели"- отстъп вътре в клетката (от ръба на клетката до текст, изображения, връзки ...)

Например, нека да направим отстъп от 10 пиксела между клетките и да увеличим отстъпа от ръба на клетката до текста до 20 пиксела. Това се прави по следния начин:

cellpadding = "20"клетки интервал = "10"> 1.1 1.2 2.1 2.2

Ако погледнем резултата в браузър, можем ясно да видим, че разстоянието между клетките ( разстояние между клетките) на нашата html таблица се е увеличил до 10 пиксела, а разстоянието между текста и вътрешния ръб на клетката се е увеличило с 20 пиксела.

1.1		1.2
2.1	2.2

Ако трябва да премахнете изцяло вдлъбнатината, просто казано cellpadding = "0"и разстояние между клетките = "0".

8. Как да вмъкна една html таблица в друга?

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

Например в клетка 1.2 ще вмъкнем нова таблица, състояща се от един ред и две колони. Във вътрешната html таблица ще зададем 2px червена граница и 0px разстояние между клетките. Също така ще поставим вътрешната маса в горната част на клетката.

Това се прави много просто:

1.1 3.1 3.2 2.1 2.2

Ето какво се случи в резултат на новите трансформации на нашата таблица (червени клетки - вътрешна таблица, разположена вътре в голяма таблица):

1.1		3.1 3.2
2.1	2.2

На този етап ще завършим тази статия. Мисля, че се оказа успешен и не е труден за разбиране и се надявам да нямате повече проблеми с таблиците.

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

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

Форматиране на таблици

1. Граница на границите на таблицата

Таблицата и клетките в нея се показват по подразбиране в браузъра без видими граници. Граници на таблицатазададено от свойството border:

Таблица (border-collapse: collapse; / * премахване на празни пространства между клетките * / граница: 1px плътно сиво; / * задайте външна граница от 1px сива за таблицата * /)

Граници на заглавни клеткина всяка колона са зададени за ти елемент:

Th (граница: 1px плътно сиво;)

Граници на клеткитетелата на таблицата са зададени за елемента td:

Td (граница: 1px плътно сиво;)

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

Th, td (граница: 1px плътно сиво;)

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

Таблица (граница: 3px плътно сиво;)

Границите могат да се задават частично:

/ * задайте 3px сива външна граница за таблицата * / таблица (граница отгоре: 3px плътно сиво;) / * задайте 1px сива рамка за клетката на тялото на таблицата * / td (граница отдолу: 1px плътно сива;)

Можете да прочетете повече за граничния имот.

2. Как да настроите ширината и височината на масата

По подразбиране ширина и височина на масатасе определя от съдържанието на клетките му. Ако ширината не е посочена, тя ще бъде равна на ширината на най-широкия ред (линия).

Ширина на таблицата и колонатазадайте с помощта на свойството ширина. Ако таблица (ширина: 100%;) е посочена за таблица, тогава ширината на таблицата ще бъде равна на ширината на блока контейнер, в който се намира.

Ширината на таблицата и колоните обикновено се посочва в px или%, например:

Таблица (ширина: 600px;) th (ширина: 20%;) td: първо дете (ширина: 30%;)

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

Th, td (допълване: 10px 15px;)

3. Как да настроите фона на масата

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

4. Колони на таблицата

Моделът на CSS таблицата е фокусиран основно върху низове (редове), формирани с помощта на тага

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

използвайки етикета

Можете да зададете фон за произволен брой колони;

като използвате таблицата td: first-child, table td: last-child селектор, можете да стилизирате първата или последната колона на таблицата (с изключение на първата клетка на заглавката на таблицата);

като използвате селектора на таблица td: nth-child (правило за избор на колони), можете да стилизирате всякакви колони в таблицата.

Можете да прочетете повече за CSS селекторите.

5. Как да добавите заглавие към таблицата

Можете да добавите заглавие към таблица с помощта на тага , и като се използва свойството caption-side, може да се постави пред или под масата. Свойството text-align се използва за хоризонтално подравняване на текста на заглавието. По наследство.

...

Таблица No1

Търговско дружество	Q1	Q2	Q3	Q4

надпис (страна на надписа: отдолу; подравняване на текста: вдясно; допълване: 10px 0; размер на шрифта: 14px;) Ориз. 2. Пример за показване на заглавката под таблицата

6. Как да премахнете празнината между клетъчните рамки

По подразбиране границите на клетките на таблицата са разделени с малко интервал. Ако зададем border-collapse: collapse за таблицата, тогава празнината ще бъде премахната. Имотът се предава по наследство.

Синтаксис

Таблица (граница-свиване: свиване;)
Ориз. 3. Пример за таблици със сливащи се и разделени граници на клетки

7. Как да увеличим пространството между границите на клетките

Използвайки свойството border-spacing, можете да промените разстоянието между границите на клетките. Това свойство се отнася за таблицата като цяло. По наследство.

Синтаксис

Таблица (свиване на граница: отделно; разстояние между границите: 10px 20px;) таблица (свиване на граница: отделно; разстояние между границите: 10px;)
Ориз. 4. Пример за таблици с увеличени празнини между рамки на клетките

8. Как да скриете празни клетки на таблицата

Свойството за празни клетки скрива или показва празни клетки. Засяга само клетки, които не съдържат никакво съдържание. Ако е посочен фон за клетка и таблица (border-collapse: collapse;) е посочена за таблица, тогава клетката няма да бъде скрита. По наследство.

Търговско дружество	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

таблица (граница: 1px плътно # 69c; граница-свиване: отделно; празни клетки: скрий;) th, td (граница: 2px плътно # 69c;) Ориз. 5. Пример за скриване на празна клетка на таблица

9. Оформление на оформлението на таблицата с помощта на свойството table-layout

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

Синтаксис

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

10. Най-добро оформление на таблицата

1. Хоризонтален минимализъм

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

Служител	Заплата	Бонус	Ръководител
Стивън С. Кокс	$300	$50	Боб
Жозефин тен	$150	-	Ани
Джойс Минг	$200	$35	Анди
Джеймс А. Пентел	$175	$25	Ани

таблица (семейство шрифтове: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; размер на шрифта: 14px; фон: бял; максимална ширина: 70%; ширина: 70%; граница-свиване: свиване; текст -align: left;) th (тегло на шрифта: нормално; цвят: # 039; border-bottom: 2px плътно # 6678b1; padding: 10px 8px;) td (цвят: # 669; padding: 9px 8px; преход: .3s linear;) tr: задръжте курсора на мишката td (цвят: # 6699ff;)

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

Td (граница-отдолу: 1px плътно #ccc; цвят: # 669; допълване: 9px 8px; преход: .3s линеен;) / * останалата част от кода е както в примера по-горе * /

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

Th (тегло на шрифта: нормално; цвят: # 039; допълване: 10px 15px;) td (цвят: # 669; граница отгоре: 1px плътен # e8edff; padding: 10px 15px;) tr: задържане на курсора td (фон: # e8edff ;)

2. Вертикален минимализъм

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

Th (тегло на шрифта: нормално; дъно на границата: 2px плътно # 6678b1; граница вдясно: 30 пиксела плътно #fff; граница вляво: 30 пиксела плътно #fff; цвят: # 039; подложка: 8px 2px;) td (border- вдясно: 30px плътно #fff; граница вляво: 30px плътна #fff; цвят: # 669; подложка: 12px 2px;)

3. Стил "кутия".

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

Th (размер на шрифта: 13px; font-weight: нормален; фон: # b9c9fe; border-top: 4px плътен #aabcfe; border-bottom: 1px плътен #fff; цвят: # 039; padding: 8px;) td (фон : # e8edff; border-bottom: 1px плътен #fff; цвят: # 669; border-top: 1px плътен прозрачен; padding: 8px;) tr: задръжте курсора на мишката td (фон: #ccddff;)

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

Таблица (семейство шрифтове: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; размер на шрифта: 14px; максимална ширина: 70%; ширина: 70%; подравняване на текста: център; граница-свиване: свиване ; border-top: 7px плътен # 9baff1; border-bottom: 7px плътен # 9baff1;) th (размер на шрифта: 13px; font-weight: нормален; фон: # e8edff; border-right: 1px плътен # 9baff1; border- ляв: 1px плътен # 9baff1; цвят: # 039; подложка: 8px;) td (фон: # e8edff; граница вдясно: 1px плътна #aabcfe; граница вляво: 1px плътно #aabcfe; цвят: # 669; подложка: 8px ;)

4. Хоризонтална зебра

Масата Zebra изглежда доста привлекателна и удобна. Допълнителният цвят на фона може да служи като визуална подсказка за хората да четат таблицата.

Th (тегло на шрифта: нормално; цвят: # 039; padding: 10px 15px;) td (цвят: # 669; border-top: 1px плътен # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( фон: # e8edff;)

5. Вестник стил

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

Таблица (граница: 1px плътен # 69c;) th (тегло на шрифта: нормален; цвят: # 039; граница на дъното: 1px пунктирана # 69c; допълване: 12px 17px;) td (цвят: # 669; допълване: 7px 17px; ) tr: задръжте курсора на мишката td (фон: #ccddff;)

Таблица (граница: 1px плътен # 69c;) th (тегло на шрифта: нормален; цвят: # 039; допълване: 10px;) td (цвят: # 669; граница отгоре: 1px пунктирана #fff; допълване: 10px; фон: #ccddff;) tr: задръжте курсора на мишката td (фон: # 99bcff;)

Таблица (граница: 1px плътно # 6cf;) th (тегло на шрифта: нормално; размер на шрифта: 13px; цвят: # 039; текстова трансформация: главни букви; граница вдясно: 1px плътно # 0865c2; граница отгоре: 1px плътен # 0865c2; border-left: 1px плътно # 0865c2; border-bottom: 1px плътно #fff; padding: 20px;) td (цвят: # 669; граница вдясно: 1px пунктирана # 6cf; padding: 10px 20px;)

6. Фон на масата

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

Png ") 98% 86% без повторение;) th (тегло на шрифта: нормално; размер на шрифта: 14px; цвят: # 339; подложка: 10px 12px; фон: бял;) td (цвят: # 669; граница- отгоре: 1px плътно бяло; запълване: 10px 12px; фон: rgba (51, 51, 153, .2); преход: .3s;) tr: задръжте курсора на мишката td (фон: rgba (51, 51, 153, .1); )

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

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

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

За да посочите ширината на таблицата, трябва да използвате свойството CSS ширина, и за да зададете височината, трябва да приложите свойството височина.

В пример изглежда така.

Таблица (ширина: 500px; височина: 100px;)

Резултат в браузъра:

Пълен код:

Таблица с размери

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Стойностите на ширината и височината на таблицата могат да бъдат посочени като абсолютна стойност (в пиксели), а относителна стойност - в проценти. Например 20px и 20% съответно.

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

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

Ширина: автоматично;

Височина: авто;

Бихме искали да насочим вниманието ви към още един важен момент. По-добре е да не посочвате височината като процент, тъй като по правило в този случай те няма да работят.

Посочване на размерите на отделните клетки и колони

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

Преоразмеряването на клетките се извършва с помощта на същите CSS свойства като размерите на таблицата, а именно: ширинаи височина.

За да добавите стилове към клетки, можете да използвате една от двете опции:

1. Задайте имена на отделни класове на клетки. Ще изглежда така: class = "cell-50px"

   И след това трябва да приложите стиловете за тези класове.

2. Извикване на атрибут стил, вътре в който да напишете необходимия CSS-код.

На практика вторият вариант ще изглежда така:

...

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

Таблица с размери

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Резултат в браузъра:

Как да промените размера на шрифта в таблица

Често има нужда от промяна на размера на текста в таблицата. Например в заглавните клетки. Това може да стане с помощта на свойството CSS размер на шрифта... Нека зададем размера на шрифта за елементите :

Th (размер на шрифта: 30px;)

Това завършва този урок. Предлагам ви да помислите внимателно за домашната си работа. Проучете го толкова внимателно и спекулирайте. Всичко най-хубаво!

 

---

Прочети:
Тайните на нумерологията: как да разберете датата на смъртта Звездата на Русия защити свещеното значение на старославянския символ Runa Hyera - основното значение и тълкуване Какво означава името Елизабет, характер и съдба Тълкуване на сънищата на мадам Хасе: тълкуване на сънища по числа