Skip to content

Commit fe9e5fa

Browse files
teoli2003estelle
teoli2003
and
estelle
authored
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]>
1 parent 9c92234 commit fe9e5fa

File tree

3 files changed

+140
-4
lines changed

3 files changed

+140
-4
lines changed

‎files/en-us/web/api/htmltablecellelement/bgcolor/index.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "HTMLTableCellElement: bgColor property"
3+
short-title: bgColor
4+
slug: Web/API/HTMLTableCellElement/bgColor
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLTableCellElement.bgColor
7+
---
8+
9+
{{APIRef("HTML DOM")}}{{deprecated_header}}
10+
11+
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.
12+
13+
**Note:** This property is deprecated and CSS should be used to set the background color. Use the {{cssxref("background-color")}} property instead.
14+
15+
## Value
16+
17+
One of the following value types can be used:
18+
19+
- a named color, like `red` or `blue`
20+
- a hex code, like `#0000dd` or `#00d`
21+
22+
** 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.
23+
24+
## Examples
25+
26+
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.
27+
28+
## Specifications
29+
30+
{{Specifications}}
31+
32+
## Browser compatibility
33+
34+
{{Compat}}
35+
36+
## See also
37+
38+
- {{domxref("HTMLTableRowElement.bgColor")}}

‎files/en-us/web/api/htmltablerowelement/bgcolor/index.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "HTMLTableRowElement: bgColor property"
3+
short-title: bgColor
4+
slug: Web/API/HTMLTableRowElement/bgColor
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLTableRowElement.bgColor
7+
---
8+
9+
{{APIRef("HTML DOM")}}{{deprecated_header}}
10+
11+
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.
12+
13+
**Note:** This property is deprecated and CSS should be used to set the background color. Use the {{cssxref("background-color")}} property instead.
14+
15+
## Value
16+
17+
One of the following value types can be used:
18+
19+
- a named color, like `red` or `blue`
20+
- a hex code, like `#0000dd`
21+
22+
**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.
23+
24+
## Examples
25+
26+
Use CSS `background-color` instead. An [example](/en-US/docs/Web/CSS/background-color#colorize_tables) is available on the {{cssxref("background-color")}} page.
27+
28+
## Specifications
29+
30+
{{Specifications}}
31+
32+
## Browser compatibility
33+
34+
{{Compat}}
35+
36+
## See also
37+
38+
- {{domxref("HTMLTableCellElement.bgColor")}}

‎files/en-us/web/css/background-color/index.md

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,11 @@ Color contrast ratio is determined by comparing the luminance of the text and ba
7373

7474
## Examples
7575

76-
### HTML
76+
### Colorize boxes
77+
78+
This example demonstrates the applying `background-color` to HTML {{HTMLelement("div")}} elements using different CSS {{cssxref("color_value", "&lt;color&gt;")}} values.
79+
80+
#### HTML
7781

7882
```html
7983
<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
8387
<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
8488
```
8589

86-
### CSS
90+
#### CSS
8791

8892
```css
8993
.exampleone {
@@ -101,9 +105,65 @@ Color contrast ratio is determined by comparing the luminance of the text and ba
101105
}
102106
```
103107

104-
### Result
108+
#### Result
109+
110+
{{EmbedLiveSample("Colorize boxes", 200, 150)}}
111+
112+
### Colorize tables
113+
114+
This example demonstrates the use of `background-color` on HTML {{HTMLelement("table")}} elements, including {{HTMLelement("tr")}} rows and {{HTMLelement("td")}} cells.
115+
116+
#### HTML
117+
118+
```html
119+
<table>
120+
<tr id="r1">
121+
<td id="c11">11</td>
122+
<td id="c12">12</td>
123+
<td id="c13">13</td>
124+
</tr>
125+
<tr id="r2">
126+
<td id="c21">21</td>
127+
<td id="c22">22</td>
128+
<td id="c23">23</td>
129+
</tr>
130+
<tr id="r3">
131+
<td id="c31">31</td>
132+
<td id="c32">32</td>
133+
<td id="c33">33</td>
134+
</tr>
135+
</table>
136+
```
137+
138+
#### CSS
139+
140+
```css
141+
table {
142+
border-collapse: collapse;
143+
border: solid black 1px;
144+
width: 250px;
145+
height: 150px;
146+
}
147+
td {
148+
border: solid 1px black;
149+
}
150+
#r1 {
151+
background-color: lightblue;
152+
}
153+
#c12 {
154+
background-color: cyan;
155+
}
156+
#r2 {
157+
background-color: grey;
158+
}
159+
#r3 {
160+
background-color: olive;
161+
}
162+
```
163+
164+
#### Result
105165

106-
{{EmbedLiveSample("Examples", 200, 150)}}
166+
{{EmbedLiveSample('Colorize tables', "100%", "100%")}}
107167

108168
## Specifications
109169

0 commit comments

Comments
 (0)