Add HTMLTable*Element.{valign|align} #33035
Conversation
| @@ -202,11 +202,12 @@ p { | |||
|
|
|||
| ```html | |||
| <table> | |||
| <tr> | |||
| <tr style="vertical-align: bottom"> | |||
There was a problem hiding this comment.
This example is a little complex now and I think it would help to have a short explanation at the start, right after the "Vertical alignment in a table cell" heading, something like:
In this example we have a table with a single row containing six cells. The row sets
vertical-aligntobottom.
- The first four cells each set their own
vertical-alignvalues, and these override the row's value.- The fifth cell does not set any
vertical-alignvalue, so inherits the row's value.The sixth cell is only used to ensure that the cells are tall enough to see the effect.
Also, I wonder if we could take some steps to make it less likely we'll see a scrollbar in this example. Even just reducing the size of the dummy text in cell 6 would help.
There was a problem hiding this comment.
- Added a text to describe
- Change the text of the 6th cell to a Lorem Ipsum and no scrollbar appear at any size
- Used a class and CSS instead of inline styling
| @@ -161,6 +161,14 @@ This example demonstrates how the use of `text-align` on {{htmlelement("table")} | |||
|
|
|||
| ```html | |||
| <table> | |||
| <caption style="text-align: right"> | |||
There was a problem hiding this comment.
The description is a bit weird now:
This example demonstrates how the use of text-align on
<table>elements, including<tr>rows and<td>cells.
...since it now includes other table elements. Probably better to say:
This example demonstrates how the use of text-align on
<table>elements.
There was a problem hiding this comment.
And again, it would be good to explain a bit about what's being set here and what the effect is.
There was a problem hiding this comment.
In general, to demonstrate best practices, avoid inline styles.
There was a problem hiding this comment.
I have improved the description and avoided inline styles now.
There was a problem hiding this comment.
The inline style still seems to be here and at line 175?
| @@ -161,6 +161,14 @@ This example demonstrates how the use of `text-align` on {{htmlelement("table")} | |||
|
|
|||
| ```html | |||
| <table> | |||
| <caption style="text-align: right"> | |||
There was a problem hiding this comment.
The inline style still seems to be here and at line 175?
Co-authored-by: wbamberg <[email protected]>
Co-authored-by: wbamberg <[email protected]>
|
I've added:
Ready for another review |
Description
This PR adds docs for the following properties:
HTMLTableRowlElement.alignHTMLTableRowElement.valignHTMLTableCaptionElement.alignHTMLTableSectionElement.alignHTMLTableSectionElement.valignMotivation
These properties are supported by all engines.
Though deprecated, they are common tasks for beginners: we need documentation that points to the right way of doing this (TM), using
text-alignandvertical-alignAdditional details
There is no example as this is deprecated: the example sections point to examples using the modern (CSS) way of doing it so that they are one click away.
I used the same structure as in #32993.
HTMLTableColElementalso has these two properties but their translation in CSS is more complicated so they will be in a separate PR.Related issues and pull requests
It is part of mdn/mdn#520