-
Notifications
You must be signed in to change notification settings - Fork 22.5k
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
CSS modules: CSS table #33236
Changes from 6 commits
c14b726
b007689
ce3bfaf
d3278cc
efaac97
03fb0fc
d18abfe
0785c11
3d74910
60ac40c
7401320
4b64ca6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
|
@@ -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 | ||
|
||
- {{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}} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we should replace the There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
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