Color combination ideas

If you're running out of color ideas, here are some color themes.

How to create dashed table border in HTML?

Have you realized by defining different style of table borders, programmers can also do the graphical design?

Basic table border

Code	Result
<table style="border:1px dotted black;"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

Outer table border only

Code	Result
<table style="border:1px dotted black;"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

Outer table dashed thick color border

Code	Result
<table style="border:3px dashed blue;"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

You may play with these parameters such as colors, thickness (in px) and dashed, dotted, double or solid.

Border Collapse

Code

Result

<table style="border:1px solid black;border-collapse:collapse;"> <tr> <th style="border:1px solid red;">Table Header</th><th style="border:1px solid red;">Table Header</th> </tr> <tr> <td style="border:1px solid red;">Table cell 1</td><td style="border:1px solid red;">Table cell 2</td> </tr> <tr> <td style="border:1px solid red;">Table cell 3</td><td style="border:1px solid red;">Table cell 4</td> </tr> </table>

Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

CSS classes style table

Code

Result

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags --> <style type="text/css"> .myTable { background-color:#eee;border-collapse:collapse; } .myTable th { background-color:#000;color:white;width:50%; } .myTable td, .myTable th { padding:5px;border:1px solid #000; } </style> <!-- End Styles --> <table class="myTable"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>

Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

In fact, by defining cell background colors, such table style can be achieved by pure html. It saves some coding by using CSS and easier for further use. If you keep both css and html code in one post in blogspot, this table style will also show correctly. cool right.

CSS classes style display row line only

Code

Result

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags --> <style type="text/css"> .myOtherTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; } .myOtherTable th { background-color:#BDB76B;color:white;width:50%; } .myOtherTable td, .myOtherTable th { padding:5px;border:0; } .myOtherTable td { border-bottom:1px dotted #BDB76B; } </style> <!-- End Styles --> <table class="myOtherTable"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>

Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

How do you feel like these table parameters now.

How to make text flow/ scroll in HTML

Code	Result
<marquee behavior="scroll" direction="left">scrolling text</marquee>	scrolling to the left

Code	Result
<marquee behavior="scroll" direction="right">scrolling text</marquee>	scrolling to the right

Code	Result
<marquee behavior="scroll" direction="up">scrolling text</marquee>	scrolling upwards

Code	Result
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee><br /> <marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee><br /> <marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>	Slow scroll speed Medium scroll speed Fast scroll speed

By playing with this code, you may adjust scrolling speed or direction or replace text with image. Have fun.

Fonts Chart Gallery

arial
arial black
arial narrow
balthazar
black chancery
blackadder itc
book antiqua
bookman old style
century gothic
comic sans ms
computerfont
copperplate gothic bold
copperplate gothic light
courier new
curlz mt
dayton
edwardian script itc
engravers mt
eras demi itc
eras light itc
estrangelo edessa
eurostile
felix titling
franklin gothic medium
franklin gothic book
franklin gothic medium cond
french script mt
garamond
gautami
georgia
geotype tt-symbols
goudy old style att
greek diner inline tt
haettenschweiler
impact
kristen itc
latha
lucida console
lucida sans unicode
maiandra gd
mangal
marlettmarlett-symbols
matisse itc
milestonesmilestones-symbols
mistral
modern
monotype corsiva
ms reference sans serif
ms reference serif
ms reference specialty
mt extramt extra
mv boli
palatino linotype
papyrus
poster bodoni att
raavi
rockwell extra bold
russel write tt
shruti
signature
sylfaen
symbolsymbol
tahoma
tempus sans itc
thickhead
times new roman
trebuchet ms
tunga
typewriter
verdana-
vivaldi 


choose type of font above and the following code:
<font face=NameOfFont>text</font>

Awesome Color Chart

color name	col	select a colour	hex	r	g	b	access
lightpink		lightpink	#ffb6c1	255	182	193	12695295
pink		pink	#ffc0cb	255	192	203	13353215
crimson		crimson	#dc143c	220	20	60	3937500
lavenderblush		lavenderblush	#fff0f5	255	240	245	16118015
palevioletred		palevioletred	#db7093	219	112	147	9662683
hotpink		hotpink	#ff69b4	255	105	180	11823615
deeppink		deeppink	#ff1493	255	20	147	9639167
mediumvioletred		mediumvioletred	#c71585	199	21	133	8721863
orchid		orchid	#da70d6	218	112	214	14053594
thistle		thistle	#d8bfd8	216	191	216	14204888
plum		plum	#dda0dd	221	160	221	14524637
violet		violet	#ee82ee	238	130	238	15631086
fuchsia*		fuchsia*	#ff00ff	255	0	255	16711935
fuchsia*		fuchsia*	#ff00ff	255	0	255	16711935
darkmagenta		darkmagenta	#8b008b	139	0	139	9109643
purple*		purple*	#800080	128	0	128	8388736
mediumorchid		mediumorchid	#ba55d3	186	85	211	13850042
darkviolet		darkviolet	#9400d3	148	0	211	13828244
darkorchid		darkorchid	#9932cc	153	50	204	13382297
indigo		indigo	#4b0082	75	0	130	8519755
blueviolet		blueviolet	#8a2be2	138	43	226	14822282
mediumpurple		mediumpurple	#9370db	147	112	219	14381203
mediumslateblue		mediumslateblue	#7b68ee	123	104	238	15624315
slateblue		slateblue	#6a5acd	106	90	205	13458026
darkslateblue		darkslateblue	#483d8b	72	61	139	9125192
ghostwhite		ghostwhite	#f8f8ff	248	248	255	16775416
lavender		lavender	#e6e6fa	230	230	250	16443110
blue*		blue*	#0000ff	0	0	255	16711680
mediumblue		mediumblue	#0000cd	0	0	205	13434880
darkblue		darkblue	#00008b	0	0	139	9109504
navy*		navy*	#000080	0	0	128	8388608
midnightblue		>midnightblue	#191970	25	25	112	7346457
royalblue		royalblue	#4169e1	65	105	225	14772545
cornflowerblue		cornflowerblue	#6495ed	100	149	237	15570276
lightsteelblue		lightsteelblue	#b0c4de	176	196	222	14599344
lightslategray		lightslategray	#778899	119	136	153	10061943
slategray		slategray	#708090	112	128	144	9470064
dodgerblue		dodgerblue	#1e90ff	30	144	255	16748574
aliceblue		aliceblue	#f0f8ff	240	248	255	16775408
steelblue		steelblue	#4682b4	70	130	180	11829830
lightskyblue		lightskyblue	#87cefa	135	206	250	16436871
skyblue		skyblue	#87ceeb	135	206	235	15453831
deepskyblue		deepskyblue	#00bfff	0	191	255	16760576
lightblue		lightblue	#add8e6	173	216	230	15128749
powderblue		powderblue	#b0e0e6	176	224	230	15130800
cadetblue		cadetblue	#5f9ea0	95	158	160	10526303
darkturquoise		darkturquoise	#00ced1	0	206	209	13749760
azure		azure	#f0ffff	240	255	255	16777200
lightcyan		lightcyan	#e0ffff	224	255	255	16777184
paleturquoise		paleturquoise	#afeeee	175	238	238	15658671
aqua*		aqua*	#00ffff	0	255	255	16776960
darkcyan		darkcyan	#008b8b	0	139	139	9145088
teal*		teal*	#008080	0	128	128	8421376
darkslategray		darkslategray	#2f4f4f	47	79	79	5197615
mediumturquoise		mediumturquoise	#48d1cc	72	209	204	13422920
lightseagreen		lightseagreen	#20b2aa	32	178	170	11186720
turquoise		turquoise	#40e0d0	64	224	208	13688896
aquamarine		aquamarine	#7fffd4	127	255	212	13959039
mediumaquamarine		mediumaquamarine	#66cdaa	102	205	170	11193702
mediumspringgreen		mediumspringgreen	#00fa9a	0	250	154	10156544
mintcream		mintcream	#f5fffa	245	255	250	16449525
springgreen		springgreen	#00ff7f	0	255	127	8388352
mediumseagreen		mediumseagreen	#3cb371	60	179	113	7451452
seagreen		seagreen	#2e8b57	46	139	87	5737262
honeydew		honeydew	#f0fff0	240	255	240	15794160
darkseagreen		darkseagreen	#8fbc8f	143	188	143	9419919
palegreen		palegreen	#98fb98	152	251	152	10025880
lightgreen		lightgreen	#90ee90	144	238	144	9498256
limegreen		limegreen	#32cd32	50	205	50	3329330
lime*		lime*	#00ff00	0	255	0	65280
forestgreen		forestgreen	#228b22	34	139	34	2263842
green*		green*	#008000	0	128	0	32768
darkgreen		darkgreen	#006400	0	100	0	25600
lawngreen		lawngreen	#7cfc00	124	252	0	64636
chartreuse		chartreuse	#7fff00	127	255	0	65407
greenyellow		greenyellow	#adff2f	173	255	47	3145645
darkolivegreen		darkolivegreen	#556b2f	85	107	47	3107669
yellowgreen		yellowgreen	#9acd32	154	205	50	3329434
olivedrab		olivedrab	#6b8e23	107	142	35	2330219
ivory		ivory	#fffff0	255	255	240	15794175
beige		beige	#f5f5dc	245	245	220	14480885
lightyellow		lightyellow	#ffffe0	255	255	224	14745599
lightgoldenrodyellow		lightgoldenrodyellow	#fafad2	250	250	210	13826810
yellow*		yellow*	#ffff00	255	255	0	65535
olive*		olive*	#808000	128	128	0	32896
darkkhaki		darkkhaki	#bdb76b	189	183	107	7059389
palegoldenrod		palegoldenrod	#eee8aa	238	232	170	11200750
lemonchiffon		lemonchiffon	#fffacd	255	250	205	13499135
khaki		khaki	#f0e68c	240	230	140	9234160
gold		gold	#ffd700	255	215	0	55295
cornsilk		cornsilk	#fff8dc	255	248	220	14481663
goldenrod		goldenrod	#daa520	218	165	32	2139610
darkgoldenrod		darkgoldenrod	#b8860b	184	134	11	755384
floralwhite		floralwhite	#fffaf0	255	250	240	15792895
oldlace		oldlace	#fdf5e6	253	245	230	15136253
wheat		wheat	#f5deb3	245	222	179	11788021
orange		orange	#ffa500	255	165	0	42495
moccasin		moccasin	#ffe4b5	255	228	181	11920639
papayawhip		papayawhip	#ffefd5	255	239	213	14020607
blanchedalmond		blanchedalmond	#ffebcd	255	235	205	13495295
navajowhite		navajowhite	#ffdead	255	222	173	11394815
antiquewhite		antiquewhite	#faebd7	250	235	215	14150650
tan		tan	#d2b48c	210	180	140	9221330
burlywood		burlywood	#deb887	222	184	135	8894686
darkorange		darkorange	#ff8c00	255	140	0	36095
bisque		bisque	#ffe4c4	255	228	196	12903679
linen		linen	#faf0e6	250	240	230	15134970
peru		peru	#cd853f	205	133	63	4163021
peachpuff		peachpuff	#ffdab9	255	218	185	12180223
sandybrown		sandybrown	#f4a460	244	164	96	6333684
chocolate		chocolate	#d2691e	210	105	30	1993170
saddlebrown		saddlebrown	#8b4513	139	69	19	1262987
seashell		seashell	#fff5ee	255	245	238	15660543
sienna		sienna	#a0522d	160	82	45	2970272
lightsalmon		lightsalmon	#ffa07a	255	160	122	8036607
coral		coral	#ff7f50	255	127	80	5275647
orangered		orangered	#ff4500	255	69	0	17919
darksalmon		darksalmon	#e9967a	233	150	122	8034025
tomato		tomato	#ff6347	255	99	71	4678655
salmon		salmon	#fa8072	250	128	114	7504122
mistyrose		mistyrose	#ffe4e1	255	228	225	14804223
lightcoral		lightcoral	#f08080	240	128	128	8421616
snow		snow	#fffafa	255	250	250	16448255
rosybrown		rosybrown	#bc8f8f	188	143	143	9408444
indianred		indianred	#cd5c5c	205	92	92	6053069
red*		red*	#ff0000	255	0	0	255
brown		brown	#a52a2a	165	42	42	2763429
firebrick		firebrick	#b22222	178	34	34	2237106
darkred		darkred	#8b0000	139	0	0	139
maroon*		maroon*	#800000	128	0	0	128
white*		white*	#ffffff	255	255	255	16777215
whitesmoke		whitesmoke	#f5f5f5	245	245	245	16119285
gainsboro		gainsboro	#dcdcdc	220	220	220	14474460
lightgrey		lightgrey	#d3d3d3	211	211	211	13882323
silver*		silver*	#c0c0c0	192	192	192	12632256
darkgray		darkgray	#a9a9a9	169	169	169	11119017
gray*		gray*	#808080	128	128	128	8421504
dimgray		dimgray	#696969	105	105	105	6908265
black*		black*	#000000	0	0	0	0