CSS 3 Tables Algorithms
This version:
http://www.w3.org/Style/Group/css3-src/css3-template/[VERSION]
Latest version:
http://www.w3.org/TR/css3-template
Previous version:
[http://www.w3.org/PreviousVersionURI]
Editors:
Saloni Mira Rai <salonir@microsoft.com>
Authors:
Shuo Dong <shuodong@microsoft.com>
Erika Doyle <edoyle@microsoft.com>
Former Editors:
Markus Mielke <mmielke@microsoft.com>
Abstract
The intent of this document is to provide a set of detailed algorithms which describe certain table layout behaviors that are common to most major browsers today and propose additional standard behaviors in order to achieve full browser interoperability in table layout. The Table layout algorithm is one of the most used and most difficult to understand features in HTML, as there are no common behavior descriptions in either HTML or CSS. The goal of this document is to introduce a focused discussion around a unified table behavior with the goal of getting agreement on a set of scenarios for integration into the CSS 3 Tables specification.
This document is not complete but it tries to capture the most common scenarios in which browsers have achieved interoperability. Our hope is that this document is seen as a starting point to provide at least a partial definition of table layout behavior, ten years after its introduction into the market.
Captions in visual formatting model
Captions above or below a 'table' element are formatted very much as if they were a block element before or after the table, except that (1) they inherit inheritable properties from the table, (2) they are not considered to be a block box for the purposes of any 'compact' or 'run-in' element that may precede the table, and (3) they use the width of the anonymous box as input for its available width calculations.
The width of the anonymous box is the border-edge width of the table box inside it, as described by CSS 2.1 section 17.4. Percentages on 'width' and 'height' properties of the table are relative to the anonymous box's containing block, not the anonymous box itself.
This algorithm follows the CSS 2.1 specification of the caption-side property, where the only possible values are top, bottom and inherit. CSS 3 will also add left and right. Thus in the algorithm presented here, the caption width will not affect the table auto layout algorithm in any way. However, the output of the table auto layout algorithm may affect the sizing of table caption, since it determines the anonymous table box size.
In the following example, the 'caption-side' property places captions on top of tables. The caption will be as wide as the anonymous box of the table, and caption text will be left-justified.
caption { caption-side: top;
width: auto;
text-align: left }
Example of the visual model:
Note: CSS3 might want to define a property that enables the developer to use the table's parent width instead of the anonymous box width as an input in the caption width algorithm.
Considerations for the caption width algorithm
- Caption has either auto width or a specified width unit value.
- Padding, margin and border should behave like a normal block box and are covered by the CSS Box Model calculations.
Inputs
- Table used width
- Caption specified width (if any)
Output
Caption's used width
Naming conventions
|
Name |
Explanation |
|
captionSpecifiedWidth |
Input provided by the width property. |
|
captionUsedWidth |
Output that determines the width of the caption algorithm. |
|
contentMinWidth |
The minimal unit of breakable text (in most cases, the smallest word in the caption). |
|
tableUsedWidth |
Input provided by table auto layout algorithm. This is the width actually used by the table. |
Algorithm
The caption sizing algorithm can be summarized like this (ignoring possible constraints set by the min-width and max-width properties) [1]:
IF
captionSpecifiedWidth exist
captionUsedWidth =
captionSpecifiedWidth
ELSE
captionUsedWidth
= tableUsedWidth
Observations
- If captionSpecifiedWidth < contentMinWidth, caption's content may stick out of the caption's box (overflow will then apply).
- When captionSpecifiedWidth > tableUsedWidth, caption and its content may stick out of the table's inner box (i.e., the caption will be wider than the table).
- If tableUsedWidth < contentMinWidth overflow will occur. This is the same as with normal block level elements
- Specified Percentage width will be calculated based on tableUsedWidth
In the absence of a specified width, the caption is sized to the tableUsedWidth, which in general follows the behavior of block level elements as described in 10.3.3 in the CSS2.1 specifications:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + scrollbar width (if any) = tableUsedWidth
If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + scrollbar width (if any) (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the tableUsedWidth, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.
If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
If there is exactly one value specified as 'auto', its used value follows from the equality.
If 'width' is set to 'auto', all other 'auto' values become '0' and 'width' follows from the resulting equality.
If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the tableUsedWidth.
The "scrollbar width" value is only relevant if the user agent uses a scrollbar as its scrolling mechanism. See the definition of the 'overflow' property.
Automatic Table Layout Algorithm Overview
The design of the following algorithm is based upon the CSS 2.1 recommended algorithm (http://www.w3.org/TR/CSS21/tables.html#width-layout), the HTML 4.1 recommended algorithm (http://www.w3.org/TR/REC-html40/appendix/notes.html#h-B.5.2 ), and an interoperability analysis of Internet Explorer 7, Firefox 3 Alpha, Opera 9, and Safari 3 Beta. The goal of this design is to stick to the CSS 2.1 and HTML 4.1 recommendations as close as possible while also accommodating the common behaviors of the major browsers.
The algorithm proposed in this document uses several types of inputs: the intrinsic characteristics of table cells (i.e., the minimum and maximum widths of their content), the value of each cells column-spanning (colspan) attribute (if any is set), and the specified width, minimum width (min-width) and maximum width (max-width) of each table cell and the table itself. The output of the algorithm is the final used width of the table and each of its columns.
List of scenarios handled by this algorithm
This document is considering the following author inputs into the algorithm:
|
Cell |
Unit value |
Percentage |
Auto |
|
min-width |
|
N/A* |
|
|
max-width |
|
N/A* |
|
|
Width |
|
|
|
* Due to the current lack of implementations, percentage values are not defined
|
Col/ColGroup |
Unit value |
Percentage |
Auto |
|
min-width |
Cascaded ** |
Cascaded |
Cascaded |
|
max-width |
Cascaded |
Cascaded |
Cascaded |
|
Width |
Cascaded |
Cascaded |
Cascaded |
** A Cell value will overwrite Col value, which will overwrite ColGroup as part of the cascade. This is an alternative proposal to the current CSS2.1 definition
|
Table |
Unit value |
Percentage |
Auto |
|
min-width |
|
|
|
|
max-width |
|
|
|
|
Width |
|
|
|
The output will be:
The tables final used width
Each columns final used width
This will enable the following scenarios:
Table with the above specified inputs
Column-spanning scenarios, where the width on column spans can be expressed in a unit value, auto or percentages
Simple nested table scenarios, as long as the intrinsic content width can be determined
Still open issues:
Issue #1: Overlapping spans (these work but do not produce an exact result)
Issue #2: Border width(not taken into account, as it should be an easy addition)
Issue #3: Cell padding (in both specified unit and percent values)
Issue #4: Cellspacing / border-spacing
Algorithm Summary
Table auto layout calculation is achieved with the following steps.
1. Calculate each cells minimum width, preferred width and preferred percent by examining the cells content and its width/min-with/max-width properties.
2. Identify the minimum width, preferred width and preferred percent of each column in the table by finding the largest minimum width, largest preferred width and largest preferred percent among all cells in the column. In this step, the algorithm first goes over all cells with colspan equal to one, and then distributes the minimum width, preferred width and preferred percent of each cell with colspan > 1 among the columns it spans over.
3. With each columns minimum width, preferred width and preferred percent, calculate the tables minimum width and preferred width
4. Determine the tables final used width by attempting to satisfy each columns preferred width (or preferred percent if it has one) to the greatest extent possible.
5. Decide how to distribute the tables final used width among all the columns. During this process, columns with specified percentage width are given first priority, followed by the columns with specified unit value width. Columns with unspecified width (or width set to auto) has the lowest priority.
6. Distribute any rounding errors introduced during distribution in the previous step and adjust each columns width accordingly. (This step is currently not part of this proposal.)
What follows is the proposed algorithm in finer detail.
We will color code Terms that we will introduce for the first time.
1. Calculate each cells minimum and preferred width
This step calculates table width limitation and preference at the cell level. These values are computed for each cell based on its intrinsic minimum and preferred widths and its specified width, min-width and max-width (if any).
1.1 Cell Intrinsic Min width (cellIntrinsicMinWidth) and Cell Intrinsic Preferred Width (cellIntrinsicPreferredWidth)
cellIntrinsicMinWidth and cellIntrinsicPreferredWidth should be calculated based on the regular CSS2.1 shrink to fit block model calculations (see sections 10.3.5 and 10.3.7 for further details).
1.2 Cell Min Width (cellMinWidth)
cellMinWidth = max(cellIntrinsicMinWidth, cellSpecifiedMinWidth )
. . . where cellSpecifiedMinWidth is a cells specified unit-value min-width.
Each cells minimum width sets the lower limit for that cell. (A cell can never be narrower than its minimum width.)
This is a design decision drawn from a backwards compatibility / interoperability analysis. It could be argued that display: table-cell does have an overflow property and that it is thus not necessary to always honor minimum width. The algorithm here, however, suggests ignoring overflow property on table cell in auto layout table and respect minimum width for best backward compatibility and readability. This of course, is open for discussion.
The cells minimum width is calculated before the cells preferred width, so that the minimum width can set a lower limit for the preferred width.
1.3 Cell Preferred Width (cellPreferredWidth)
When a cell has specified unit value width, its preferred width is:
cellPreferredWidth = max(cellMinWidth, min(cellSpecifiedMaxWidth, cellSpecifiedWidth ))
When a cell has no specified unit value width, its preferred width is:
cellPreferredWidth = max(cellMinWidth, min(cellSpecifiedMaxWidth, cellIntrinsicPreferredWidth ))
. . . where cellSpecifiedMaxWidth is a cells specified unit value max-width and cellSpecifiedWidth is a cells specified unit value width.
Each cells preferred width is the width the algorithm tries its best to satisfy. The preferred width is not an upper limit of the cell because other cells in the same column and the tables overall preferred width could cause the cell to be assigned a width exceeding this value.
1.4 Cell Preferred Percent (cellPreferredPercent)
cellPreferredPercent = cellSpecifiedWidth in percent
. . .where cellPreferredPercent is only defined when the cell has specified width in percent.
Issues
Issue #5: Specified percentage min-width and max-width are not taken into consideration here. Their impact on the algorithm will be defined in a future version of the document. Step 1.3 presents itself as a good place to add in their impact
Issue #6: At the current stage, the algorithm hasn't considered any padding, borders or border-spacing. These things will impact the calculation of cellMinWidth / cellMaxWidth according to the CSS box model and can be added in a future version of this document
2 Identify the minimum width, preferred width and preferred percent of each column
In this step, the algorithm collects the width limitation and preference on a cell level and aggregates them up to the column level. The goal of this step is to identify the minimum width, preferred width and preferred percent of each column.
The algorithm first calculates columnMinWidth, columnPreferredWidth, columnPreferredPercent based solely on cells with colspan ==1. It then adjusts these three values with the minimum, preferred width and preferred percent of colspan > 1 cells.
2.1 Calculate columnMinWidth, columnPreferredWidth, columnPreferredPercent based on colspan == 1 cells
2.1.1 Column Minimum Width (columnMinWidth)
columnMinWidth = max (cellMinWidth of all colspan == 1 cells in the column)
The columns minimum width sets the lower limit on columns used width. The column can never be smaller than its minimum width, in order to prevent overflow of the text into neighboring cells. This is a design decision to enable better readability.
2.1.2 Column Preferred Width (columnPreferredWidth)
columnPreferredWidth = max (cellPreferredWidth of all colspan ==1 cells in the column)
The columns preferred width defines the width which the algorithm tries to honor.
2.1.3 Column Preferred Percent (columnPreferredPercent)
Only columns with at least one cell with specified width in percent will have a columnPreferredPercent value It is found by taking the largest specified percent cell width:
columnPreferredPercent = max (cellPreferredPercent of all colspan == 1cells in the column)
To better understand the behavior, the algorithm defines three types of columns:
a. auto column: all cells in the column have either width: auto or no specified width
b. specified unit value column: at least one cell in the column has a specified width in unit value and no cell has specified width in percent. (Specified width can be cascaded or inline.)
c. specified percent column: at least one cell in the column has a specified width in percent
A specified percentage cell has a higher priority than a specified unit value cell. For instance, one specified percentage width cell will make the column a specified percent column even if all the other cells have specified unit value width.
Only non-negative percentage values are taken into consideration. It may happen that the percentage value exceeds 100%, or the sum of all columns specified percentage value exceeds 100%. Cases like these will be handled in step 5, when columns are assigned their final used widths.
2.2 adjust columnMinWidth, columnPreferredWidth, columnPreferredPercent
The proposed algorithm handles cell with colspan > 1 one by one without any optimization for overlapping colspan scenarios. An optimized algorithm will be proposed in a future version of this document.
The algorithm first checks to see if any cells spanning multiple columns will affect the minimum width, preferred width, or preferred percent widths of the columns they span. If such is the case, theses widths of the multi-column cell are distributed among the corresponding width values of each of the columns it spans. There are several ways how this can be done, but the method outlined in this spec was chosen based on browser interoperability.
In general, the algorithm will distribute the impact evenly or proportionally with either (1) each columns preferred width, (2) the difference between each columns preferred width and minimum width (i.e., preferred width min width), or (3) each columns minimum width, depending on the case. When the algorithm distributes the impact of a multi-column cell, the columns minimum and preferred widths are the sole contributors to the distribution its specified width is not directly figured in. This is because the impact of a multi-column cells specified unit value width has already been calculated into its columns preferred width. The impact of a multi-column cells specified percentage width will be distributed proportionally to each non-percentage column that is spanned by the multi-column cell.
When calculating the impact of the multi-column cell on the columns, the algorithm adjusts the columns minimum width first, preferred width second and preferred percent last. This follows the guidelines for min/max width calculations of CSS2.1 (section 10.4). This enables the preferred width to be restricted by the minimum width. The distribution of a multi-column cells preferred percentage width will now depend on the newly adjusted minimum and preferred widths of its columns.
Issues
Issue #7: As mentioned above, the algorithm hasn't considered any padding, borders or border-spacing. These inputs will impact the calculation of columnMinWidth, columnPreferredWidth and columnSpecifiedWidth according to CSS box model, and can be added in future version of this document
3. Calculate tableMinWidth/tablePreferredWidth
This step calculates the tables minimum and preferred widths.
3.1 Table Minimum Width (tableMinWidth)
tableMinWidth = sum(columnMinWidth)
3.2 Table Preferred Width (tablePreferredWidth)
As the following steps demonstrate, tablePreferredWidth is only used in the absence of a table specified width, when the table is sized according to the shrink-to-fit equation. The calculation of tablePreferredWidth could therefore be ignored in some cases to optimize performance.
There are three cases to address when calculating tablePreferredWidth:
a. When there is no specified percent columns,
The preferred table width is simply the sum of columnPreferredWidths.
tablePreferredWidth = sum(columnPreferredWidth)
b. When there is at least one specified percent column,
When there are specified percent columns, the algorithm uses the largest column columnPreferredWidth-to-columnPreferredPercent ratio to determine the table width preferred by the percent columns:
percentColumnPreferredTableWidth = max (columnPreferredWidth/columnPreferredPercent).
Next the algorithm pretends that the non-percent columns (i.e., the auto and specified unit value columns) were just one big percent column with a preferred percentage equal to (100% - percentColumnTotalSpecifiedPercent), and uses that value to find the ratio of columnPreferredWidth-to-columnPreferredPercent, which represents the table preferred width of the non-percent columns:
NonPercentColumnPreferredTableWidth = nonPercentColumnTotalPreferredWidth / (100% - percentColumnTotalPreferredPercent)
The final tablePreferredWidth is the larger one of the two values above
tablePreferredWidth = max (percentColumnPreferredTableWidth, nonPercentColumnPreferredTableWidth)
When the sum of preferred percentages exceeds 100%, the algorithm recommends that the browser ignore all specified percentages coming after the sum reaches 100% and regard them as having 0% specified percent width (though this doesn't necessarily prevent them from being rendered).
When there are only specified percent columns and the sum of the percent is smaller than 100%, step 5 will provide a solution to distribute extra table used width.
c. When percent columns are demanding the full table width (100%) and there are also non-percent columns
Because the algorithm does not allow the sum of specified percentages to be larger than 100%, a special case might arise where the percent columns are demanding the full table width (100%) but there are also non-percent columns which require at least their minimum width. In this case, the tables preferred width could never be satisfied. The algorithm treats tables preferred width as infinitely large
tablePreferredWidth = INFINITE
Issue:
Issue #8: Again in this step, the CSS padding, margin, border and border-spacing properties and HTML cellpadding and cellspacing attributes will all have an impact on the calculations, and need to be detailed in a future version of this document
4. Determine the tables final used width (tableUsedWidth)
This step must differentiate two cases: (1) when the table has a specified width, and (2) when the table is auto-sized.
4.1 When the table has a specified width
In this case, the tables specified width is taken as its used width, unless that width is smaller than the tables minimum width, in which case its minimum width becomes the tables final used width. If the table has a specified width in percentage, the algorithm converts this to a unit value based on the tables available width.
tableUsedWidth = max (tableMinWidth, tableSpecifiedWidth)[2]
4.2 when the table has auto (non-specified) width
In this case, the algorithm uses the shrink-to-fit rule (using the tableminWidth and tablePreferredWidth values found in step 3) to determine the tables used width:
tableUsedWidth = min(max(tableMinWidth, tableAvailableWidth), tablePreferredWidth)[3]
. . . where tableAvailableWidth is the width of the tables containing block.
4.3 Adjust tableUsedWidth against specified min-width/max-width
This algorithm strictly follows the min-width/max-width rule defined in the CSS 2.1 spec (section 10.4) to adjust the tables used width by its specified min-width and max-width as needed. When these values are in percentages, the algorithm converts them to a unit value based on the tables available width.
4.3.1 Check against specified max-width
If tableUsedWidth is larger than the specified max-width, use max-width as the specified width and recalculate tableUsedWidth with formula in 4.1.
4.3.2 Check against specified min-width
If tableUsedWidth is smaller than the specified min-width, use min-width as the specified width and recalculate tableUsedWidth with formula in 4.1.
Issue
Issue #9: Border, margin and padding will have an impact on this step (as is specified in the CSS box model, and this needs to be accounted for in a future version of this document
5. Distribute the tables final used width among all of the columns
Ideally, each column should get its preferred width. However, tableUsedWidth may not be big enough or small enough for the satisfactory result. We follow three rules here when determining column used width (columnUsedWidth)
Rule No.1 When assigning preferred widths, specified percent columns have a higher priority than specified unit value columns, which have a higher priority than auto columns.
Rule No.2- Columns in the same category follow the same distribution method. For example, they all get columnMinWidth or they all get columnPreferredWidth, etc.
There is one exception to this rule. When applying columnPreferredPercent on a percent column, the computed unit value may be smaller than columnMinWidth. In this case, the column will be assigned its columnMinWidth though the percent column group as a whole is still regarded as being assigned the columnPreferredWidth.
Rule No.3 The sum of columnUsedWidth should be equal to tableUsedWidth
All three types of columns have the following possible used widths.
a. columnMinWidth
b. columnPreferredWidth (for auto and specified unit columns) or columnPreferredPercent (for specified percent columns)
c. columnMinWidth + delta
A value between columnMinWidth and columnPreferredWidth / columnPreferredPercent
d. columnPreferredWidth + delta or columnPreferredPercent + delta
A value larger than columnPreferredWidth / columnPreferredPercent
Based upon rule No.1, the algorithm allows for the following combinations:
|
|
specified percent column |
specified unit value column |
auto column |
|
1 |
columnMinWidth |
columnMinWidth |
columnMinWidth |
|
2 |
columnMinWidth+delta |
columnMinWidth |
columnMinWidth |
|
3 |
columnPreferredPercent |
columnMinWidth |
columnMinWidth |
|
4 |
columnPreferredPercent |
columnMinWidth+delta |
columnMinWidth |
|
5 |
columnPreferredPercent |
columnPreferredWidth |
columnMinWidth |
|
6 |
columnPreferredPercent |
columnPreferredWidth |
columnMinWidth+delta |
|
7 |
columnPreferredPercent |
columnPreferredWidth |
columnPreferredWidth |
|
8 |
columnPreferredPercent |
columnPreferredWidth |
columnPreferredWidth + delta |
|
9 |
columnPreferredPercent |
columnPreferredWidth + delta |
DOES NOT EXIST |
|
10 |
columnPreferredPercent+delta |
DOES NOT EXIST |
DOES NOT EXIST |
Detailed explanations of these distribution combinations are provided at the end of this section. In the absence of any of the three column types, the algorithm behaves as if the absent columns preferred and minimum widths are zero.
Assignment of values
In order to fulfill Rule No.3, so that the sum of the column used widths completely fill the used width of the table, we apply the following assignments:
a. Assign combination 1 to each column
If sum(columnUsedWidth) is equal to tableUsedWidth, use combination 1.
Otherwise continue
b. Assign combination 3 to each column
If sum(columnUsedWidth) is equal to tableUsedWidth, use combination 3.
Otherwise, if the sum is smaller, use combination 2.
Otherwise, continue.
c. Assign combination 5 to each column
If sum(columnUsedWidth) is equal to tableUsedWidth, use combination 5.
Otherwise, if the sum is smaller, use combination 4.
Otherwise, continue.
d. assign combination 7 to each column.
If sum(columnUsedWidth) is equal to tableUsedWidth, use combination 7.
Otherwise, if the sum is smaller, use combination 6.
Otherwise, continue.
e. If there is any auto column, use combination 8.
otherwise, if there is any specified unit value column, use combination 9.
otherwise, if there is any specified percent column, use combination 10.
Please note that this decision method requires several passes of column width assignments, and UAs are free to adopt a different algorithm requiring fewer steps.
What follows are more detailed explanations of each distribution combination.
Combination 1
All columns get their columnMinWidth.
|
|
specified percent column |
specified unit value column |
auto column |
|
1 |
columnMinWidth |
columnMinWidth |
columnMinWidth |
Combination 2
Specified unit value column and auto column get their columnMinWidth. The rest of tableUsedWidth should be distributed to specified percent column in proportion to their columnPreferredPercent.
|
|
specified percent column |
specified unit value column |
auto column |
|
2 |
columnMinWidth+delta |
columnMinWidth |
columnMinWidth |
Combination 3
Specified unit value column and auto column get their columnMinWidth. Specified percent columns get their columnPreferredPercent.
|
|
specified percent column |
specified unit value column |
auto column |
|
3 |
columnPreferredPercent |
columnMinWidth |
columnMinWidth |
Combination 4
Specified percent columns get their columnPreferredPercent and auto columns get their columnMinWidth.
Specified Unit Value columns are first assigned their columnMinWidth. The remaining of tableUsedWidth is distributed to specified unit value columns in proportion to the difference between columnPreferredWidth and columnMinWidth (columnPreferredWidth - columnMinWidth).
|
|
specified percent column |
specified unit value column |
auto column |
|
4 |
columnPreferredPercent |
columnMinWidth+delta |
columnMinWidth |
For instance, suppose there are two specified unit value columns and the remaining tableUsedWidth is 40px. Here is how we determine each columns used width.
|
|
column 1 |
column 2 |
|
columnMinWidth |
5px |
70px |
|
columnPreferredWidth |
15px |
100px |
|
columnPreferredWidth - columnMinWidth |
10px |
30px |
|
delta |
10px (= 40px * 1/4) |
30px (= 40px * 3/4) |
|
columnUsedWidth |
15px (=5px + 10px) |
100px (= 70px + 30px) |
Combination 5
Specified percent columns get their columnPreferredPercent. Specified unit value columns get their columnPreferredWidth and auto columns get columnMinWidth.
|
|
specified percent column |
specified unit value column |
auto column |
|
5 |
columnPreferredPercent |
columnPreferredWidth |
columnMinWidth |
Combination 6
Specified percent columns get their columnPreferredPercent and Specified unit value columns get their columnPreferredWidth
Auto columns are first assigned their columnMinWidth. The remaining of tableUsedWidth is distributed to auto columns in proportion to the difference between columnPreferredWidth and columnMinWidth (columnPreferredWidth - columnMinWidth). (The distribution is very similar to combination 4).
|
|
specified percent column |
specified unit value column |
auto column |
|
6 |
columnPreferredPercent |
columnPreferredWidth |
columnMinWidth+delta |
Combination 7
Specified percent columns get their columnPreferredPercent. Specified unit value columns and auto columns all get their columnPreferredWidth.
|
|
specified percent column |
specified unit value column |
auto column |
|
7 |
columnPreferredPercent |
columnPreferredWidth |
columnPreferredWidth |
Combination 8
Specified percent columns get their column PreferredPercent and Specified unit value columns get their columnPreferredWidth.
The remaining tableUsedWidth is distributed to auto columns in proportion to their columnPreferredWidth.
|
|
specified percent column |
specified unit value column |
auto column |
|
8 |
columnPreferredPercent |
columnPreferredWidth |
columnPreferredWidth + delta |
For instance, suppose there are two auto columns and the remaining tableUsedWidth is 160px. Here is how we determine each columns used width.
|
|
column 1 |
column 2 |
|
columnPreferredWidth |
30px |
90px |
|
columUsedWidth |
40px = 160 * |
120px = 160 *3/4 |
Combination 9
This is used when there is no auto columns and the sum of columnPreferredPercent converted to unit value plus columnPreferredWidth is smaller than tableUsedWidth. In this case, each specified percent columns are assigned their columnPreferredPercent. The remaining of tableUsedWidth is assigned to specified unit value columns in proportion to their columnPreferredWidth.
|
|
specified percent column |
specified unit value column |
auto column |
|
9 |
columnPreferredPercent |
columnPreferredWidth + delta |
DOES NOT EXIST |
Combination 10
This is used when there is only specified percent column and the sum of columnPreferredPercent converted to unit value are smaller than tableUsedWidth. (It could only happen when the sum of columnPreferredPercent is smaller than 100%). In this case, each specified percent columns are assigned a width in proportion with their columnPreferredPercent.
|
|
specified percent column |
specified unit value column |
auto column |
|
10 |
columnPreferredPercent+delta |
DOES NOT EXIST |
DOES NOT EXIST |
6. Distribute any rounding errors
At this stage the UA only has to deal with rounding errors that have arisen as part of multiplications/ divisions and other adjustments during the calculations. These kinds of errors occur when the sum of the all columns used widths is not equal to the tables used width. This document does not propose guidelines on how to implement rounding errors. The Working Group might decide to give a preferred treatment of rounding errors as part of this document.
Appendix A: comparison with
Davids proposal regarding step 5
Here is Davids proposal in comparison with proposal outlined here
(in green).
The idea is, for a given table width, to either assign one of the following sets of column widths or a weighted average of two adjacent sets of widths. It is not possible to assign values smaller than the smallest set of widths. However, see below for handling the case of assigning values larger than the largest set of widths. From smallest to largest, these are:
1. Assign all columns their min width.
equivalent to Combination 1
the weighted average of 1 and 2 is equivalent to Combination 2
2. Assign all columns with percentage widths their percentage width, and all other columns their min width.
equivalent to Combination 3
the weighted average of 2 and 3 is equivalent to Combination 4
3. Assign all columns with percentage widths their percentage width, all columns with specified coordinate widths their pref width (since it doesn't matter whether it's the largest contributor to the pref width that was the specified contributor), and all other columns their min width.
equivalent to Combination 5
the weighted average of 3 and 4 is equivalent to Combination 6
4. Assign all columns with percentage widths their specified width, and all other columns their pref width.
equivalent to Combination 7
If the table's width is *larger* than what we would assign in (4), then we expand the columns:
a) if any columns without a specified coordinate width or percent width have nonzero pref width, in proportion to pref width
equivalent to Combination 8
b) otherwise, if any columns without percent width have nonzero pref width, in proportion to pref width
equivalent to Combination 9
c) otherwise, if any columns have nonzero percentage widths, in proportion to the percentage widths
equivalent to Combination 10
d) otherwise, equally.
It is only possible when table is all empty. In that case, it doesn't make sense to calculate columnUsedWidth, which should all be 0.
The table's width cannot be smaller than [1].
|
Test Case |
Gran Paradiso Alpha |
Firefox |
Opera |
Safari |
Internet Explorer |
|
1. captionUsedWidth = captionSpecifiedWidth |
Yes |
Yes |
Yes |
Yes |
No |
|
2. captionUsedWidth = tableUsedWidth |
Yes |
Yes |
Yes |
No |
No |
|
Test Case |
Gran Paradiso Alpha |
Firefox |
Opera |
Safari |
Internet Explorer |
|
1. tableUsedWidth = tableSpecifiedWidth |
Yes |
Yes |
Yes |
Yes |
Yes |
|
2. tableUsedWidth = tableMinWidth |
Yes |
Yes |
Yes |
Yes |
Yes |
|
Test Case |
Gran Paradiso Alpha |
Firefox |
Opera |
Safari |
Internet Explorer |
|
3. tableUsedWidth = tableMinWidth |
Yes |
Yes |
Yes |
Yes |
Yes |
|
4. tableUsedWidth = tableAvailableWidth |
Yes |
Yes |
Yes |
Yes |
Yes |
|
5. tableUsedWidth = tableMaxWidth (preferred width) |
Yes |
Yes |
Yes |
Yes |
Yes |