Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS modules: CSS table #33236

Merged
merged 12 commits into from
Apr 25, 2024
1 change: 1 addition & 0 deletions files/en-us/web/css/border-collapse/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -185,3 +185,4 @@ table td {

- {{cssxref("border-spacing")}}, {{cssxref("border-style")}}
- The `border-collapse` property alters the appearance of the {{htmlelement("table")}} HTML element.
- [CSS table](/en-US/docs/Web/CSS/CSS_table) module
1 change: 1 addition & 0 deletions files/en-us/web/css/border-spacing/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,3 +112,4 @@ td {

- {{cssxref("border-collapse")}}, {{cssxref("border-style")}}
- The `border-spacing` property alters the appearance of the {{htmlelement("table")}} HTML element.
- [CSS table](/en-US/docs/Web/CSS/CSS_table) module
5 changes: 5 additions & 0 deletions files/en-us/web/css/caption-side/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,3 +118,8 @@ td {
## Browser compatibility

{{Compat}}

## See also

- [CSS table](/en-US/docs/Web/CSS/CSS_table) module
- [CSS logical properties and values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module
67 changes: 66 additions & 1 deletion files/en-us/web/css/css_table/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ spec-urls: https://www.w3.org/TR/CSS22/tables.html

The **CSS table** module helps you define how to lay out table data.

This CSS module defines styles applicable to the HTML {{htmlelement("table")}} element, which is used to render tabular data. By default, tables are rendered as a two-dimensional grid with cells lined up in a series of consecutive rows and columns. This layout is generated from the table structure and sized according to the content of the cells. This module also enables defining the position of the table's {{htmlelement("caption")}}, if present.

The properties introduced in this module aren't limited to the `<table>` elements; they can be applied to any element with a table-related CSS {{cssxref("display")}} value.

## Reference

### Properties
Expand All @@ -18,8 +22,69 @@ The **CSS table** module helps you define how to lay out table data.
- {{cssxref("caption-side")}}
- {{cssxref("empty-cells")}}
- {{cssxref("table-layout")}}
- {{cssxref("vertical-align")}}

## Guides

- [Learn: CSS table layout](/en-US/docs/Learn/CSS/CSS_layout/Introduction#table_layout)

- : An overview of CSS layouts, including how to set table-related `display` values to enable using CSS table properties on any element.

- [Learn: Styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables)

- : A guide to improving the appearance of HTML tables, covering table styling techniques.

- [Learn: HTML table basics](/en-US/docs/Learn/HTML/Tables/Basics)

- : An introduction to HTML tables, including the HTML for creating rows and cells, headings, making cells span multiple columns and rows, and grouping cells in a column for styling purposes.

- [Learn: HTML table advanced features and accessibility](/en-US/docs/Learn/HTML/Tables/Advanced)

- : A look at advanced HTML table features, including captions and grouping table rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.

## Related concepts

- {{cssxref("display")}} property
- {{cssxref("vertical-align")}} property
- {{cssxref("text-align")}} property

- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module
- [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The original was correct. See #33182


- {{cssxref("box-sizing")}}
- {{cssxref("height")}}
- {{cssxref("max-width")}}
- {{cssxref("min-height")}}
- {{cssxref("min-width")}}
- {{cssxref("width")}}
- {{cssxref("min-content")}} keyword

- [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module
- {{cssxref("border")}} shorthand
estelle marked this conversation as resolved.
Show resolved Hide resolved
- {{cssxref("border-width")}}
- {{cssxref("border-style")}}
- {{cssxref("border-color")}}

- HTML table-related elements:

- {{htmlelement("table")}}
- {{htmlelement("caption")}}
- {{htmlelement("colgroup")}}
- {{htmlelement("col")}}
- {{htmlelement("thead")}}
- {{htmlelement("tbody")}}
- {{htmlelement("tfoot")}}
- {{htmlelement("tr")}}
- {{htmlelement("th")}}
- {{htmlelement("td")}}

## Specifications

{{Specifications}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should replace the spec-urls front matter key value with "https://drafts.csswg.org/css-tables-3/", the same spec link that you're also using in the note after the Specifications table

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the note below: the spec is not ready for implementation, and has a big orange warning when you visit the page, so opting not to update the spec-url.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's just that in the Specifications table, we link to "Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification", but in the note we link to "CSS Table Module Level 3 specification". Seems disjointed. I've added a rewording suggestion for the note.


> **Note:** The [CSS Table Module Level 3](https://drafts.csswg.org/css-tables-3/) specification is still being developed; it is not yet ready for implementation.
estelle marked this conversation as resolved.
Show resolved Hide resolved

## See also

- [CSS display](/en-US/docs/Web/CSS/CSS_display) module
- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
- [CSS fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) module
1 change: 1 addition & 0 deletions files/en-us/web/css/empty-cells/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,4 @@ th {

- {{cssxref("border-collapse")}}
- [Styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables)
- [CSS table](/en-US/docs/Web/CSS/CSS_table) module
1 change: 1 addition & 0 deletions files/en-us/web/css/table-layout/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,3 +114,4 @@ td {
## See also

- [`<table>`](/en-US/docs/Web/HTML/Element/table)
- [CSS table](/en-US/docs/Web/CSS/CSS_table) module
Loading