Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add HTMLTableColElement.{align|valign} #33101

Merged
merged 7 commits into from
Jun 18, 2024
+159 −0
Merged

Add HTMLTableColElement.{align|valign} #33101

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
27123c0
Add HTMLTableColElement.{align|valign}
teoli2003 Apr 15, 2024
3956a6f
Fix typos
teoli2003 Apr 15, 2024
1cb7703
Fix typos
teoli2003 Apr 15, 2024
13b1b1e
Fix typos
teoli2003 Apr 15, 2024
2d8ad6f
Update files/en-us/web/api/htmltablecolelement/align/index.md
teoli2003 Apr 16, 2024
4632516
Apply suggestions from code review
estelle Jun 18, 2024
448734c
Apply suggestions from code review
estelle Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Prev Previous commit
Next Next commit
Apply suggestions from code review
  • Loading branch information
@estelle
estelle committed Jun 18, 2024
commit 46325167f93f9d479662f128970a30df97aaff1f
3 changes: 2 additions & 1 deletion files/en-us/web/api/htmltablecolelement/align/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ The possible values are:

## 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).
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.

Expand All @@ -45,4 +45,5 @@ An [example](/en-US/docs/Web/CSS/:nth-child#styling_a_table_column) is available

- {{cssxref("text-align")}}
- {{cssxref(":nth-child()")}}
estelle marked this conversation as resolved.
Show resolved Hide resolved
- {{cssxref(":nth-last-child()")}}
- [Styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables)
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmltablecolelement/valign/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ 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.
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.
>
Expand Down
10 changes: 8 additions & 2 deletions files/en-us/web/css/_colon_nth-child/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,8 +422,14 @@ In this example, we set different styles for each of the column.

```html-nolint
<table>
estelle marked this conversation as resolved.
Show resolved Hide resolved
<caption>Student roster</caption>
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th><th>Column3</th></tr>
<tr><th>Name</th><th>Age</th><th>Country</th></tr>
</thead>
<tbody>
<tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
Expand All @@ -442,7 +448,7 @@ td {
border: 1px solid black;
}

tbody > tr > td:nth-child(1) {
tr :nth-child(1) {
text-align: left;
vertical-align: bottom;
background-color: silver;
Expand Down