-
Notifications
You must be signed in to change notification settings - Fork 22.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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]>
- Loading branch information
Showing
3 changed files
with
159 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters