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

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

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

1Π‘Π°ΠΌΡ‹ΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ слой - Ρ†Π΅Π»ΡŒΠ½Ρ‹ΠΉ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ вСсь бокс Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Подобно Π΄Ρ€ΡƒΠ³ΠΈΠΌ боксам, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ.

2Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ слой содСрТит Π³Ρ€ΡƒΠΏΠΏΡ‹ столбцов. Π“Ρ€ΡƒΠΏΠΏΡ‹ столбцов - Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ высоты, ΠΊΠ°ΠΊ ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Π°, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ всю Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

3Π‘Π²Π΅Ρ€Ρ…Ρƒ Π½Π°Π΄ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌΠΈ столбцов находятся области, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ боксы столбцов. Как ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ столбцов, столбцы - Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ высоты, ΠΊΠ°ΠΊ ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Π°, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ всю Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

4Π‘Π»Π΅Π΄ΠΎΠΌ ΠΈΠ΄Ρ‘Ρ‚ слой Π³Ρ€ΡƒΠΏΠΏ рядов. КаТдая Π³Ρ€ΡƒΠΏΠΏΠ° рядов - Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, ΠΊΠ°ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Π°. ВсС вмСстС Π³Ρ€ΡƒΠΏΠΏΡ‹ рядов ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ свСрху Π²Π½ΠΈΠ·.

5ΠŸΡ€Π΅Π΄ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ слой содСрТит ряды. Ряды Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ всю Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ.

6Π‘Π°ΠΌΡ‹ΠΉ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ слой содСрТит ячСйки. Как ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рисункС, хотя всС ряды ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ количСство ячССк, Π½Π΅ каТдая ячСйка ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ спСцифицированноС содСрТимоС. Π­Ρ‚ΠΈ "пустыС" ячСйки ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹, Ρ‡Ρ‚ΠΎ позволят Π½ΠΈΠΆΠ΅Π»Π΅ΠΆΠ°Ρ‰ΠΈΠΌ слоям ΠΏΡ€ΠΎΡΠ²Π΅Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ряд содСрТит 4 ячСйки, Π½ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ряд Π½Π΅ содСрТит ячССк, ΠΈ, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²ΠΈΠ΄Π΅Π½ Ρ„ΠΎΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΈΡΠΊΠ»ΡŽΡ‡Π°Ρ Ρ‚Π΅ мСста, Π³Π΄Π΅ ячСйка ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ряда Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ ΠΈ этот ряд. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ HTML ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° стилСй -


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> TABLE { background: #ff0; border-collapse: collapse } TD { background: red; border: double black } </STYLE> </HEAD> <BODY> <P> <TABLE> <TR> <TD> 1 <TD rowspan="2"> 2 <TD> 3 <TD> 4 </TR> <TR><TD></TD></TR> </TABLE> </BODY> </HTML>


ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ сформатирован Ρ‚Π°ΠΊ:

Π’Π°Π±Π»ΠΈΡ†Π° с трСмя пустыми ячСйками Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ряду.

[D]

CSS Π½Π΅ опрСдСляСт "ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ" Π²ΠΈΠ΄ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… случаях это Π΄Π΅Π»ΠΎ вкуса. CSS Π½Π΅ опрСдСляСт ограничСния Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ПА обязан Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ. ПА ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любой Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΉ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ ΠΈ свободны ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Π΅ΡΡ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ точности отобраТСния, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅ Π²Ρ‹Π±Ρ€Π°Π½ "Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ фиксированного Π²Ρ‹Π²ΠΎΠ΄Π° ".

'table-layout'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: auto | fixed | inherit

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

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

НаслСдуСтся: Π½Π΅Ρ‚

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

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

Бвойство 'table-layout' ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для Π²Ρ‹Π²ΠΎΠ΄Π° ячССк, рядов ΠΈ столбцов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

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

fixed

Алгоритм фиксированного Π²Ρ‹Π²ΠΎΠ΄Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹;

auto

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ любой автоматичСский Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ Π²Ρ‹Π²ΠΎΠ΄Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Π­Ρ‚ΠΈ Π΄Π²Π° Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° описаны Π½ΠΈΠΆΠ΅.

Π’ этом (быстром) Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π²ΠΎΠ΄ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π½Π΅ зависит ΠΎΡ‚ содСрТимого ячССк; ΠΎΠ½ зависит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов ΠΈ ΠΎΡ‚ Ρ€Π°ΠΌΠΎΠΊ ΠΈ заполнСния ячССк.

Π¨ΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ спСцифицирована явно свойством 'width'. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' (ΠΈ для 'display: table', ΠΈ для 'display: inline-table') ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ использованиС Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° автоматичСского Π²Ρ‹Π²ΠΎΠ΄Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Π’ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ΅ фиксированного Π²Ρ‹Π²ΠΎΠ΄Π° ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ столбца опрСдСляСтся Ρ‚Π°ΠΊ:

1Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ столбца со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ свойства 'width', ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΡ‚ 'auto', устанавливаСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ этого столбца.

2Π˜Π½Π°Ρ‡Π΅, ячСйка Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌ ряду со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ свойства 'width', ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΡ‚ 'auto', устанавливаСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ этого столбца. Если ячСйка Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ столбца, ΡˆΠΈΡ€ΠΈΠ½Π° раздСляСтся Π½Π° эти столбцы.

3Π›ΡŽΠ±Ρ‹Π΅ ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ столбцы Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ ΠΎΡΡ‚Π°Π²ΡˆΠ΅Π΅ΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ пространство Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ (минус Ρ€Π°ΠΌΠΊΠΈ ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ячССк).

Π¨ΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΠ³Π΄Π° большС значСния свойства 'width' для элСмСнта Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ суммарной ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов (плюс Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ячССк ΠΈΠ»ΠΈ Ρ€Π°ΠΌΠΊΠΈ). Если Ρ‚Π°Π±Π»ΠΈΡ†Π° ΡˆΠΈΡ€Π΅, Ρ‡Π΅ΠΌ столбцы, ΠΎΡΡ‚Π°Π²ΡˆΠ΅Π΅ΡΡ пространство Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ распрСдСлСно ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами.

ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ ПА ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ сразу, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ вСсь ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ряд. Π―Ρ‡Π΅ΠΉΠΊΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… рядах Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π›ΡŽΠ±Π°Ρ ячСйка, ΠΈΠΌΠ΅ΡŽΡ‰Π°Ρ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½ΡΡŽΡ‰Π΅Π΅ содСрТимоС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ свойство 'overflow' для опрСдСлСния Ρ‚ΠΎΠ³ΠΎ, ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒ Π»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½ΡΡŽΡ‰Π΅Π΅ содСрТимоС.

Π’ этом Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ΅ (Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰Π΅ΠΌ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ Π΄Π²ΡƒΡ… шагов), ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ опрСдСляСтся ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π΅Ρ‘ столбцов (ΠΈ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Ρ… Ρ€Π°ΠΌΠΎΠΊ). Π­Ρ‚ΠΎΡ‚ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ ΠΎΡ‚Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… популярных ПА HTML Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания Π΄Π°Π½Π½ΠΎΠΉ спСцификации. ΠžΡ‚ ПА Π½Π΅ трСбуСтся Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ этот Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ для опрСдСлСния структуры Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² случаС, Ссли 'table-layout' - 'auto'. Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ.

Π­Ρ‚ΠΎΠ³ΠΎ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ нСдостаточно, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ПА ΠΈΠΌΠ΅Π» доступ ΠΊΠΎ всСму содСрТимому Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π΄ΠΎ опрСдСлСния ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ структуры, ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ шага.

Π¨ΠΈΡ€ΠΈΠ½Π° столбцов опрСдСляСтся Ρ‚Π°ΠΊ:

1

ВычисляСтся минимальная ΡˆΠΈΡ€ΠΈΠ½Π° содСрТимого (MCW) ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ячСйки: Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ содСрТимоС ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ любоС количСство строк, Π½ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ бокс ячСйки. Если спСцифицированная 'width' (W) ячСйки большС, Ρ‡Π΅ΠΌ MCW, W являСтся минимальной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ячСйки. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ MCW это минимальная ΡˆΠΈΡ€ΠΈΠ½Π° ячСйки.

Π’Π°ΠΊ ΠΆΠ΅ вычисляСтся "максимальная" ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ячСйки: Π·Π°Ρ‚Π΅ΠΌ содСрТимоС форматируСтся Π±Π΅Π· Ρ€Π°Π·Ρ€Ρ‹Π²ΠΎΠ² строк, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚Π΅Ρ… Ρ€Π°Π·Ρ€Ρ‹Π²ΠΎΠ² строк, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ явно.

2Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ столбца опрСдСляСтся максимальная ΠΈ минимальная ΡˆΠΈΡ€ΠΈΠ½Π° столбца ΠΈΠ· Ρ‚Π΅Ρ… ячССк, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ этот столбСц. ΠœΠΈΠ½ΠΈΠΌΡƒΠΌ - это Ρ‚Π° ΡˆΠΈΡ€ΠΈΠ½Π°, которая трСбуСтся для ячСйки с самой большой минимальной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ (ΠΈΠ»ΠΈ 'width' столбца, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ большС). ΠœΠ°ΠΊΡΠΈΠΌΡƒΠΌ - это максимальная ΡˆΠΈΡ€ΠΈΠ½Π°, которая трСбуСтся для ячСйки с самой большой максимальной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ (ΠΈΠ»ΠΈ 'width' столбца, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ большС).

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

Π­Ρ‚ΠΎ Π·Π°Π΄Π°Ρ‘Ρ‚ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ столбца. Π¨ΠΈΡ€ΠΈΠ½Π° столбцов влияСт Π½Π° ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Ρ‚Π°ΠΊ:

1

Если свойство 'width' элСмСнтов 'table' ΠΈΠ»ΠΈ 'inline-table' ΠΈΠΌΠ΅Π΅Ρ‚ спСцифицированноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (W), ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ 'auto', вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π±ΡƒΠ΄Π΅Ρ‚ большС W ΠΈ минимальной ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰Π΅ΠΉΡΡ для всСх столбцов плюс Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ Ρ€Π°ΠΌΠΊΠΈ ячССк (MIN).

Если W большС, Ρ‡Π΅ΠΌ MIN, излишняя ΡˆΠΈΡ€ΠΈΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ распрСдСлСна ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами.

2Если элСмСнты 'table' ΠΈΠ»ΠΈ 'inline-table' ΠΈΠΌΠ΅ΡŽΡ‚ 'width: auto', вычислСнная ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚ большС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ самого большого ΠΈΠ· содСрТащих Π±Π»ΠΎΠΊΠΎΠ² Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ MIN. Однако, Ссли максимальная ΡˆΠΈΡ€ΠΈΠ½Π°, трСбуСмая для столбцов плюс Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ячССк ΠΈΠ»ΠΈ Ρ€Π°ΠΌΠΊΠΈ (MAX) мСньшС, Ρ‡Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Π° содСрТащСго Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ MAX.

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ значСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбца ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊ ΡˆΠΈΡ€ΠΈΠ½Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Если Ρ‚Π°Π±Π»ΠΈΡ†Π° ΠΈΠΌΠ΅Π΅Ρ‚ 'width: auto', ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ Π΄Π°ΡŽΡ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбца, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ПА Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ Π²Ρ‹Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ. (ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, это Π½Π΅ всСгда Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ: Ссли ΡˆΠΈΡ€ΠΈΠ½Π° столбца '110%', ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΎ.)

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Π’ этом Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ΅ ряды (ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ рядов) ΠΈ столбцы (ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ столбцов) ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΈ сами ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ содСрТащихся Π² Π½ΠΈΡ… ячССк. Установка ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбца ΠΌΠΎΠΆΠ΅Ρ‚ нСявно Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° высоту ряда, ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚.

Высота Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ задаётся свойством 'height' элСмСнта 'table' ΠΈΠ»ΠΈ 'inline-table'. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' устанавливаСт, Ρ‡Ρ‚ΠΎ высота являСтся суммой высоты рядов плюс Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ячССк ΠΈΠ»ΠΈ Ρ€Π°ΠΌΠΊΠΈ. Π›ΡŽΠ±Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ значСния ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΡŽΡ‚ высоту явно; Ρ‚Π°Π±Π»ΠΈΡ†Π°, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΡˆΠ΅ ΠΈΠ»ΠΈ ΠΊΠΎΡ€ΠΎΡ‡Π΅, Ρ‡Π΅ΠΌ высота Π΅Ρ‘ рядов. CSS2 Π½Π΅ спСцифицируСт Π²Ρ‹Π²ΠΎΠ΄ Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° спСцифицированная высота Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ отличаСтся ΠΎΡ‚ высоты содСрТимого, особСнно ΠΊΠΎΠ³Π΄Π° высота содСрТимого ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ высоту; ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ излишнСС пространство Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ рядами для заполнСния высоты Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹; ΠΈΠ»ΠΈ, Ссли высота содСрТимого прСвосходит ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ высоту Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π»ΠΈ ПА ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Π‘ΡƒΠ΄ΡƒΡ‰ΠΈΠ΅ вСрсии CSS ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это.

Высота бокса элСмСнта 'table-row' вычисляСтся ΠΎΠ΄Π½ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎ сразу послС получСния ΠŸΠΠ³Π΅Π½Ρ‚ΠΎΠΌ всСх ячССк ряда: это максимальная спСцифицированная рядом 'height' ΠΈ минимальная высота (MIN), затрСбованная ячСйками. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'height' - 'auto' для 'table-row' ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ вычислСнная высота ряда - MIN. MIN зависит ΠΎΡ‚ высоты боксов ячССк ΠΈ выравнивания бокса ячСйки (ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π½Π° вычислСниС высоты строчного бокса). CSS2 Π½Π΅ опрСдСляСт, ΠΊ Ρ‡Π΅ΠΌΡƒ относятся ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ значСния 'height', спСцифицированныС для рядов ΠΈ Π³Ρ€ΡƒΠΏΠΏ рядов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Π’ CSS2 высота бокса ячСйки - это максимальноС ΠΈΠ· свойств 'height' ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ минимальная высота, трСбуСмая содСрТимым (MIN). Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' для 'height' ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ MIN. CSS2 Π½Π΅ опрСдСляСт, ΠΊ Ρ‡Π΅ΠΌΡƒ относятся ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ значСния 'height', ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ для ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

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