Add HTMLTableColElement.{align|valign} (#33101)

* Add HTMLTableColElement.{align|valign} * Fix typos * Fix typos * Fix typos * Update files/en-us/web/api/htmltablecolelement/align/index.md Co-authored-by: Estelle Weyl <[email protected]> * Apply suggestions from code review * Apply suggestions from code review --------- Co-authored-by: Estelle Weyl <[email protected]>
mdn · Jun 18, 2024 · 601447d · 601447d
1 parent 44037e8
commit 601447d
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 0 deletions.
diff --git a/files/en-us/web/api/htmltablecolelement/align/index.md b/files/en-us/web/api/htmltablecolelement/align/index.md
@@ -0,0 +1,49 @@
+---
+title: "HTMLTableColElement: align property"
+short-title: align
+slug: Web/API/HTMLTableColElement/align
+page-type: web-api-instance-property
+status:
+ - deprecated
+browser-compat: api.HTMLTableColElement.align
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+The **`align`** property of the {{domxref("HTMLTableColElement")}} interface is a string indicating how to horizontally align text in a table {{htmlelement("col")}} column element.
+
+> **Note:** This property is deprecated, and CSS should be used to align text horizontally in a column. Use the CSS {{cssxref("text-align")}} property, which takes precedence, to horizontally align text in a column instead.
+>
+> As {{htmlelement("td")}} are not children of {{htmlelement("col")}}, you can't set it directly on a {{HTMLElement("col")}} element, you need to select the cells of the column using a `td:nth-last-child(n)` or similar (`n` is the column number, counting from the end).
+
+## Value
+
+The possible values are:
+
+- `left`
+ - : Align the text to the left. Use `text-align: left` applied directly to the {{td}} or {{th}} instead.
+- `right`
+ - : Align the text to the right. Use `text-align: right` applied directly to the `<td>` or `<th>` instead.
+- `center`
+ - : Center the text in the cell. Use `text-align: center` instead.
+
+## Examples
+
+Use CSS `text-align` on the {{htmlelement("td")}} and {{htmlelement("th")}} elements. As {{htmlelement("td")}} elements of a column are not children of {{htmlelement("col")}}, setting the `align` attribute in HTML or `text-align` property in CSS on a {{HTMLElement("col")}} element will have no effect. Instead, select the cells of a column using a [`:is(td, tr):nth-child(n)`](/en-US/docs/Web/CSS/:nth-child), where `n` is the column number, or similar.
+
+An [example](/en-US/docs/Web/CSS/:nth-child#styling_a_table_column) is available on the {{cssxref(":nth-child()")}} page.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("text-align")}}
+- {{cssxref(":nth-child()")}}
+- {{cssxref(":nth-last-child()")}}
+- [Styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables)
diff --git a/files/en-us/web/api/htmltablecolelement/valign/index.md b/files/en-us/web/api/htmltablecolelement/valign/index.md
@@ -0,0 +1,52 @@
+---
+title: "HTMLTableColElement: vAlign property"
+short-title: vAlign
+slug: Web/API/HTMLTableColElement/vAlign
+page-type: web-api-instance-property
+status:
+ - deprecated
+browser-compat: api.HTMLTableColElement.vAlign
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+The **`vAlign`** property of the {{domxref("HTMLTableColElement")}} interface is a string indicating how to vertically align text in a table {{htmlelement("col")}} column element.
+
+> **Note:** This property is deprecated, and CSS should be used to align text vertically in a column. Use the CSS {{cssxref("vertical-align")}} property, which takes precedence, to vertically align text in each column cell instead.
+>
+> As {{htmlelement("td")}} are not children of {{htmlelement("col")}}, you can't set it directly on a {{HTMLElement("col")}}element , you need to select the cells of the column using a `td:nth-child(n)` or similar (`n` is the column number).
+
+## Value
+
+The possible values are: `"top"`, `"middle"`, `"bottom"`, or `"baseline"`
+
+- `top`
+ - : Align the text to the top of the column. Use `vertical-align: top` instead.
+- `center`
+ - : Vertically center the text in the column. Synonym of `middle`. Use `vertical-align: middle` instead.
+- `middle`
+ - : Vertically center the text in the column. Use `vertical-align: middle` instead.
+- `bottom`
+ - : Align the text to the bottom of the column. Use `vertical-align: bottom` instead.
+- `baseline`
+ - : Similar to `top`, but align the baseline of the text as close to the top so no part of the character is outside of the cell.
+
+## Examples
+
+Use CSS `vertical-align`. As {{htmlelement("td")}} elements of a column are not children of {{htmlelement("col")}}, you can't set it directly on a {{HTMLElement("col")}}, you need to select the cells using a `td:nth-child(n)` or similar (`n` is the column number).
+
+An [example](/en-US/docs/Web/CSS/:nth-child#styling_a_table_column) is available on the {{cssxref(":nth-child()")}} page.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("vertical-align")}}
+- {{cssxref(":nth-child()")}}
+- [Styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables)
diff --git a/files/en-us/web/css/_colon_nth-child/index.md b/files/en-us/web/css/_colon_nth-child/index.md
@@ -412,6 +412,64 @@ In the second table the _of syntax_ is used to target only the `tr`s that are **
 
 {{EmbedLiveSample('Using_of_selector_to_fix_striped_tables', 550, 180)}}
 
+### Styling a table column
+
+To style a table column, you can't set the style on the {{HTMLElement("col")}} element as table cells are not children of it (as you can with the row element, {{HTMLElement("tr")}}). Pseudo-classes like `:nth-child()` are handy to select the column cells.
+
+In this example, we set different styles for each of the column.
+
+#### HTML
+
+```html-nolint
+<table>
+<caption>Student roster</caption>
+<colgroup>
+ <col/>
+ <col/>
+ <col/>
+</colgroup>
+ <thead>
+ <tr><th>Name</th><th>Age</th><th>Country</th></tr>
+ </thead>
+ <tbody>
+ <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
+ <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
+ </tbody>
+</table>
+
+```
+
+#### CSS
+
+```css
+td {
+ padding: 0.125rem 0.5rem;
+ height: 3rem;
+ border: 1px solid black;
+}
+
+tr :nth-child(1) {
+ text-align: left;
+ vertical-align: bottom;
+ background-color: silver;
+}
+
+tbody tr :nth-child(2) {
+ text-align: center;
+ vertical-align: middle;
+}
+
+tbody tr :nth-child(3) {
+ text-align: right;
+ vertical-align: top;
+ background-color: tomato;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample('Styling_a_table_column', 100, 200)}}
+
 ## Specifications
 
 {{Specifications}}