Дизајн на табела HTML со CSS - SELFHTML-Вики

Информации за овој текст

html

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

Ова поглавје ви покажува како можете да користите CSS3 за да ги направите табелите попривлечни и истовремено полесни за читање.

Содржина

  • 1 Основни поставки на CSS
    • 1,1 рамки и граници
    • 1.2 Заглавија
    • 1.3 полиња
  • 2 Пример за поддршка на прелистувачот
    • 2.1 Групи на колони низ клетките
    • 2.2 Заглавие на табелата
    • 2.3 Основни информации за CSS
    • 2.4 Дизајн на заглавие и ќелии на податоци
    • 2,5 премин на зебра
    • 2.6 Заглавија на линиите
    • 2.7 Дизајнирај го насловот
    • 2.8 Означување на линиите во: лебди
  • 3 Пример сојузни држави сиво на сиво
  • 4 веб-врски

Основни поставки на CSS [уреди]

Рамки и граници [уреди]

Обично, SELFHTML препорачува да бидете претпазливи за промена на стандардните поставки на прелистувачот. Табелите се исклучок од ова, бидејќи во стандардниот приказ секоја табеларна ќелија и самата табела имаат гранична линија и надворешна граница, што им дава на табелите „технички“ изглед:

Со пад на границата: колапс ова може да се промени така што табелата се прикажува во „нормална“ мрежа.

Заглавија [уреди]

Во табела, та-ќелиите ги формираат насловите за одделни колони или редови, елементот за наслов претставува натпис за табелата. Нормално, (т.е. во стандардниот лист на стилови) заглавјата на табелата се прикажани со задебелен фонт, насловот е прикажан освен Сместена маса. Ова може да се смени со CSS:

Полиња [уреди]

Повеќето табели содржат серии на броеви.

Тука е важно јасно да се порамнат броевите и соодветно да се обележат збировите.

Пример за поддршка на прелистувачот [уреди]

За наш пример, ние користиме табела што ги покажува пазарните удели на одделните прелистувачи во Германија.

Во табелата се додадени елемент tbody, thead и tfoot (прелистувачот може да генерира елемент tbody). Линиите се воведуваат со tr.

Заглавието на табелата се состои од та елементи, одделните ќелии со тд елементи.

Крстоклеточни групи колони [уреди]

Бидејќи Internet Explorer, за разлика од другите прелистувачи, не добива автоматско ажурирање, интересно е да се знае во кои верзии се дистрибуира уделот на пазарот меѓу:

Заглавие на табелата [уреди]

Можете да доделите кратко објаснување или наслов кон табелата со елементот за наслов. Декларацијата мора да се направи веднаш по ознаката за воведната табела, но исто така може да се позиционира под табелата со помош на CSS.

Секоја колона има заглавие клетка (та) во заглавието на табелата (thead), која е доделена на колоната со обем = "col".

Слично на тоа, левата колона со обем = "ред" служи како заглавие на табелата за одделните редови.

Основни информации за CSS [уреди]

Со падот на границата на имотот можете да утврдите дали границите на соседните елементи на табелата се прикажани одделени (граница-колапс: засебно;) или коинцидентно (граничен пад: колапс;).

Фонтот во заглавието и ќелиите за податоци е прикажан во стандардната големина на фонтот, фонтот во ќелиите за заглавие е прикажан со задебелени букви.

Дизајн на ќелии за глава и податоци [уреди]

Во сопствените стандардни поставки на прелистувачот, гледате само постојан хаос на броеви. CSS ви овозможува да дизајнирате заглавија и ќелии за податоци, така што броевите ќе бидат полесно читани.

Заглавјата на табелите добиваат позадина и боја на текст.
Фонтот во ќелиите со податоци треба да биде закосен и правилно оправдан, така што големите вредности веднаш се издвојуваат.

Така што празната ќелија за податоци горе лево не добие сенка, празните ќелии се адресираат со празна класа на псевдо и сенката се отстранува повторно.

Премин на зебра [уреди]

Особено со поголеми маси, полесно е да се обои секоја втора линија.

Заглавија на линиите [уреди]

Дали се сеќавате на клетките на заглавието во секој ред?

Наслов на дизајнот [уреди]

Насловот содржан во елементот за наслов сега е дизајниран со лента:

Псевдо-елемент од левата страна му дава тродимензионален изглед на бендот.

На табелата сега е дадена и сенка.

Обележување на линиите во: лебди [уреди]

Кога корисникот ќе го помести глувчето над табелата, соодветната ќелија за податоци и соодветниот ред на табелата се обележани со боја:

Пример сојузни држави сиво во сиво [уредување]

Во следното, федералните држави на Сојузна Република ќе бидат претставени во втор пример.