From 601447d093e98ed226f37a3f28fd6b2c939b37d7 Mon Sep 17 00:00:00 2001 From: Jean-Yves Perrier Date: Tue, 18 Jun 2024 19:48:31 +0200 Subject: [PATCH] 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 * Apply suggestions from code review * Apply suggestions from code review --------- Co-authored-by: Estelle Weyl --- .../api/htmltablecolelement/align/index.md | 49 ++++++++++++++++ .../api/htmltablecolelement/valign/index.md | 52 +++++++++++++++++ files/en-us/web/css/_colon_nth-child/index.md | 58 +++++++++++++++++++ 3 files changed, 159 insertions(+) create mode 100644 files/en-us/web/api/htmltablecolelement/align/index.md create mode 100644 files/en-us/web/api/htmltablecolelement/valign/index.md diff --git a/files/en-us/web/api/htmltablecolelement/align/index.md b/files/en-us/web/api/htmltablecolelement/align/index.md new file mode 100644 index 000000000000000..8dbdc51221e939d --- /dev/null +++ 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 `` or `` 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 new file mode 100644 index 000000000000000..526abf1ad5b8ced --- /dev/null +++ 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 index f0ac88e7b10efba..3c4b7caa31fca89 100644 --- 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 + + ++ + + + + + + + + + + +
Student roster
NameAgeCountry
Mamitiana23Madagascar
Yuki48Japan
+ +``` + +#### 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}}