Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΊΠ½ΠΈΠ³ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½ Π½Π° Bookidrom.ru! БСсплатныС ΠΊΠ½ΠΈΠ³ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅

Π§ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½ «БпСцификация CSS2Β». Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° 53

Автор Π•Π²Π³Π΅Π½ΠΈΠΉ Π Π΅Π·Π½ΠΈΡ‡Π΅Π½ΠΊΠΎ

CSS2 Π½Π΅ спСцифицируСт, ΠΊΠ°ΠΊ ячСйки, Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ряда, Π²Π»ΠΈΡΡŽΡ‚ Π½Π° вычислСниС высоты рядов, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ суммарная высота рядов обязана Π±Ρ‹Ρ‚ΡŒ достаточно большой, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΊΡ€ΡƒΠΆΠΈΡ‚ΡŒ ячСйку, Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ ряды.

Бвойство 'vertical-align' ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ опрСдСляСт Π΅Ρ‘ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π² ряду. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ячСйки ΠΈΠΌΠ΅Π΅Ρ‚ baseline/Π±Π°Π·ΠΎΠ²ΡƒΡŽ линию, top/Π²Π΅Ρ€Ρ…, middle/сСрСдину ΠΈ bottom/Π½ΠΈΠ·, ΠΊΠ°ΠΊ ΠΈ сам ряд.

Π’ контСкстС Ρ‚Π°Π±Π»ΠΈΡ† значСния 'vertical-align' ΠΈΠΌΠ΅ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ смысл:

baseline

Базовая линия ячСйки ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½Π° Π½Π° Ρ‚ΠΎΠΉ ΠΆΠ΅ высотС, Ρ‡Ρ‚ΠΎ ΠΈ базовая линия ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΈΠ· рядов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½Π° Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ (см. Π½ΠΈΠΆΠ΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ячСйки ΠΈ ряда).

top

Π’Π΅Ρ€Ρ… бокса ячСйки Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ с Π²Π΅Ρ€Ρ…ΠΎΠΌ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΈΠ· рядов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½Π° Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚.

bottom

Низ бокса ячСйки Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ с Π½ΠΈΠ·ΠΎΠΌ послСднСго ΠΈΠ· рядов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½Π° Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚.

middle

Π¦Π΅Π½Ρ‚Ρ€ ячСйки Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ с Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠΌ рядов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½Π° Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚.

sub, super, text-top, text-bottom

Π­Ρ‚ΠΈ значСния Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ ячСйкам; вмСсто этого ячСйка выравниваСтся ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ.

Базовая линия ячСйки это базовая линия ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ строчного бокса Π² ячСйкС. Если Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ тСкста Π½Π΅Ρ‚, базовая линия - это базовая линия ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Π² ячСйкС ΠΈΠ»ΠΈ, Ссли Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π½Π΅Ρ‚, - Π½ΠΈΠ· бокса ячСйки. МаксимальноС расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π²Π΅Ρ€Ρ…ΠΎΠΌ бокса ячСйки ΠΈ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ всСх ячССк, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΡ… 'vertical-align: baseline', ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ряда. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π”ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ дСйствиС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ 'vertical-align' Π² ячСйках Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

[D]

Боксы ячССк 1 ΠΈ 2 Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ ΠΈΡ… Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ линиям. Бокс ячСйки 2 ΠΈΠΌΠ΅Π΅Ρ‚ Π±oΠ»ΡŒΡˆΡƒΡŽ высоту ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΈ поэтому опрСдСляСт Π±Π°Π·ΠΎΠ²ΡƒΡŽ линию ряда. Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ссли Π½Π΅Ρ‚ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ бокса ячСйки, Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, Ρƒ ряда Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ (Π½Π΅ Π½ΡƒΠΆΠ½Π°) Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹Π΅ ситуации, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ячССк происходит Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ порядкС:

1Π‘Π½Π°Ρ‡Π°Π»Π° ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ячСйки, Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹Π΅ ΠΏΠΎ ΠΈΡ… Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ линиям. Π­Ρ‚ΠΎ устанавливаСт Π±Π°Π·ΠΎΠ²ΡƒΡŽ линию ряда. Π—Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ячСйки с 'vertical-align: top'.

2Ряд ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Π΅Ρ€Ρ…, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ - Π±Π°Π·ΠΎΠ²ΡƒΡŽ линию ΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ высоту, которая являСтся расстояниСм ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π° (Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹) Π΄ΠΎ Π½ΠΈΠ·Π° самой Π½ΠΈΠΆΠ½Π΅ΠΉ ячСйки. (Π‘ΠΌ. Π½ΠΈΠΆΠ΅ условия для заполнСния ячССк.)

3Если какая-Π»ΠΈΠ±ΠΎ ΠΈΠ· ΠΎΡΡ‚Π°Π²ΡˆΠΈΡ…ΡΡ ячССк, Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹Ρ… ΠΏΠΎ Π½ΠΈΠ·Ρƒ ΠΈΠ»ΠΈ ΠΏΠΎ сСрСдинС, ΠΈΠΌΠ΅Π΅Ρ‚ высоту Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ, Ρ‡Π΅ΠΌ тСкущая высота ряда, Ρ‚ΠΎ высота ряда Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π° Π΄ΠΎ максимума этой ячСйки ΠΏΡƒΡ‚Ρ‘ΠΌ опускания Π½ΠΈΠ·Π° (Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹).

4НаконСц, ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ ячСйки.

Боксы ячССк, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ мСньшС, Ρ‡Π΅ΠΌ высота ряда, ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π²Π²Π΅Ρ€Ρ…Ρƒ ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·Ρƒ.

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ содСрТимого ячСйки Π² боксС ячСйки спСцифицируСтся свойством 'text-align'.

Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства 'text-align' для Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ ΠΎΠ΄Π½ΠΎΠΉ ячСйки Π² столбцС установлСно Π² <string>, содСрТимоС этих ячССк выравниваСтся вдоль Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ оси. Начало строки касаСтся этой оси. НаправлСниС письма опрСдСляСт, располоТСна строка слСва ΠΈΠ»ΠΈ справа ΠΎΡ‚ оси.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста Ρ‚Π°ΠΊΠΈΠΌ способом Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° тСкст Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π° ΠΎΠ΄Π½Ρƒ строку. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½, Ссли содСрТимоС ячСйки Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠΉ строки.

Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'text-align' ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ это строка, Π½ΠΎ строка Π½Π΅ появляСтся Π² содСрТимом ячСйки, Ρ‚ΠΎ ΠΊΠΎΠ½Π΅Ρ† содСрТимого ячСйки соприкасаСтся с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ осью выравнивания.

Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ строки Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π΅ΠΌΠΈ ΠΆΠ΅ самыми для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ячСйки, хотя, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, это ΠΈ Ρ‚Π°ΠΊ.

CSS Π½Π΅ прСдоставляСт способа ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ смСщСниС оси Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ выравнивания ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ края бокса столбца.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй:


TD { text-align: "." } TD:before { content: "$" }


создаст столбСц Π·Π½Π°ΠΊΠΎΠ² Π΄ΠΎΠ»Π»Π°Ρ€Π° Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ HTML:


<TABLE> <COL width="40"> <TR> <TH>Long distance calls <TR> <TD> 1.30 <TR> <TD> 2.50 <TR> <TD> 10.80 <TR> <TD> 111.01 <TR> <TD> 85. <TR> <TD> 90 <TR> <TD> .05 <TR> <TD> .06 </TABLE>


для выравнивания дСсятичной Ρ‚ΠΎΡ‡ΠΊΠΈ. Π¨ΡƒΡ‚ΠΊΠΈ Ρ€Π°Π΄ΠΈ, ΠΌΡ‹ использовали псСвдоэлСмСнт :before для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π·Π½Π°ΠΊ Π΄ΠΎΠ»Π»Π°Ρ€Π° ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ. Π’Π°Π±Π»ΠΈΡ†Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:


Long distance calls $1.30 $2.50 $10.80 $111.01 $85. $90 $.05 $.06


Бвойство 'visibility' ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'collapse' для элСмСнтов ряда, Π³Ρ€ΡƒΠΏΠΏΡ‹ рядов, столбца ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ столбцов. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Ρ†Π΅Π»ΠΎΠ³ΠΎ ряда ΠΈΠ»ΠΈ столбца с экрана, ΠΈ пространство, Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°Π΅ΠΌΠΎΠ΅ этим рядом ΠΈΠ»ΠΈ столбцом, становится доступным для Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ содСрТимого. ПодавлСниС ряда ΠΈΠ»ΠΈ столбца Π½Π΅ влияСт, ΠΎΠ΄Π½Π°ΠΊΠΎ, Π½Π° структуру Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π­Ρ‚ΠΎ позволяСт динамичСски ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ столбцы ΠΈΠ»ΠΈ ряды Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±Π΅Π· форсирования рСструктурирования Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡ‡Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ измСнСния Π² столбцах.

Π˜ΠΌΠ΅ΡŽΡ‚ΡΡ Π΄Π²Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ установки Ρ€Π°ΠΌΠΎΠΊ ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² CSS. Одна большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°ΠΌΠΎΠΊ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ячССк, другая ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ€Π°ΠΌΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΡΠ½ΡƒΠ»ΠΈΡΡŒ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ†Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π΄ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ. МногиС стили Ρ€Π°ΠΌΠΎΠΊ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ, поэтому Ρ‡Π°Ρ‰Π΅ всСго - Π΄Π΅Π»ΠΎ вкуса, ΠΊΠ°ΠΊΡƒΡŽ модСль ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

'border-collapse'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: collapse | separate | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: collapse

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊ элСмСнтам 'table' ΠΈ 'inline-table'

НаслСдуСтся: Π΄Π°

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: N/A

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Π­Ρ‚ΠΎ свойство Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ модСль Ρ€Π°ΠΌΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'separate' Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ модСль Ρ€Π°Π·Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°ΠΌΠΎΠΊ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'collapse' Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ модСль ΡΠΆΠΈΠΌΠ°ΡŽΡ‰ΠΈΡ…ΡΡ Ρ€Π°ΠΌΠΎΠΊ. Π­Ρ‚ΠΈ ΠΌΠΎΠ΄Π΅Π»ΠΈ описаны Π½ΠΈΠΆΠ΅.

'border-spacing'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: <length> <length>? | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: 0

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊ элСмСнтам 'table' ΠΈ 'inline-table'

НаслСдуСтся: Π΄Π°

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: N/A

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΡŽΡ‚ расстояниС, Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‰Π΅Π΅ Ρ€Π°ΠΌΠΊΠΈ смСТных Ρ‚Π°Π±Π»ΠΈΡ†. Если спСцифицирован ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΎΠ½ Π·Π°Π΄Π°Ρ‘Ρ‚ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅, ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ расстояниС. Если спСцифицированы Π΄Π²Π°, Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π·Π°Π΄Π°Ρ‘Ρ‚ расстояниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π²Ρ‚ΠΎΡ€ΠΎΠΉ - ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. ЗначСния Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ.

Π’ этой ΠΌΠΎΠ΄Π΅Π»ΠΈ каТдая ячСйка ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ. Бвойство 'border-spacing' спСцифицируСт расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°ΠΌΠΊΠ°ΠΌΠΈ смСТных ячССк. Π­Ρ‚ΠΎ пространство заполняСтся Ρ„ΠΎΠ½ΠΎΠΌ элСмСнта Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Ряды, Π³Ρ€ΡƒΠΏΠΏΡ‹ рядов, столбцы ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ столбцов Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ€Π°ΠΌΠΎΠΊ (Ρ‚.Π΅. ПА обязаны ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свойства Ρ€Π°ΠΌΠΊΠΈ Π² Ρ‚Π°ΠΊΠΈΡ… элСмСнтах).

Π’Π°Π±Π»ΠΈΡ†Π° Π½Π° рисункС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ Ρ‚Π°ΠΊΠΎΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй:


TABLE { border: outset 10pt; border-collapse: separate; border-spacing: 15pt } TD { border: inset 5pt } TD.special { border: inset 10pt } /* ВСрхняя лСвая ячСйка */


Π’Π°Π±Π»ΠΈΡ†Π° с 'border-spacing', установлСнным Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ячСйки имССтся своя собствСнная Ρ€Π°ΠΌΠΊΠ°, Π° Ρ‚Π°Π±Π»ΠΈΡ†Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ.

[D]

'empty-cells'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: show | hide | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: show

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊ элСмСнтам 'table-cell'

НаслСдуСтся: Π΄Π°

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: N/A

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Π’ ΠΌΠΎΠ΄Π΅Π»ΠΈ Ρ€Π°Π·Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°ΠΌΠΎΠΊ Π΄Π°Π½Π½ΠΎΠ΅ свойство управляСт прСдставлСниСм Ρ€Π°ΠΌΠΎΠΊ Π²ΠΎΠΊΡ€ΡƒΠ³ ячССк, Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΡ… Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ содСрТимого. ΠŸΡƒΡΡ‚Ρ‹Π΅ ячСйки ΠΈ ячСйки со свойством 'visibility', установлСнным Π² 'hidden', Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ содСрТимого. Π’ΠΈΠ΄ΠΈΠΌΠΎΠ΅ содСрТимоС Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ " " ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ ASCII-символов CR ("\0D"), LF ("\0A"), tab ("\09"), ΠΈ space ("\20").

Если это свойство ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'show', Ρ€Π°ΠΌΠΊΠΈ ΠΏΡ€ΠΎΡ€ΠΈΡΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π²ΠΎΠΊΡ€ΡƒΠ³ пустых ячССк (ΠΊΠ°ΠΊ Π²ΠΎΠΊΡ€ΡƒΠ³ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… ячССк).

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'hide' ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ€Π°ΠΌΠΊΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ пустых ячССк Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ прорисованы. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ссли всС ячСйки Π² ряду ΠΈΠΌΠ΅ΡŽΡ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'hide' ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ содСрТимого, вСсь ряд Π²Π΅Π΄Ρ‘Ρ‚ сСбя Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ ΠΎΠ½ ΠΈΠΌΠ΅Π» 'display: none'.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ прорисовку Ρ€Π°ΠΌΠΎΠΊ Π²ΠΎΠΊΡ€ΡƒΠ³ всСх ячССк:


TABLE { empty-cells: show }


Π’ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΡΠΆΠΈΠΌΠ°ΡŽΡ‰ΠΈΡ…ΡΡ Ρ€Π°ΠΌΠΎΠΊ имССтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°ΠΌΠΊΠΈ, ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΠ΅ всС ΠΈΠ»ΠΈ Ρ‡Π°ΡΡ‚ΡŒ ячССк, рядов, Π³Ρ€ΡƒΠΏΠΏ рядов, столбцов ΠΈ Π³Ρ€ΡƒΠΏΠΏ столбцов. Π Π°ΠΌΠΊΠΈ для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° HTML "rule" ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ спСцифицированы Ρ‚Π°ΠΊΠΈΠΌ способом.

Π Π°ΠΌΠΊΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ линиям сСтки ΠΌΠ΅ΠΆΠ΄Ρƒ ячСйками. ПА обязаны Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ подходящСС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ для округлСния ΠΏΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ нСстандартного числа абстрактных Π΅Π΄ΠΈΠ½ΠΈΡ† измСрСния (пиксСлов экрана, Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΏΡ€ΠΈΠ½Ρ‚Π΅Ρ€Π°).

Π”ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° Π²Π½ΠΈΠ·Ρƒ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ€Π°ΠΌΠΎΠΊ, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° ячССк. Π˜Ρ… ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ Π·Π°Π΄Π°ΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΡƒΡ€Π°Π²Π½Π΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ дСйствуСт для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ряда Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹:

row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)