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

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

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

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ свойства ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ элСмСнтам столбцов ΠΈ Π³Ρ€ΡƒΠΏΠΏ столбцов:

'border'

Π Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ свойства Ρ€Π°ΠΌΠΊΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ столбцам Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° 'border-collapse' Π² элСмСнтС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ установлСн Π² 'collapse'. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС, Ρ€Π°ΠΌΠΊΠΈ, установлСнныС для столбца ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ столбцов, ΡΠ²Π»ΡΡŽΡ‚ΡΡ источником Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ стили Ρ€Π°ΠΌΠΊΠΈ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ края ячСйки.

'background'

Бвойства Ρ„ΠΎΠ½Π° ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ Ρ„ΠΎΠ½ для ячССк Π² столбцС, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли ΠΈ ячСйка, ΠΈ ряд ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½. Π‘ΠΌ. Π‘Π»ΠΎΠΈ ΠΈ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

'width'

Бвойство 'width' Π·Π°Π΄Π°Ρ‘Ρ‚ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбца.

'visibility'

Если 'visibility' столбца установлСно Π² 'collapse', Π½ΠΈ ΠΎΠ΄Π½Π° ΠΈΠ· ячССк столбца Π½Π΅ отобраТаСтся, ΠΈ ячСйки, Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ столбцы, ΡƒΡΠ΅ΠΊΠ°ΡŽΡ‚ΡΡ. Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ этому, ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ Π΄ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбца, содСрТащСгося Π² Π½Π΅ΠΉ. Π‘ΠΌ. Π½ΠΈΠΆΠ΅ ДинамичСскиС эффСкты. Π”Ρ€ΡƒΠ³ΠΈΠ΅ значСния 'visibility' Π½Π΅ ΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ дСйствия.

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


COL { border-style: none solid } TABLE { border-style: hidden } COL.totals { background: blue } TABLE { table-layout: fixed } COL.totals { width: 5em }


Π’ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Ρ… ΠΌΠΎΠ΄Π΅Π»ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ форматирования ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌ Π½Π° элСмСнт уровня Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹ΠΉ элСмСнт ΠΈΠ½Π»Π°ΠΉΠ½-уровня. Π£ Ρ‚Π°Π±Π»ΠΈΡ† Π΅ΡΡ‚ΡŒ содСрТимоС, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Ρ€Π°ΠΌΠΊΠΈ ΠΈ поля.

Π’ ΠΎΠ±ΠΎΠΈΡ… случаях элСмСнт Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ Π°Π½ΠΎΠ½ΠΈΠΌΠ½Ρ‹ΠΉ бокс, содСрТащий сам бокс Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ бокс Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° (Ссли имССтся). Боксы Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈΠΌΠ΅ΡŽΡ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ свои собствСнныС области содСрТимого, заполнСния, ΠΏΠΎΠ»Π΅ΠΉ, Ρ€Π°ΠΌΠΊΠΈ; ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΎΠ³ΠΎ Π°Π½ΠΎΠ½ΠΈΠΌΠ½ΠΎΠ³ΠΎ бокса ΡΠ²Π»ΡΡŽΡ‚ΡΡ наимСньшими Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌΠΈ для вмСщСния ΠΎΠ±ΠΎΠΈΡ… боксов.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ поля ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ΡΡ Π² Ρ‚Π΅Ρ… мСстах, Π³Π΄Π΅ боксы Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΠΎΠΏΡ€ΠΈΠΊΠ°ΡΠ°ΡŽΡ‚ΡΡ. ΠŸΡ€ΠΈ любом ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ вСсь Π°Π½ΠΎΠ½ΠΈΠΌΠ½Ρ‹ΠΉ бокс, Π° Π½Π΅ просто бокс Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ вмСстС с Π½ΠΈΠΌ пСрСмСщаСтся ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Π”ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ Π²Π²Π΅Ρ€Ρ…Ρƒ; Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° сТато вмСстС с Π²Π΅Ρ€Ρ…Π½ΠΈΠΌ ΠΏΠΎΠ»Π΅ΠΌ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

[D]

'caption-side'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: top | bottom | left | right | inherit

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

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

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

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

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

Π­Ρ‚ΠΎ свойство спСцифицируСт ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ бокса Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ бокса Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

ЗначСния ΠΈΠΌΠ΅ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ смысл:

top

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ бокс Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π°Π΄ боксом Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

bottom

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ бокс Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎΠ΄ боксом Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

left

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ бокс Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° слСва ΠΎΡ‚ бокса Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

right

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ бокс Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° справа ΠΎΡ‚ бокса Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ свСрху ΠΈΠ»ΠΈ снизу ΠΎΡ‚ элСмСнта 'table' Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ элСмСнтами Π±Π»ΠΎΠΊΠ° Π΄ΠΎ ΠΈ послС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ (1) ΠΎΠ½ΠΈ Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ наслСдуСмыС свойства Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ (2) ΠΎΠ½ΠΈ Π½Π΅ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ бокс Π±Π»ΠΎΠΊΠ° для Ρ†Π΅Π»Π΅ΠΉ элСмСнтов 'compact' ΠΈΠ»ΠΈ 'run-in', ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Π΅.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ свСрху ΠΈΠ»ΠΈ снизу ΠΎΡ‚ бокса Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π²Π΅Π΄Ρ‘Ρ‚ сСбя ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ боксу Π±Π»ΠΎΠΊΠ° ΠΈ ΠΏΡ€ΠΈ расчётах ΡˆΠΈΡ€ΠΈΠ½Ρ‹; ΡˆΠΈΡ€ΠΈΠ½Π° вычисляСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ бокса Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ содСрТащСго Π±Π»ΠΎΠΊΠ°.

Для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² слСва ΠΈΠ»ΠΈ справа ΠΎΡ‚ бокса Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ 'auto' для 'width', устанавливаСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ явно, Π½ΠΎ 'auto' сообщаСт ПА, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ "ΠΏΡ€ΠΈΠ΅ΠΌΠ»Π΅ΠΌΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ". Она ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°Ρ€ΡŒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ "самого ΡƒΠ·ΠΊΠΎΠ³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ³ΠΎ бокса" Π΄ΠΎ "строки", поэтому ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ спСцифицировали 'auto' для ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π»Π΅Π²Ρ‹Ρ… ΠΈ ΠΏΡ€Π°Π²Ρ‹Ρ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ².

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ содСрТимоС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ бокса Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство 'text-align'.

Для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ выравнивания Π»Π΅Π²Ρ‹Ρ… ΠΈ ΠΏΡ€Π°Π²Ρ‹Ρ… боксов Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ бокса Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство 'vertical-align'. Π’ этом случаС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ значСния 'top', 'middle' ΠΈ 'bottom'. ВсС Π΄Ρ€ΡƒΠ³ΠΈΠ΅ значСния Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ 'top'.

Π—Π΄Π΅ΡΡŒ свойство 'caption-side' Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠΎΠ΄ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΠΉ ΠΆΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Ρ‡Ρ‚ΠΎ ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΈ тСкст Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ.


CAPTION { caption-side: bottom; width: auto; text-align: left }


Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π² Π»Π΅Π²ΠΎΠΌ ΠΏΠΎΠ»Π΅. Π‘Π°ΠΌΠ° Ρ‚Π°Π±Π»ΠΈΡ†Π° Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π° установкой Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅ΠΉ Π² 'auto', Π° вСсь бокс с Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ сдвинут Π² Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π½Π° Ρ‚Ρƒ ΠΆΠ΅ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρƒ, Ρ‡Ρ‚ΠΎ ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.


BODY { margin-left: 8em } TABLE { margin-left: auto; margin-right: auto } CAPTION { caption-side: left; margin-left: -8em; width: 8em; text-align: right; vertical-align: bottom }


ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ, Ρ‡Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ мСньшС доступной ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ:

Π”ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡƒΡŽ Π² Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΊΠ°ΠΊ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ значСния свойства 'margin-left'.

[D]

Подобно Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтам языка Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ элСмСнты Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‚ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Π΅ боксы с содСрТимым, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΈ Ρ€Π°ΠΌΠΊΠ°ΠΌΠΈ. Однако ΠΎΠ½ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΠΎΠ»Π΅ΠΉ.

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ прСдставлСниС этих боксов управляСтся ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΎΠΉ нСрСгулярной сСткой ΠΈΠ· рядов ΠΈ столбцов. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ бокс Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ†Π΅Π»ΠΎΠ΅ число ячССк сСтки, опрСдСляСмоС Π² соотвСтствии с Π½ΠΈΠΆΠ΅ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ. Π­Ρ‚ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ HTML 4.0 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΠΌ вСрсиям HTML; HTML ΠΈΠΌΠ΅Π΅Ρ‚ свои собствСнныС ограничСния Π½Π° ΠΎΡ…Π²Π°Ρ‚ рядов ΠΈ столбцов.

1ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ бокс ряда Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ряд ячССк сСтки. ВсС вмСстС боксы рядов Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‚ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ свСрху Π²Π½ΠΈΠ· Π² Ρ‚ΠΎΠΌ порядкС, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅-источникС (Ρ‚.Π΅. Ρ‚Π°Π±Π»ΠΈΡ†Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ€ΠΎΠ²Π½ΠΎ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ рядов сСтки, сколько имССтся элСмСнтов рядов).

2Π“Ρ€ΡƒΠΏΠΏΠ° рядов Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‚Π΅ ΠΆΠ΅ ячСйки, Ρ‡Ρ‚ΠΎ ΠΈ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π΅Ρ‘ ряды.

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

4Бокс Π³Ρ€ΡƒΠΏΠΏΡ‹ столбцов Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‚Π΅ ΠΆΠ΅ ячСйки сСтки, Ρ‡Ρ‚ΠΎ ΠΈ содСрТащиСся Π² Π½Ρ‘ΠΌ столбцы.

5Π―Ρ‡Π΅ΠΉΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ нСсколько рядов ΠΈ столбцов. (Π₯отя CSS2 Π½Π΅ опрСдСляСт, ΠΊΠ°ΠΊ вычисляСтся количСство Π·Π°Ρ…Π²Π°Ρ‡Π΅Π½Π½Ρ‹Ρ… рядов ΠΈΠ»ΠΈ столбцов, ПА ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅-источникС; будущая вСрсия CSS ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ способ выраТСния этих свСдСний Π² синтаксисС CSS.) КаТдая ячСйка, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, это ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ бокс ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΈ высотой Π² ΠΎΠ΄Π½Ρƒ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ячССк сСтки. Π’Π΅Ρ€Ρ…Π½ΠΈΠΉ ряд этого ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° находится Π² ряду, спСцифицированном Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΌ ячСйки. ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ обязан Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π²Π΅Π΅, Π½ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ бокс ячСйки ΠΈ обязан Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ справа ΠΎΡ‚ всСх ячССк Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ряду, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… Ρ€Π°Π½Π΅Π΅ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅-источникС. (Π­Ρ‚ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ остаётся Π² силС, Ссли свойство 'direction' Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ - 'ltr'; Ссли ΠΆΠ΅ 'direction' - 'rtl', "Π»Π΅Π²ΠΎ" ΠΈ "ΠΏΡ€Π°Π²ΠΎ" Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ мСстами.)

6Бокс ячСйки Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒΡΡ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ бокса послСднСго ряда ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ рядов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹; ПА обязан ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π΅Π³ΠΎ (бокс ячСйки) Π΄ΠΎ вмСщСния.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Π―Ρ‡Π΅ΠΉΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ, Π½ΠΎ это Π½Π΅ рСкомСндуСтся: ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ всплываниС удаляСт бокс ΠΈΠ· прорисовки, влияя Π½Π° Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Π’ΠΎΡ‚ Π΄Π²Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ - Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ HTML:


<TABLE> <TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4 <TR><TD colspan="2">5 </TABLE> <TABLE> <ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4 <ROW><CELL colspan="2">5 </TABLE>


Вторая Ρ‚Π°Π±Π»ΠΈΡ†Π° сформатирована, ΠΊΠ°ΠΊ Π½Π° ΠΏΡ€Π°Π²ΠΎΠΌ рисункС. Однако прСдставлСниС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ HTML явно Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ HTML, ΠΈ CSS Π½Π΅ пытаСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ. ПА свободны Π² Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΅Ρ‘, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°ΠΊ Π½Π° Π»Π΅Π²ΠΎΠΌ рисункС.

Π‘Π»Π΅Π²Π° - Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ прСдставлСниС ΠΎΡˆΠΈΠ±ΠΎΡ‡Π½ΠΎΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ HTML 4.0; справа - СдинствСнно Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ Π½Π΅-HTML Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

[D]

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ Ρ„ΠΎΠ½ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сСбС ΠΊΠ°ΠΊ состоящиС ΠΈΠ· ΡˆΠ΅ΡΡ‚ΠΈ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ слоёв. Π€ΠΎΠ½, установлСнный Π² элСмСнтС, это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· слоёв, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π΅Π½, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли слои Π½Π°Π΄ Π½ΠΈΠΌ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½.