Skip to content

Commit 13c89eb

Browse files
dbarondbaron
committed
Address issue 10 by making HTML4 color table look like X11 color table.
1 parent c8e7408 commit 13c89eb

2 files changed

Lines changed: 179 additions & 76 deletions

File tree

‎css3-color/Overview.html‎

Lines changed: 155 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,10 @@
2323
pre { text-align:left }
2424
pre.code { font-family: monospace }
2525

26-
table.html4colortable {margin:auto; width:80%; border:none }
27-
table.html4colortable TD {border:none; padding:0}
28-
td .colorsquare { display:block;width:16px;height:16px;border:2px solid black }
29-
30-
table.x11colortable td {text-align:center }
31-
table.x11colortable td.c { text-transform:uppercase }
32-
table.x11colortable td:first-child, table.x11colortable td:first-child+td { border:1px solid black }
33-
table.x11colortable th {text-align:center; background:black; color:white }
26+
table.colortable td {text-align:center }
27+
table.colortable td.c { text-transform:uppercase }
28+
table.colortable td:first-child, table.colortable td:first-child+td { border:1px solid black }
29+
table.colortable th {text-align:center; background:black; color:white }
3430

3531
table.tprofile th.title {background:gray; color:white}
3632
table.tprofile th { width:29%;padding:2px }
@@ -623,85 +619,202 @@ <h3 id=html4><span class=secno>4.1. </span>HTML4 color keywords</h3>
623619
green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
624620
yellow. The color names are case-insensitive.
625621

626-
<table class=html4colortable>
622+
<table class=colortable>
627623
<caption><b>Color names and <span class=index-inst id=srgb>sRGB</span>
628624
values</b><br>
629625
</caption>
630626

631627
<tbody>
632628
<tr>
633-
<td><span class=colorsquare style="background:black"></span>
629+
<th style="background:black">Named
634630

635-
<td>Black = #000000
631+
<th>Numeric
636632

637-
<td><span class=colorsquare style="background:green"></span>
633+
<th>Color&nbsp;name
638634

639-
<td>Green = #008000
635+
<th>Hex&nbsp;rgb
636+
637+
<th>Decimal
640638

641639
<tr>
642-
<td><span class=colorsquare style="background:silver"></span>
640+
<td class=c style="background:black">&nbsp;
643641

644-
<td>Silver = #C0C0C0
642+
<td class=c style="background:#000000">&nbsp;
645643

646-
<td><span class=colorsquare style="background:lime"></span>
644+
<td>black
645+
646+
<td class=c style="background:silver">#000000
647647

648-
<td>Lime = #00FF00
648+
<td class=c style="background:silver">0,0,0
649649

650650
<tr>
651-
<td><span class=colorsquare style="background:gray"></span>
651+
<td class=c style="background:silver">&nbsp;
652+
653+
<td class=c style="background:#C0C0C0">&nbsp;
652654

653-
<td>Gray = #808080
655+
<td>silver
654656

655-
<td><span class=colorsquare style="background:olive"></span>
657+
<td class=c style="background:silver">#C0C0C0
656658

657-
<td>Olive = #808000
659+
<td class=c style="background:silver">192,192,192
658660

659661
<tr>
660-
<td><span class=colorsquare style="background:white"></span>
662+
<td class=c style="background:gray">&nbsp;
661663

662-
<td>White = #FFFFFF
664+
<td class=c style="background:#808080">&nbsp;
663665

664-
<td><span class=colorsquare style="background:yellow"></span>
666+
<td>gray
665667

666-
<td>Yellow = #FFFF00
668+
<td class=c style="background:silver">#808080
669+
670+
<td class=c style="background:silver">128,128,128
667671

668672
<tr>
669-
<td><span class=colorsquare style="background:maroon"></span>
673+
<td class=c style="background:white">&nbsp;
670674

671-
<td>Maroon = #800000
675+
<td class=c style="background:#FFFFFF">&nbsp;
672676

673-
<td><span class=colorsquare style="background:navy"></span>
677+
<td>white
674678

675-
<td>Navy = #000080
679+
<td class=c style="background:silver">#FFFFFF
680+
681+
<td class=c style="background:silver">255,255,255
676682

677683
<tr>
678-
<td><span class=colorsquare style="background:red"></span>
684+
<td class=c style="background:maroon">&nbsp;
685+
686+
<td class=c style="background:#800000">&nbsp;
679687

680-
<td>Red = #FF0000
688+
<td>maroon
681689

682-
<td><span class=colorsquare style="background:blue"></span>
690+
<td class=c style="background:silver">#800000
683691

684-
<td>Blue = #0000FF
692+
<td class=c style="background:silver">128,0,0
685693

686694
<tr>
687-
<td><span class=colorsquare style="background:purple"></span>
695+
<td class=c style="background:red">&nbsp;
688696

689-
<td>Purple = #800080
697+
<td class=c style="background:#FF0000">&nbsp;
690698

691-
<td><span class=colorsquare style="background:teal"></span>
699+
<td>red
700+
701+
<td class=c style="background:silver">#FF0000
692702

693-
<td>Teal = #008080
703+
<td class=c style="background:silver">255,0,0
694704

695705
<tr>
696-
<td><span class=colorsquare style="background:fuchsia"></span>
706+
<td class=c style="background:purple">&nbsp;
697707

698-
<td>Fuchsia = #FF00FF
708+
<td class=c style="background:#800080">&nbsp;
709+
710+
<td>purple
711+
712+
<td class=c style="background:silver">#800080
713+
714+
<td class=c style="background:silver">128,0,128
715+
716+
<tr>
717+
<td class=c style="background:fuchsia">&nbsp;
718+
719+
<td class=c style="background:#FF00FF">&nbsp;
720+
721+
<td>fuchsia
699722

700-
<td><span class=colorsquare style="background:aqua"></span>
723+
<td class=c style="background:silver">#FF00FF
724+
725+
<td class=c style="background:silver">255,0,255
726+
727+
<tr>
728+
<td class=c style="background:green">&nbsp;
729+
730+
<td class=c style="background:#008000">&nbsp;
731+
732+
<td>green
733+
734+
<td class=c style="background:silver">#008000
735+
736+
<td class=c style="background:silver">0,128,0
737+
738+
<tr>
739+
<td class=c style="background:lime">&nbsp;
701740

702-
<td>Aqua = #00FFFF
741+
<td class=c style="background:#00FF00">&nbsp;
742+
743+
<td>lime
744+
745+
<td class=c style="background:silver">#00FF00
746+
747+
<td class=c style="background:silver">0,255,0
748+
749+
<tr>
750+
<td class=c style="background:olive">&nbsp;
751+
752+
<td class=c style="background:#808000">&nbsp;
753+
754+
<td>olive
755+
756+
<td class=c style="background:silver">#808000
757+
758+
<td class=c style="background:silver">128,128,0
759+
760+
<tr>
761+
<td class=c style="background:yellow">&nbsp;
762+
763+
<td class=c style="background:#FFFF00">&nbsp;
764+
765+
<td>yellow
766+
767+
<td class=c style="background:silver">#FFFF00
768+
769+
<td class=c style="background:silver">255,255,0
770+
771+
<tr>
772+
<td class=c style="background:navy">&nbsp;
773+
774+
<td class=c style="background:#000080">&nbsp;
775+
776+
<td>navy
777+
778+
<td class=c style="background:silver">#000080
779+
780+
<td class=c style="background:silver">0,0,128
781+
782+
<tr>
783+
<td class=c style="background:blue">&nbsp;
784+
785+
<td class=c style="background:#0000FF">&nbsp;
786+
787+
<td>blue
788+
789+
<td class=c style="background:silver">#0000FF
790+
791+
<td class=c style="background:silver">0,0,255
792+
793+
<tr>
794+
<td class=c style="background:teal">&nbsp;
795+
796+
<td class=c style="background:#008080">&nbsp;
797+
798+
<td>teal
799+
800+
<td class=c style="background:silver">#008080
801+
802+
<td class=c style="background:silver">0,128,128
803+
804+
<tr>
805+
<td class=c style="background:aqua">&nbsp;
806+
807+
<td class=c style="background:#00FFFF">&nbsp;
808+
809+
<td>aqua
810+
811+
<td class=c style="background:silver">#00FFFF
812+
813+
<td class=c style="background:silver">0,255,255
703814
</table>
704815

816+
<table class=colortable></table>
817+
705818
<div class=example>
706819
<p style="display:none">Example(s):</p>
707820

@@ -2721,7 +2834,7 @@ <h3 id=svg-color><span class=secno>4.3. </span>SVG color keywords</h3>
27212834
of a table cell in two ways: The first column uses the named color value,
27222835
and the second column uses the respective numeric color value.
27232836

2724-
<table class=x11colortable>
2837+
<table class=colortable>
27252838
<tbody>
27262839
<tr>
27272840
<th style="background:black">Named

‎css3-color/Overview.src.html‎

Lines changed: 24 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,10 @@
2121
pre { text-align:left }
2222
pre.code { font-family: monospace }
2323

24-
table.html4colortable {margin:auto; width:80%; border:none }
25-
table.html4colortable TD {border:none; padding:0}
26-
td .colorsquare { display:block;width:16px;height:16px;border:2px solid black }
27-
28-
table.x11colortable td {text-align:center }
29-
table.x11colortable td.c { text-transform:uppercase }
30-
table.x11colortable td:first-child, table.x11colortable td:first-child+td { border:1px solid black }
31-
table.x11colortable th {text-align:center; background:black; color:white }
24+
table.colortable td {text-align:center }
25+
table.colortable td.c { text-transform:uppercase }
26+
table.colortable td:first-child, table.colortable td:first-child+td { border:1px solid black }
27+
table.colortable th {text-align:center; background:black; color:white }
3228

3329
table.tprofile th.title {background:gray; color:white}
3430
table.tprofile th { width:29%;padding:2px }
@@ -433,32 +429,26 @@ <h3 id="html4">HTML4 color keywords</h3>
433429
gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
434430
white, and yellow. The color names are case-insensitive.</p>
435431

436-
<table class="html4colortable">
432+
<table class="colortable">
437433
<caption><b>Color names and <span class="index-inst">sRGB</span> values</b><br></caption>
438-
<tr>
439-
<td><span class="colorsquare" style="background:black"></span></td><td>Black = #000000</td>
440-
<td><span class="colorsquare" style="background:green"></span></td><td>Green = #008000</td></tr>
441-
<tr>
442-
<td><span class="colorsquare" style="background:silver"></span></td><td>Silver = #C0C0C0</td>
443-
<td><span class="colorsquare" style="background:lime"></span></td><td>Lime = #00FF00</td></tr>
444-
<tr>
445-
<td><span class="colorsquare" style="background:gray"></span></td><td>Gray = #808080</td>
446-
<td><span class="colorsquare" style="background:olive"></span></td><td>Olive = #808000</td></tr>
447-
<tr>
448-
<td><span class="colorsquare" style="background:white"></span></td><td>White = #FFFFFF</td>
449-
<td><span class="colorsquare" style="background:yellow"></span></td><td>Yellow = #FFFF00</td></tr>
450-
<tr>
451-
<td><span class="colorsquare" style="background:maroon"></span></td><td>Maroon = #800000</td>
452-
<td><span class="colorsquare" style="background:navy"></span></td><td>Navy = #000080</td></tr>
453-
<tr>
454-
<td><span class="colorsquare" style="background:red"></span></td><td>Red = #FF0000</td>
455-
<td><span class="colorsquare" style="background:blue"></span></td><td>Blue = #0000FF</td></tr>
456-
<tr>
457-
<td><span class="colorsquare" style="background:purple"></span></td><td>Purple = #800080</td>
458-
<td><span class="colorsquare" style="background:teal"></span></td><td>Teal = #008080</td></tr>
459-
<tr>
460-
<td><span class="colorsquare" style="background:fuchsia"></span></td><td>Fuchsia = #FF00FF</td>
461-
<td><span class="colorsquare" style="background:aqua"></span></td><td>Aqua = #00FFFF</td></tr>
434+
<tr><th style="background:black">Named</th><th>Numeric</th><th>Color&nbsp;name</th><th>Hex&nbsp;rgb</th><th>Decimal</th></tr>
435+
<tr><td class="c" style="background:black">&nbsp;</td><td class="c" style="background:#000000">&nbsp;</td><td>black</td><td class="c" style="background:silver">#000000</td><td class="c" style="background:silver">0,0,0</td></tr>
436+
<tr><td class="c" style="background:silver">&nbsp;</td><td class="c" style="background:#C0C0C0">&nbsp;</td><td>silver</td><td class="c" style="background:silver">#C0C0C0</td><td class="c" style="background:silver">192,192,192</td></tr>
437+
<tr><td class="c" style="background:gray">&nbsp;</td><td class="c" style="background:#808080">&nbsp;</td><td>gray</td><td class="c" style="background:silver">#808080</td><td class="c" style="background:silver">128,128,128</td></tr>
438+
<tr><td class="c" style="background:white">&nbsp;</td><td class="c" style="background:#FFFFFF">&nbsp;</td><td>white</td><td class="c" style="background:silver">#FFFFFF</td><td class="c" style="background:silver">255,255,255</td></tr>
439+
<tr><td class="c" style="background:maroon">&nbsp;</td><td class="c" style="background:#800000">&nbsp;</td><td>maroon</td><td class="c" style="background:silver">#800000</td><td class="c" style="background:silver">128,0,0</td></tr>
440+
<tr><td class="c" style="background:red">&nbsp;</td><td class="c" style="background:#FF0000">&nbsp;</td><td>red</td><td class="c" style="background:silver">#FF0000</td><td class="c" style="background:silver">255,0,0</td></tr>
441+
<tr><td class="c" style="background:purple">&nbsp;</td><td class="c" style="background:#800080">&nbsp;</td><td>purple</td><td class="c" style="background:silver">#800080</td><td class="c" style="background:silver">128,0,128</td></tr>
442+
<tr><td class="c" style="background:fuchsia">&nbsp;</td><td class="c" style="background:#FF00FF">&nbsp;</td><td>fuchsia</td><td class="c" style="background:silver">#FF00FF</td><td class="c" style="background:silver">255,0,255</td></tr>
443+
<tr><td class="c" style="background:green">&nbsp;</td><td class="c" style="background:#008000">&nbsp;</td><td>green</td><td class="c" style="background:silver">#008000</td><td class="c" style="background:silver">0,128,0</td></tr>
444+
<tr><td class="c" style="background:lime">&nbsp;</td><td class="c" style="background:#00FF00">&nbsp;</td><td>lime</td><td class="c" style="background:silver">#00FF00</td><td class="c" style="background:silver">0,255,0</td></tr>
445+
<tr><td class="c" style="background:olive">&nbsp;</td><td class="c" style="background:#808000">&nbsp;</td><td>olive</td><td class="c" style="background:silver">#808000</td><td class="c" style="background:silver">128,128,0</td></tr>
446+
<tr><td class="c" style="background:yellow">&nbsp;</td><td class="c" style="background:#FFFF00">&nbsp;</td><td>yellow</td><td class="c" style="background:silver">#FFFF00</td><td class="c" style="background:silver">255,255,0</td></tr>
447+
<tr><td class="c" style="background:navy">&nbsp;</td><td class="c" style="background:#000080">&nbsp;</td><td>navy</td><td class="c" style="background:silver">#000080</td><td class="c" style="background:silver">0,0,128</td></tr>
448+
<tr><td class="c" style="background:blue">&nbsp;</td><td class="c" style="background:#0000FF">&nbsp;</td><td>blue</td><td class="c" style="background:silver">#0000FF</td><td class="c" style="background:silver">0,0,255</td></tr>
449+
<tr><td class="c" style="background:teal">&nbsp;</td><td class="c" style="background:#008080">&nbsp;</td><td>teal</td><td class="c" style="background:silver">#008080</td><td class="c" style="background:silver">0,128,128</td></tr>
450+
<tr><td class="c" style="background:aqua">&nbsp;</td><td class="c" style="background:#00FFFF">&nbsp;</td><td>aqua</td><td class="c" style="background:silver">#00FFFF</td><td class="c" style="background:silver">0,255,255</td></tr>
451+
<table class="colortable">
462452
</table>
463453

464454
<div class="example"><p style="display:none">Example(s):</p>
@@ -1433,7 +1423,7 @@ <h3 id="svg-color">SVG color keywords</h3>
14331423

14341424
<p>The table below provides a list of the X11 colors [[X11COLORS]] supported by popular browsers with the addition of gray/grey variants from SVG 1.0. The resulting list is precisely the same as the <a href="http://www.w3.org/TR/SVG/types.html#ColorKeywords">SVG 1.0 color keyword names</a>. This specification extends their definition beyond SVG. The two color swatches on the left illustrate setting the background color of a table cell in two ways: The first column uses the named color value, and the second column uses the respective numeric color value.</p>
14351425

1436-
<table class="x11colortable">
1426+
<table class="colortable">
14371427
<tr><th style="background:black">Named</th><th>Numeric</th><th>Color&nbsp;name</th><th>Hex&nbsp;rgb</th><th>Decimal</th></tr>
14381428
<tr><td class="c" style="background:aliceblue">&nbsp;</td><td class="c" style="background:#f0f8ff">&nbsp;</td><td>aliceblue</td><td class="c" style="background:silver">#f0f8ff</td><td class="c" style="background:silver">240,248,255</td></tr>
14391429
<tr><td class="c" style="background:antiquewhite">&nbsp;</td><td class="c" style="background:#faebd7">&nbsp;</td><td>antiquewhite</td><td class="c" style="background:silver">#faebd7</td><td class="c" style="background:silver">250,235,215</td></tr>

0 commit comments

Comments
 (0)