CSS Tables and Table Layout

Intermediate

CSS Table Layout is a two-dimensional layout model optimized for tabular data. This lesson teaches the CSS formatting and sizing behavior of tables; it does not teach HTML table semantics, header associations, captions as accessible descriptions, or ARIA authoring. Those remain owned by the HTML and accessibility curriculum.

The current CSSWG CSS Table Module Level 3 is a Working Draft dated 1 September 2026 and is explicitly marked as not ready for implementation. The stable baseline therefore comes from established CSS table behavior, while Level 3 is used to explain the current model, terminology, and areas still being standardized.

Table formatting begins with table-specific display roles

CSS can assign table formatting roles with values such as table, inline-table, table-row, table-row-group, table-column, table-column-group, table-cell, and table-caption. HTML normally supplies these roles through table elements, but CSS can also map arbitrary elements into the table model. This lesson owns the layout consequences, not the document semantics of those elements.

?

A table wrapper and table grid are distinct boxes

The Level 3 model distinguishes the table wrapper box from the table grid box. The wrapper accounts for space occupied by captions, while the table grid contains the table-internal boxes. This distinction explains why a caption is not simply another table cell and why table sizing can involve more than the row-and-column grid.

?

Rows are primary; columns are derived from the cell structure

The table model is row-primary: document rows and cells establish the structure, and the column grid is derived from how cells occupy slots, including spans. A CSS table therefore should be reasoned about as a row/column matrix rather than as independent block boxes.

?

Spanning changes the occupied table grid

A cell can cover multiple consecutive row or column slots. In HTML this is commonly expressed with rowspan and colspan. CSS Table Layout uses the resulting table grid when computing dimensions and placement. Do not confuse this with CSS Grid: the table grid is generated from table structure and follows table-specific rules.

?

Table-model fixup can create anonymous table boxes

The table model has fixup rules for malformed or incomplete internal structure. For example, table-internal boxes that are not wrapped in the required table hierarchy can cause anonymous table boxes to be generated so the formatting structure can be laid out. This is a layout correction mechanism, not a recommendation to ignore semantic HTML.

?

Table columns and column groups describe column tracks

table-column and table-column-group boxes describe columns and groups of columns. They are part of the table formatting model even though the visible cells remain the boxes that contain content. Styling a column is therefore different from placing a separate box beside the table.

?

Captions participate in table layout without becoming cells

A table-caption is an internal table role with its own placement. The current Table Level 3 model positions captions between the table margins and its borders, and the caption-side property controls the side used for the caption. HTML semantics still own what the caption means to users; CSS owns its layout position.

?

The table-layout property selects the width-layout mode

table-layout controls how table width is resolved. The auto mode permits content to participate in the automatic algorithm; fixed mode makes the horizontal layout depend on the table width, column sizing inputs, and borders or spacing rather than needing all cell contents first. The property is a table-layout mechanism, not the general CSS Sizing algorithm.

?

Fixed layout makes early width information important

In fixed table layout, the horizontal result can be established from the table width and available column information without waiting for every cell’s content to determine the columns. This makes fixed layout useful when a predictable horizontal structure matters, but it does not remove overflow or text-processing behavior from the other CSS owners.

?

Automatic layout uses content-dependent table measures

Automatic table layout allows cell and column measures to influence the final width distribution. Long unbreakable content, preferred sizes, specified widths, and available width can therefore change the resulting columns. This is where table layout most visibly differs from fixed mode.

?

Intrinsic content still matters, but table sizing has its own algorithm

General CSS Sizing owns the meaning of intrinsic sizes such as min-content and max-content. Table Layout owns how cell and column measures are collected and distributed inside the table grid. Keeping those boundaries prevents the table lesson from duplicating the general sizing lesson.

?

Separate borders and collapsed borders are different models

border-collapse selects the table border model. In separate mode, cells have distinct borders and border-spacing can create space between them. In collapsed mode, adjacent borders participate in a shared conflict-resolution process, so the visible result is not the simple sum of two independent borders.

?

Border spacing belongs to the separated-borders model

When border-collapse is separate, border-spacing controls the horizontal and vertical spacing between cell borders. It is a table-specific spacing mechanism and should not be taught as a replacement for margins or padding, which remain owned by the Box Model lesson.

?

Collapsed borders require conflict resolution

In collapsed-borders mode, neighboring borders are combined rather than painted independently. The Table specification defines conflict-resolution rules so the user agent can determine which border style, width, and other characteristics win at shared edges. This is table-specific border behavior; the general border property remains owned by Backgrounds and Borders.

?

Vertical alignment inside cells is table-specific application of shared alignment

Table cells participate in the shared Box Alignment environment, while table layout determines the cell’s available space and row sizing. The table lesson should show how alignment behaves inside a cell without taking ownership of the shared alignment vocabulary.

?

visibility: collapse has table-track behavior

The table model has special behavior for visibility: collapse on table cells and table tracks. It can suppress a row or column while preserving the table’s layout logic in ways that differ from simply making an arbitrary box invisible. This specialized behavior belongs here, while general visibility remains a broader CSS mechanism.

?

Tables remain a distinct layout choice from Grid

Both tables and Grid create two-dimensional arrangements, but they solve different problems. Tables derive a grid from tabular row/cell structure and content relationships; Grid lets the author define tracks and place layout items directly. Use table layout for tabular data presentation and Grid for general two-dimensional page/component layout.

?

Table layout interacts with writing modes without owning writing-mode semantics

Table rows and columns participate in the writing environment established by the document. Logical directions and writing modes remain owned by Writing Modes; Table Layout explains only how the table grid and its dimensions operate within that environment. This prevents duplicate explanations of direction and flow-relative geometry.

?

Table sizing distributes width across columns

The table algorithm computes available width and distributes it through column constraints. A specified table width does not simply become the width of each row or cell; the table grid must reconcile column measures, borders or spacing, and the available inline size.

?

Rows are sized from their cells and row constraints

Row height is not an independent grid-track algorithm like CSS Grid. Cell content, row constraints, vertical alignment, and available table height can all participate in the table’s row sizing process. Keep general block sizing and text layout in their established owners.

?

Table semantics and CSS table layout are deliberately separate

An HTML table can carry semantic relationships among headers, data cells, row groups, captions, and other structures. CSS Table Layout does not redefine those relationships. It defines how the corresponding boxes are generated, measured, positioned, and painted. This separation is a deliberate curriculum boundary.

?

Fragmentation belongs to the Fragmentation / Paged Print owner

CSS Table Module Level 3 contains material about breaking tables across fragmentainers and repeating headers across pages. The curriculum plan deliberately reserves the broader fragmentation and paged-print model for the Fragmentation / Paged Print lesson. Here, table fragmentation is marked as a boundary rather than duplicated in depth.

?

Current specification status must remain visible

CSS Table Module Level 3 is a CSSWG Working Draft dated 1 September 2026 and is marked not ready for implementation. The lesson therefore uses it as the current specification model while distinguishing stable, widely implemented table behavior from developing specification details. CSS 2.1 remains an important stable normative baseline for established table properties and algorithms.

?