Add HTMLTable{Row|Cell}.bgColor (mdn#32994)

* Add HTMLTable{Row|Cell}.bgColor * Update files/en-us/web/api/htmltablecellelement/bgcolor/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/htmltablecellelement/bgcolor/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/htmltablecellelement/bgcolor/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/htmltablecellelement/bgcolor/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/htmltablecellelement/bgcolor/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/htmltablerowelement/bgcolor/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/htmltablerowelement/bgcolor/index.md * Update files/en-us/web/css/background-color/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/css/background-color/index.md Co-authored-by: Estelle Weyl <[email protected]> --------- Co-authored-by: Estelle Weyl <[email protected]>
OnkarRuikar · Apr 10, 2024 · fe9e5fa · fe9e5fa
1 parent 9c92234
commit fe9e5fa
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 4 deletions.
diff --git a/files/en-us/web/api/htmltablecellelement/bgcolor/index.md b/files/en-us/web/api/htmltablecellelement/bgcolor/index.md
@@ -0,0 +1,38 @@
+---
+title: "HTMLTableCellElement: bgColor property"
+short-title: bgColor
+slug: Web/API/HTMLTableCellElement/bgColor
+page-type: web-api-instance-property
+browser-compat: api.HTMLTableCellElement.bgColor
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+The **`HTMLTableCellElement.bgColor`** property is used to set the background color of a cell or get the value of the obsolete [`bgColor`](/en-US/docs/Web/HTML/Element/td#bgcolor) attribute, if present.
+
+**Note:** This property is deprecated and CSS should be used to set the background color. Use the {{cssxref("background-color")}} property instead.
+
+## Value
+
+One of the following value types can be used:
+
+- a named color, like `red` or `blue`
+- a hex code, like `#0000dd` or `#00d`
+
+** Note: ** The values accepted here are a limited subset of the CSS color values. Only {{cssxref("named-color")}} and 3- or 6-digit {{cssxref("hex-color")}} (with no alpha-channel). While all HTML color values are valid in CSS, this is not true in the other direction.
+
+## Examples
+
+Use CSS `background-color` instead. An example of using [`background-color` with HTML table elements](/en-US/docs/Web/CSS/background-color#colorize_tables) is available on the {{cssxref("background-color")}} page.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLTableRowElement.bgColor")}}
diff --git a/files/en-us/web/api/htmltablerowelement/bgcolor/index.md b/files/en-us/web/api/htmltablerowelement/bgcolor/index.md
@@ -0,0 +1,38 @@
+---
+title: "HTMLTableRowElement: bgColor property"
+short-title: bgColor
+slug: Web/API/HTMLTableRowElement/bgColor
+page-type: web-api-instance-property
+browser-compat: api.HTMLTableRowElement.bgColor
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+The **`HTMLTableRowElement.bgColor`** property is used to set the background color of a row or retrieve the value of the obsolete [`bgColor`](/en-US/docs/Web/HTML/Element/tr#bgcolor) attribute, if present.
+
+**Note:** This property is deprecated and CSS should be used to set the background color. Use the {{cssxref("background-color")}} property instead.
+
+## Value
+
+One of the following value types can be used:
+
+- a named color, like `red` or `blue`
+- a hex code, like `#0000dd`
+
+**Note:** The values accepted here are a subset of the CSS color values. You can reuse HTML color values in CSS, but not in the other direction: the unknown colors would appear differently than expected.
+
+## Examples
+
+Use CSS `background-color` instead. An [example](/en-US/docs/Web/CSS/background-color#colorize_tables) is available on the {{cssxref("background-color")}} page.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLTableCellElement.bgColor")}}
diff --git a/files/en-us/web/css/background-color/index.md b/files/en-us/web/css/background-color/index.md
@@ -73,7 +73,11 @@ Color contrast ratio is determined by comparing the luminance of the text and ba
 
 ## Examples
 
-### HTML
+### Colorize boxes
+
+This example demonstrates the applying `background-color` to HTML {{HTMLelement("div")}} elements using different CSS {{cssxref("color_value", "&lt;color&gt;")}} values.
+
+#### HTML
 
 ```html
 <div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>
@@ -83,7 +87,7 @@ Color contrast ratio is determined by comparing the luminance of the text and ba
 <div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
 ```
 
-### CSS
+#### CSS
 
 ```css
 .exampleone {
@@ -101,9 +105,65 @@ Color contrast ratio is determined by comparing the luminance of the text and ba
 }
 ```
 
-### Result
+#### Result
+
+{{EmbedLiveSample("Colorize boxes", 200, 150)}}
+
+### Colorize tables
+
+This example demonstrates the use of `background-color` on HTML {{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 {
+  background-color: lightblue;
+}
+#c12 {
+  background-color: cyan;
+}
+#r2 {
+  background-color: grey;
+}
+#r3 {
+  background-color: olive;
+}
+```
+
+#### Result
 
-{{EmbedLiveSample("Examples", 200, 150)}}
+{{EmbedLiveSample('Colorize tables', "100%", "100%")}}
 
 ## Specifications