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

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

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

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

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

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

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

.

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

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

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

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

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

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

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

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

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

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

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

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

Етикет

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

>

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

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

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

атрибут на граничен етикет

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

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

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

По подразбиране рамката се появява с 3D ефект и е черна.

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

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

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

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

). Атрибутът bordercolor не се поддържа от всички браузъри и следователно не се препоръчва. За да зададете цвета на границата, е по-добре да използвате стилове ( вече е в CSS). Атрибутът border не е посочен. Следователно няма граници. Дебелината на рамката на таблицата е 3 пиксела. Клетките имат граници от 1 пиксел! Частично показване на границите Рамката на таблицата и границата около клетките може да се показват частично. Атрибут на таг рамка указва къде да се начертае границата на таблицата. Атрибутът rules указва как да се показват границите на клетката. "500px" рамка="hsides" rules="cols" > Инсталиран хоризонтална граници на масата И се показват граници между колони Подложка отвътре и отвън клетките Когато форматирате таблици в HTML, за визуално представяне на част от информацията и нейното удобно възприемане, може да е необходимо полезна употребаподплата вътре и извън клетките. Вътрешна подложка - от границите на клетките до тяхното съдържание, се задава от атрибута cellpadding на тага . Външни подложки - разстоянието между границите на съседните клетки и разстоянието от границите на клетката до границата на таблицата, се задават от атрибута cellspacing на тага . Целите числа са посочени като стойности на атрибути положителни числа, които определят разстоянието в пиксели. Разстояние от съдържанието на клетката до техните граници е 10 пиксела Разстояние между клетките и от клетките до границата на таблицата е 25 пиксела Сливане на клетки Когато проектирате и форматирате таблици в HTML, често се налага да обединявате съседни клетки. И ако възникне такава необходимост, тогава трябва да използвате атрибутите colspan и rowspan на тага	. Атрибутът colspan указва броя на клетките, които ще бъдат обединени хоризонтално, а атрибутът rowspan указва броя на клетките, които ще бъдат обединени вертикално. И двата атрибута имат смисъл, ако таблицата се състои от множество редове. 1 2 3 4 1 2 3 4 Фон на масата. Фон на клетка на таблица В HTML е възможно да се зададе общ фон за цялата таблица, както и фон за отделно избрана клетка. Атрибут на фонов етикет определя изображението, което ще бъде фоновото изображение на таблицата. Стойността на атрибута указва адреса на файла с изображението - абсолютен или относителен път към файла (). bgcolor таг атрибут задава цвета на фона на таблицата. Цветът може да се зададе по два начина () Използвайки същите атрибути, можете да зададете фоновото изображение и фоновия цвят за всяка клетка от таблицата ( етикет , И . Всеки от тях може да се използва за промяна на някои свойства на един или повече редове от таблицата: това отново е подравняване на съдържанието на клетките в редовете хоризонтално и вертикално - използвайки подравнете атрибутии съответно valign; и задаване на цвета на фона на клетките с помощта на атрибута bgcolor. Когато използвате тези етикети, трябва да сте наясно с няколко нюанса, които определят разликите между тях. Етикети И трябва да се постави преди етикета , непосредствено след отварящия таг на таблицата ). Тъмно розовото е цветът на фона на масата. Фоновото изображение на отделна клетка е небето! Нека си припомним и съществуването на атрибута cols на тага , който казва на браузъра броя на колоните в таблицата. Използването на атрибута cols позволява на браузъра да показва съдържанието на таблицата по-бързо. Редактиране на таблица В този раздел ще разгледаме тагове, които се използват при редактиране на няколко елемента на таблица наведнъж. Тези етикети могат да бъдат разделени на две групи. Първата група включва етикети И . Те са почти идентични и служат за задаване на някои свойства и промяна на характеристиките на една или повече колони на таблицата. Един от тези етикети се поставя непосредствено след маркера . Да кажем, че това е етикет . Използване на атрибута span на таг посочете броя на колоните, към които ще бъдат приложени атрибутите align, valign или width ( подравняване на съдържанието на клетките на колони хоризонтално, вертикално или задаване на ширини на колони). Ако атрибутът span е в тага липсва, тогава характеристиките на една - първата колона на таблицата - ще бъдат променени. Вторият път, когато използвате маркера са зададени свойства за следното ( next - ако атрибутът span липсва) колони на таблици и др. "2" ширина="70px" > 1 2 3 4 5 1 2 3 4 5 Втората група тагове също включва тагове, които са почти идентични един с друг . Низове, поставени в тага са представени в горната част на таблицата, а редовете са оградени в етикета ще се намира в долната част на таблицата. И двата маркера могат да се прилагат само веднъж в една и съща таблица. Етикет може да се използва многократно в рамките на един етикет . "надясно" 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="цвят_на_фон".

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

bgcolor="цвят_на_фон">

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


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

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

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

Трябва да зададем ширината на таблицата, но понякога трябва да променим ширината на таблицата. И ние трябва да го разберем. Как мога да променя ширината на таблицата? Ширината на таблицата може да се променя в пиксели или проценти... Сега ще започнем да променяме ширината на таблицата в html! Последния път направихме таблица с ширина 500 пиксела, с три колони и три реда (помнете за атрибута border="1 - който отговаря за границата)! Ето кода за тази таблица; Сега, за да разберем как да променим ширината на таблица или колона, нека променим и добавим някои числа към нашия код table width="500" – промяна на 599. Тази страница е изградена върху таблици, а ширината на текстовото поле, т.е. където се намират тези думи е 600 пиксела. Ще получим: Нека направим ширината на колона № 2 200 пиксела: Нека направим ширината на колона № 3 299 пиксела: И получаваме този код: Нека погледнем нашата маса Сега нека променим стойността на атрибута width на половина = 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="цвят_на_фон":

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

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

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

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

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

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

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

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

Освен това много често трябва да зададете височина височина и ширина ширина в проценти:

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

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

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

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

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

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

подравняване=”център”- подравнява html текстцентрирани маси

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

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

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

подравняване="център"> подравняване="наляво"> 1x1 подравняване="център">1.2 align="right"> 1x3 подравняване="наляво">2.1 подравняване="център"> 2x2 align="right">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И размах на редовете.

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

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

Стойности colspanИ размах на редоветеможе да приема стойност от 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"cellpacing="10"> 1.1 1.2 2.1 2.2

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

1.1		1.2
2.1	2.2

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

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

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

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

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

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; /*премахване на празните пространства между клетките*/ border: 1px плътно сиво; /*задаване за таблица външна граница сиво 1px дебелина*/ )

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

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

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

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

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

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

Можете да подчертаете външната граница на таблица, като й придадете увеличена ширина:

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

Границите могат да бъдат определени частично:

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

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

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

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

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

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

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

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

Th, td (подложка: 10px 15px;)

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

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

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

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

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

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

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

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

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

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

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

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

...

Таблица №1

Компания	Q1	Q2	Q3	Q4

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

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

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

Синтаксис

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

7. Как да увеличим разстоянието между клетъчните рамки

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

Синтаксис

Таблица (border-collapse: отделно; border-spacing: 10px 20px;) таблица (border-collapse: отделно; border-spacing: 10px;)
Ориз. 4. Пример за таблици с увеличени интервали между клетъчните рамки

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

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

Компания	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

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

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

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

Синтаксис

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

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

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

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

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

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

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

Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; conversion: .3s linear; )/*останалата част от кода е като в примера по-горе*/

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

Th ( тегло на шрифта: нормално; цвят: #039; подложка: 10px 15px; ) td ( цвят: #669; border-top: 1px solid #e8edff; подложка: 10px 15px; ) tr:hover td (фон: #e8edff ;)

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

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

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

3. Стил „в кутия“.

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

Th (размер на шрифта: 13px; тегло на шрифта: нормален; фон: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; цвят: #039; padding: 8px; ) td (фон : #e8edff; border-bottom: 1px solid #fff; 1px solid transparent;

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

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

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

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

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

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

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

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

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

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

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

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

Png") 98% 86% без повторение; ) th ( тегло на шрифта: нормално; размер на шрифта: 14px; цвят: #339; подложка: 10px 12px; фон: бял; ) td ( цвят: #669; граница- отгоре: 1px плътно бяло; фон: rgba(51, 51, 153, .2); tr:hover 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; )

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

 

---

Прочети:
Отчитане на разчети с бюджета Чийзкейкове от извара на тиган - класически рецепти за пухкави чийзкейкове Чийзкейкове от 500 г извара Салата Черна перла със сини сливи Салата Черна перла със сини сливи Рецепти за лечо с доматено пюре Афоризми и цитати за самоубийство