mdn · estelle · Jun 18, 2024 · Apr 15, 2024 · Apr 15, 2024 · Apr 15, 2024
@@ -0,0 +1,48 @@
+---
+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 column.
+
+> **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-child(n)` or similar (`n` is the column number).
+
+## Value
+
+The possible values are:
+
+- `left`
+ - : Align the text to the left. Use `text-align: left` instead.
+- `right`
+ - : Align the text to the right. Use `text-align: right` instead.
+- `center`
+ - : Center the text in the cell. Use `text-align: center` instead.
+
+## Examples
+
+Use CSS `text-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("text-align")}}
+- {{cssxref(":nth-child()")}}
+- [Styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables)
@@ -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 column.
+
+> **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)
@@ -412,6 +412,58 @@ 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>
+ <thead>
+ <tr><th>Column 1</th><th>Column 2</th><th>Column3</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;
+}
+
+tbody > tr > td:nth-child(1) {
+ text-align: left;
+ vertical-align: bottom;
+ background-color: silver;
+}
+
+tbody tr td:nth-child(2) {
+ text-align: center;
+ vertical-align: middle;
+}
+
+tbody tr td:nth-child(3) {
+ text-align: right;
+ vertical-align: top;
+ background-color: tomato;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample('Styling_a_table_column', 100, 200)}}
+
 ## Specifications
 
 {{Specifications}}