Дизайн на HTML таблица с CSS - SELFHTML-Wiki

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

дизайн

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

Тази глава ви показва как можете да използвате 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 Маркиране на редове в: hover
  • 3 Пример за федерални щати сиво върху сиво
  • 4 уеб връзки

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

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

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

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

Заглавия [редактиране]

В таблица th-те клетки образуват заглавията за отделни колони или редове, елементът за надпис представлява надпис за таблицата. Обикновено (т.е. в таблицата със стилове по подразбиране) заглавията на таблицата се показват с удебелен шрифт, надписът се показва отделно от Поместена маса. Това може да се промени с CSS:

Полета [редактиране]

Повечето таблици съдържат поредици от числа.

Тук е важно цифрите да се подравнят ясно и съответно да се маркират сумите.

Примерна поддръжка на браузър [редактиране]

За нашия пример използваме таблица, която показва пазарните дялове на отделните браузъри в Германия.

Елементът tbody, thead и tfoot е вмъкнат в таблицата (браузърът може да генерира сам елемент tbody). Линиите се въвеждат с tr.

Заглавката на таблицата се състои от th елементи, отделните клетки с td елементи.

Групи междуклетъчни колони [редактиране]

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

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

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

Всяка колона има заглавна клетка (th) в заглавката на таблицата (thead), която се присвоява на колоната с scope = "col".

По същия начин лявата колона с scope = "row" служи като заглавка на таблицата за отделните редове.

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

Със свойството border-kolaps можете да определите дали границите на съседни елементи на таблицата се показват разделени (border-kolaps: отделни;) или съвпадащи (border-kolaps: колапс;).

Шрифтът в заглавната част и клетките с данни е показан със стандартен размер на шрифта, шрифтът в заглавните клетки е показан с получер шрифт.

Дизайн на глава и клетки с данни [редактиране]

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

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

Така че празната клетка с данни в горния ляв ъгъл не получава сянка, празни клетки се адресират с псевдо клас празна и сянката се премахва отново.

Преминаване на зебра [редактиране]

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

Заглавия на редове [редактиране]

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

Заглавие на дизайна [редактиране]

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

Псевдоелемент вляво придава на лентата триизмерен външен вид.

На таблицата също е дадена сянка.

Маркиране на редове в: hover [редактиране]

Когато потребителят премести мишката върху таблицата, съответната клетка с данни и съответният ред на таблицата се подчертават в цвят:

Пример федерални щати сиво в сиво [редактиране]

По-нататък във втори пример ще бъдат представени федералните щати на Федералната република.