mdn · teoli2003 · Apr 10, 2024 · Apr 8, 2024 · Apr 8, 2024 · Apr 10, 2024
@@ -0,0 +1,41 @@
+---
+title: "HTMLTableCellElement: align property"
+short-title: align
+slug: Web/API/HTMLTableCellElement/align
+page-type: web-api-instance-property
+browser-compat: api.HTMLTableCellElement.align
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+The **`align`** property of the {{domxref("HTMLTableCellElement")}} interface is a string indicating how to horizontally align text in the {{htmlelement("th")}} or {{htmlelement("td")}} table cell.
+
+> **Note:** This property is deprecated, and CSS should be used to align text horizontally in a cell. Use the CSS {{cssxref("text-align")}} property, which takes precedence, to horizontally align text in a cell instead.
+
+## 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` instead. An [example](/en-US/docs/Web/CSS/text-align#table_alignment) is available on the {{cssxref("text-align")}} page.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("text-align")}}
+- [Styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables)
@@ -16,13 +16,13 @@ The **`HTMLTableCellElement`** interface provides special properties and methods
 _Inherits properties from its parent, {{domxref("HTMLElement")}}._
 
 - {{domxref("HTMLTableCellElement.abbr")}}
- - : A string which can be used on `<th>` elements (not on {{HTMLElement("td")}}), specifying an alternative label for the header cell. This alternate label can be used in other contexts, such as when describing the headers that apply to a data cell. This is used to offer a shorter term for use by screen readers in particular, and is a valuable accessibility tool. Usually the value of `abbr` is an abbreviation or acronym, but can be any text that's appropriate contextually.
+ - : A string that can be used on `<th>` elements (not on {{HTMLElement("td")}}), specifying an alternative label for the header cell. This alternate label can be used in other contexts, such as when describing the headers that apply to a data cell. This is used to offer a shorter term for use by screen readers in particular, and is a valuable accessibility tool. Usually, the value of `abbr` is an abbreviation or acronym, but can be any text that's appropriate contextually.
 - {{domxref("HTMLTableCellElement.cellIndex")}} {{ReadOnlyInline}}
  - : A long integer representing the cell's position in the {{domxref("HTMLTableRowElement.cells", "cells")}} collection of the {{HTMLElement("tr")}} the cell is contained within. If the cell doesn't belong to a `<tr>`, it returns `-1`.
 - {{domxref("HTMLTableCellElement.colSpan")}}
  - : An unsigned long integer indicating the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table. It reflects the [`colspan`](/en-US/docs/Web/HTML/Element/td#colspan) attribute.
 - {{domxref("HTMLTableCellElement.headers")}} {{ReadOnlyInline}}
- - : A {{domxref("DOMTokenList")}} describing a list of `id` of {{HTMLElement("th")}} elements that represents headers associated with the cell. It reflects the [`headers`](/en-US/docs/Web/HTML/Element/td#headers) attribute.
+ - : A {{domxref("DOMTokenList")}} describing a list of `id` of {{HTMLElement("th")}} elements that represent headers associated with the cell. It reflects the [`headers`](/en-US/docs/Web/HTML/Element/td#headers) attribute.
 - {{domxref("HTMLTableCellElement.rowSpan")}}
  - : An unsigned long integer indicating the number of rows this cell must span; this lets a cell occupy space across multiple rows of the table. It reflects the [`rowspan`](/en-US/docs/Web/HTML/Element/td#rowspan) attribute.
 - {{domxref("HTMLTableCellElement.scope")}}
@@ -49,13 +49,13 @@ _No specific method; inherits methods from its parent, {{domxref("HTMLElement")}
 > **Warning:** These properties have been deprecated and should no longer be used. They are documented primarily to help understand older code bases.
 
 - {{domxref("HTMLTableCellElement.align")}} {{deprecated_inline}}
- - : A string containing an enumerated value reflecting the [`align`](/en-US/docs/Web/HTML/Element/td#align) attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are `"left"`, `"right"`, and `"center"`.
+ - : A string containing the value of the [`align`](/en-US/docs/Web/HTML/Element/td#align) attribute, if present. It can be used to set the alignment of the element's contents to the surrounding context of `"left"`, `"right"`, and `"center"`. Use the CSS {{cssxref("text-align")}} property instead.
 - {{domxref("HTMLTableCellElement.axis")}} {{deprecated_inline}}
  - : A string containing a name grouping cells in virtual. It reflects the obsolete [`axis`](/en-US/docs/Web/HTML/Element/td#axis) attribute.
 - {{domxref("HTMLTableCellElement.bgColor")}} {{deprecated_inline}}
  - : A string containing the background color of the cells. It reflects the obsolete [`bgColor`](/en-US/docs/Web/HTML/Element/td#bgcolor) attribute.
 - {{domxref("HTMLTableCellElement.ch")}} {{deprecated_inline}}
- - : A string containing one single character. This character is the one to align all the cell of a column on. It reflects the [`char`](/en-US/docs/Web/HTML/Element/td#char) and default to the decimal points associated with the language, e.g. `'.'` for English, or `','` for French. This property was optional and was not very well supported.
+ - : A string containing one single character. This character is the one to align all the cell of a column on. It reflects the [`char`](/en-US/docs/Web/HTML/Element/td#char) and defaults to the decimal points associated with the language, e.g. `'.'` for English, or `','` for French. This property was optional and was not very well supported.
 - {{domxref("HTMLTableCellElement.chOff")}} {{deprecated_inline}}
  - : A string containing an integer indicating how many characters must be left at the right (for left-to-right scripts; or at the left for right-to-left scripts) of the character defined by `HTMLTableCellElement.ch`. This property was optional and was not very well supported.
 - {{domxref("HTMLTableCellElement.height")}} {{deprecated_inline}}

@@ -0,0 +1,45 @@
+---
+title: "HTMLTableCellElement: vAlign property"
+short-title: vAlign
+slug: Web/API/HTMLTableCellElement/vAlign
+page-type: web-api-instance-property
+browser-compat: api.HTMLTableCellElement.vAlign
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+The **`vAlign`** property of the {{domxref("HTMLTableCellElement")}} interface is a string indicating how to vertically align text in the {{htmlelement("th")}} or {{htmlelement("td")}} table cell.
+
+> **Note:** This property is deprecated and CSS should be used to horizontally align text in a cell. Use the {{cssxref("vertical-align")}} property instead.
+
+## Value
+
+The possible values are: `"top"`, `"middle"`, `"bottom"`, or `"baseline"`
+
+- `top`
+ - : Align the text to the top of the cell. Use `vertical-align: top` instead.
+- `center`
+ - : Vertically center the text in the cell. Synonym of `middle`. Use `vertical-align: middle` instead.
+- `middle`
+ - : Vertically center the text in the cell. Use `vertical-align: middle` instead.
+- `bottom`
+ - : Align the text to the bottom of the cell. 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` instead, which takes precedence. An [example](/en-US/docs/Web/CSS/vertical-align#vertical_alignment_in_a_table_cell) is available on the {{cssxref("vertical-align")}} page.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("vertical-align")}}
+- [Styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables)
@@ -55,7 +55,7 @@ The `text-align` property is specified in one of the following ways:
 - `center`
  - : The inline contents are centered within the line box.
 - `justify`
- - : The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
+ - : The inline contents are justified. Spaces out the content to line up its left and right edges to the left and right edges of the line box, except for the last line.
 - `justify-all`
  - : Same as `justify`, but also forces the last line to be justified.
 - `match-parent`
@@ -126,7 +126,7 @@ The inconsistent spacing between words created by justified text can be problema
 
 #### Result
 
-{{EmbedLiveSample("Centered_text","100%","100%")}}
+{{EmbedLiveSample("Centered_text", "100%", "100%")}}
 
 ### Example using "justify"
 
@@ -153,6 +153,63 @@ The inconsistent spacing between words created by justified text can be problema
 
 {{EmbedLiveSample('Example using "justify"',"100%","100%")}}
 
+### Table alignment
+
+This example demonstrates how the use of `text-align` on {{htmlelement("table")}} elements, including {{htmlelement("tr")}} rows and {{htmlelement("td")}} cells.
+
+This example demonstrates how the use of `text-align` on {{htmlelement("table")}} elements, including {{htmlelement("tr")}} rows and {{htmlelement("td")}} cells. 
+#### HTML
+
+```html
+<table>
+ <tr id="r1">
+ <td id="c11">11</td>
+ <td id="c12">12</td>
+ <td id="c13">13</td>
+ </tr>
+ <tr id="r2">
+ <td id="c21">21</td>
+ <td id="c22">22</td>
+ <td id="c23">23</td>
+ </tr>
+ <tr id="r3">
+ <td id="c31">31</td>
+ <td id="c32">32</td>
+ <td id="c33">33</td>
+ </tr>
+</table>
+```
+
+#### CSS
+
+```css
+table {
+ border-collapse: collapse;
+ border: solid black 1px;
+ width: 250px;
+ height: 150px;
+}
+td {
+ border: solid 1px black;
+}
+#r1 {
+ text-align: right;
+}
+#c12 {
+ text-align: center;
+}
+#r2 {
+ text-align: center;
+}
+#c31 {
+ text-align: right;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample('Table alignment', "100%", "100%")}}
+
 ## Specifications
 
 {{Specifications}}