fullupdated

How to Add Stylish table in your blogger post

<div class="post-body entry-content"><div style="float: left; padding: 0px;"></div><div dir="ltr" style="text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR80My0KzxiFAKrl7VlTBWY1ywslhMKcbjHRqR8detBGQqFV8IMKgkedJK21e9qhfMWKIc4bhOvq44iAvViS4UykIy65cBKcont-u0wO0TZ5Su1tJk_dmcquJRU9Vzm4wpe4DcHedaGdT6/s1600-h/Table%252520Screeen%252520Shoot%25255B18%25255D.png"><img align="left" alt="Table Screeen Shoot" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimRCOZ-DFcx8BMyOPImxziEHp53aKBo5LBScTQHaEgNY_UZI_LP63FnjA0Fm4Nk1gw4n2FMEECNN0ZU6yY3LjitDrLtljisPnEMIj40aNkDVdKA0nZ4YjHnTdAJLA-XQKyJixfrDF6ECpt/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 0px 10px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Table Screeen Shoot" width="234" /></a><br /><div align="justify">In this post I am going to explain you how to add stylish table in  blogger with CSS. Adding table In blogger post is very difficult  for  blogger beginner users.The ability to <span class="g0ig7tu1a7" id="g0ig7tu1a7_7">create tables</span> is a feature that is lacking in Blogger post editor. To add a table you  not only have to know the required HTML tags, but also have to  painstakingly construct the table by arranging the tags manually in post  HTML.</div><div align="justify">You can add stylish table in your post by adding little CSS codes in you blogger Tamplate.</div><div align="justify"></div><div align="center"><br /><br /><br /><br /><br /><br /><br /></div><div align="justify"><strong></strong></div><div align="justify"><strong>Step 1.</strong> First You Need Add CSS in your <span class="g0ig7tu1a7" id="g0ig7tu1a7_2">blogger Template</span>.</div><div align="justify"><strong>Step 2.</strong> Add HTML Code in Your Post.</div><div align="justify"><strong>Note:- You Can Make Changes in <span class="g0ig7tu1a7" id="g0ig7tu1a7_6">style sheet</span>.</strong> </div><div align="justify">Table Width, Headings Background, Borders, by changing <span class="g0ig7tu1a7" id="g0ig7tu1a7_8">color code</span> in Table CSS. check out our <a href="http://bl0gger-tricks.blogspot.com/2012/11/two-color-code-generator-tools.html" target="_blank">Color Code Generator Tool.</a></div><h2 align="justify">Step 1. </h2>Make sure you have your Template Backup. (<a href="http://bl0gger-tricks.blogspot.com/2012/11/how-make-template-backup-in-blogger-and.html" target="_blank">how to make a template backup</a>)<br />1. Go to your blogger Dashboard>> Template>> Proceed>> press CTRL+F and search this code. (<a href="http://bl0gger-tricks.blogspot.com/2012/11/how-to-find-code-in-blogger-with-search.html" target="_blank">how to find code using search bar</a>)<br /><pre class="brush: xml; auto-links: false; toolbar: false;">]]></b:skin></pre>2. and Paste this CSS Code Before/above ]]></b:skin><br /><pre class="brush: xml; auto-links: false;">#customer<br />{<br />font-family:Maven Pro;<br />width:100%;<br />border-collapse:collapse;<br />}<br /><br />#customer th <br />{<br />font: Yanone Kaffeesatz;<br />font-size:1.2em;<br />text-align:center;<br />padding-top:5px;<br />padding-bottom:4px;<br />background-color:#3e3f3f;<br />color:#ffffff;<br />}<br /><br /><br />#customers<br />{<br />font-family: Maven Pro;<br />width:100%;<br />border-collapse:collapse;<br />}<br />#customers td <br />{<br />font-size:16px;<br />border:1px solid #cd0237;<br />padding:3px 7px 2px 7px;<br />}<br />#customers th <br />{<br />font-size:1.1em;<br />text-align:left;<br />border: 1px solid #cd0237;<br />padding-top:2px;<br />padding-bottom:2px;<br />background-color:#cd0237;<br />color:#ffffff;<br />}<br />#customers tr.alt td <br />{<br />color:#000000;<br />background-color:#ffffff;<br />}<br /><br /></pre>Click on preview button and see your blog live. if all Element view is correct like adding before Css then click on save.<br />you can Change Font style, Background, Border Color, <span class="g0ig7tu1a7" id="g0ig7tu1a7_3">Text Color</span>, by changing highlighted Code.<br />Font: <span style="color: red;">Red</span><br />Background:<span style="color: #666666;"> </span><span style="color: lime;">Green</span><br />Border:<span style="color: #666666;"> </span><span style="color: #ffc000;">Orange</span><br />Table Text Color:<span style="color: #666666;"> </span><span style="color: blue;">Blue</span><br />That’s it your <span class="g0ig7tu1a7" id="g0ig7tu1a7_1">Table Style</span> Sheet is Ready Before Doing This<span style="color: #666666;">.</span><br /><strong><br /></strong><strong>For More information about HTML and CSS</strong> <br /><div align="justify">I am not professional in CSS or HTML but I have a little knowledge about  that. I am not learn this languages professionally but when I reading  online content daily so I am getting very useful knowledge about CSS and  HTML. <a href="http://www.w3school.com/" rel="nofollow" target="_blank">W3School</a>  is the best website for learning CSS, HTML,  XML, JAVASCRIPT, VB, JQUERY, PHP and all  <span class="g0ig7tu1a7" id="g0ig7tu1a7_5">programming languages</span>.  you can learn all languages in free on w3school.com. me also HTML, CSS,  XML on w3school.com. I hope this information useful for blogger new  users which can’t have knowledge about this  Online Programming <span class="g0ig7tu1a7" id="g0ig7tu1a7_4">Languages School</span> and I am very excited about this web becoz this is totally free. <br />If you have any trouble or question. Please leave your comments below in comment box. thanks for reading our post.</div></div></div>

How to Add Stylish table in your blogger post

In this post I am going to explain you how to add stylish table in blogger with CSS. Adding table In blogger post is very difficult for b...

18:25

How to add stylish customised subheadings to blogger

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQSxuceQT_6NOXAATlFBF2s7b4UINwyk5vdkgHn_n5V9fMr4fuDGrkZvCzIQ3RbjMkZtwQRulSxCoD4ANqTA75o0_XQSTyB277drqvYaeNQtSG_9PShmcJHI63qSvmIWyvgiXUlCsftNc/s1600-h/image%25255B2%25255D.png"><img alt="image" border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3qSuo00HuD5aIlfXMwEKFJ5wtHREQwDPx4N0ntRt8-y0uFbwSMwz-8g5zeyzYLUXznczfMNIA_4Gwcp-5BRCbPeCl-z4YtIFwoWJ0vccT551J1_O6y8VSkJM_3zWqBBnJYNAxh61fXAw/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="204" /></a><br />  Headings and subheadings are one of the most important parts in a post.Usually the readers don’t have the patience to read the <span class="g0ig7tu1a7" id="g0ig7tu1a7_2">complete post</span> in one go.When the headings and subheadings of the post are attractive  the readers may like to read it and the posts will be impressive.Also it  gives a nice layout to the post,it will be very helpful to retain the  visitors to the blog.<br />  So for this,you should ensure that your  headings and subheadings looks beautiful and stylish.For this I’ll show  you how to make your headings,subheadings and minor headings stylish by  CSS hover effect with colorful <span class="g0ig7tu1a7" id="g0ig7tu1a7_8">borders</span>.<br />  Please follow the below simple steps:<br />  <div class="notes">Customize your post title.</div><ul><li>Go to blogger dashboard>Design>Edit HTML </li><li>Now press ctrl+f and find .post h3 and replace all of its contents with the code below. </li></ul><div class="impnotes">/* The creator of this code is www.vmtricks.blogspot.com.com please don't <span class="g0ig7tu1a7" id="g0ig7tu1a7_7">change</span> any thing without owner permisson */ .post h3 { text-align:left;  font-size: 18px; font-family: Oswald; font-weight:normal; color:#000;  padding: 3px 10px 3px 10px; text-shadow: 0 1px 0 #CCC; border: 3px solid  #980303 ; -moz-border-radius: 90px; -webkit-border-radius: 90px;  border-radius: 90px;-moz-box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0  rgba(255, 255, 255, 0.4) inset; -webkit-box-shadow: 0 1px 2px #5bb5f0,  1px 1px 0 rgba(255, 255, 255, 0.4) inset; box-shadow: 0 1px 2px #5bb5f0,  1px 1px 0 rgba(255, 255, 255, 0.4) inset; margin: 15px 3px;  text-transform: uppercase; line-height: 1.3; background:white;  transition:background 2s; -moz-transition:background 2s; /* <span class="g0ig7tu1a7" id="g0ig7tu1a7_3">Firefox</span> 4 */ -webkit-transition:background 2s; /* Safari and Chrome */  -o-transition:background 2s; /* Opera */ } .post h3 a, #content h1  a:visited { color: #000; font-size:17px; font-family: Georgia, <span class="g0ig7tu1a7" id="g0ig7tu1a7_1">Times New Roman</span>;  font-weight: normal; margin: 0 0 2px; padding: 4px 0 0; } .post  h3:hover { color:#FFF; font-size:18px; text-decoration: none;  background:red; border: 3px solid #000; } </div><div class="notes">Customize your subheadings</div><ul><li>Go to blogger dashboard>design>Edit HTML </li><li>Press Ctrl +F.Find .post h2 and replace it with the following code below. </li></ul><div class="impnotes">.post  h2 { background:  url("http://aux3.iconpedia.net/uploads/6930445441486693898.png")  norepeat 2px center transparent; font-size: 20px; font-family: Oswald;  font-weight:normal; padding: 3px 10px 3px 10px; color: #0274be;  background:white; border: 3px solid #5bb5f0; text-shadow: 0 1px 0 #CCC;  -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius:  60px; -moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255,  0.4) inset; -webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255,  255, 255, 0.4) inset; box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255,  255, 255, 0.4) inset; margin: 15px 3px; text-transform: uppercase;  line-height: 1.3; transition:background 2s; -moz-transition:background  2s; /* Firefox 4 */-webkit-transition:background 2s; /* Safari and  Chrome */ -o-transition:background 2s; /* Opera */ } .post h2:hover {  background:  url("http://aux3.iconpedia.net/uploads/6930445441486693898.png")  norepeat 6px center transparent; background:#06F; color:#FFF;  border-color:#FFF; }</div><div class="notes">Customise your minor headings</div>Minor headings in blogger use h4 tags.For its customization:   <div class="impnotes">.post  h4 { background-size:20px 20px; font-size: 12px; font-family: Oswald;  font-weight:normal; padding: 3px 10px 3px 10px; color: #0274be; border:  2px solid #CCC; text-shadow: 0 1px 0 #CCC; -moz-border-radius: 30px;  -webkit-border-radius: 30px; border-radius: 30px; -moz-box-shadow: 0 1px  3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;  -webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255,  0.4) inset; box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255,  0.4) inset; margin: 15px 3px; text-transform: uppercase; line-height:  1.3; transition:border 2s; -moz-transition:border 2s; /* Firefox 4 */  -webkit-transition:border 2s; /* Safari and Chrome */  -o-transition:border 2s; /* Opera */ } .post h4:hover { border:#5bb5f0; }</div><ul><li>That’s all guys.Enjoy!!!!!!!!!!!!      For further help just comment down below.We will be releasing more stylish headings        <br />and more demanded tutorials and <span class="g0ig7tu1a7" id="g0ig7tu1a7_4">tricks</span> soon.So stay updated and subscribe to our blog         <br />I hope you liked this tutorial.<br />      For any related queries please comment below.<br />   </li></ul>

How to add stylish customised subheadings to blogger

Headings and subheadings are one of the most important parts in a post.Usually the readers don’t have the patience to read the complete po...

18:18

HTML Tables with CSS Styles

I've put together some common CSS tables styles so that you can  quickly copy/paste the code for yourselves. You can modify the styles as  you see fit.<br /> They're 5 pretty basic css tables styles that are commonly used by <span class="g0ig7tu1a7" id="g0ig7tu1a7_7">web developers</span> so I made this little mini-resource for quick copy and pasting styles.<br /> I now  also have a <a href="http://www.textfixer.com/html/html-table-generator.php"><strong>HTML table generator</strong></a> if you want to very quickly create a <span class="g0ig7tu1a7" id="g0ig7tu1a7_3">custom table</span> and the required HTML and CSS code for it.<br /> Hope this <span class="g0ig7tu1a7" id="g0ig7tu1a7_1">comes in handy</span>.<br /> <h2>Five Basic CSS Table Styles (Two Using Javascript)</h2>Here is the code for a:<br /> <ol><li style="padding: 3px 0;"><a href="http://www.textfixer.com/resources/css-tables.php#css-table01" title="CSS HTML Table with one pixel borders">Basic CSS styled table</a></li><li style="padding: 3px 0;"><a href="http://www.textfixer.com/resources/css-tables.php#css-table02" title="CSS HTML Table with background Images">CSS table style with background images</a></li><li style="padding: 3px 0;"><a href="http://www.textfixer.com/resources/css-tables.php#css-table03" title="CSS HTML Table with CSS Gradients">HTML table styled using CSS gradients</a></li><li style="padding: 3px 0;"><a href="http://www.textfixer.com/resources/css-tables.php#css-table04" title="CSS table with alternating row colors">Table with alternating row colors</a></li><li style="padding: 3px 0;"><a href="http://www.textfixer.com/resources/css-tables.php#css-table05" title="CSS table with table row highlight on hover">CSS table with row highlight on hover</a></li></ol><hr /><div style="padding: 5px 0px;"> </div><a href="http://www.blogger.com/null" name="css-table01"></a><h3>1. CSS Table with One Pixel Borders</h3>First up is the collapsed border table that has the <span class="g0ig7tu1a7" id="g0ig7tu1a7_8">solid line</span> borders making this the basis for most popular <span class="g0ig7tu1a7" id="g0ig7tu1a7_5">table styles</span>.<br /> The code includes the CSS which you can add to your stylesheet and please note a class has been added to the table tag.<br /> <table class="gridtable"><tbody><tr>	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr>	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr>	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr></tbody></table><em>Copy/Paste Code for CSS Table with One Pixel Borders</em><br /> <form action="css-tables.php" method="post" style="margin-top: 0px;"><textarea class="tablescode" cols="36" id="newText" name="newText" rows="6"><style type="text/css">table.gridtable { 	font-family: verdana,arial,sans-serif; 	font-size:11px; 	color:#333333; 	border-width: 1px; 	border-color: #666666; 	border-collapse: collapse; } table.gridtable th { 	border-width: 1px; 	padding: 8px; 	border-style: solid; 	border-color: #666666; 	background-color: #dedede; } table.gridtable td { 	border-width: 1px; 	padding: 8px; 	border-style: solid; 	border-color: #666666; 	background-color: #ffffff; } </style><table class="gridtable"><tr>	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr>	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr>	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr></table>

2. CSS Table with Background Images

This image approach is a little old school but it may still come in handy once in a while. If you're looking for a more modern approach, then check out the CSS Table Gradient example below.
This table is similar to the one above except it uses background images which allows the table cells to have a subtle color gradation in them. The images also have a one pixel white line on the left and top which gives the cells a slight 3D effect.
You'll probably have to make two small changes to the CSS to reflect where the table images live on your server other than that it's fairly straightforward.

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C

Step 1. Download a zip of the table images (code included) or right click and save these two images to your desktop: cell-blue.jpg and cell-grey.jpg
Step 2. Copy the code in the box below. Remember to change the css image location. The table tag requires a class.

<!-- CSS goes in the document HEAD or added to your external stylesheet --><style type="text/css">table.imagetable { 	font-family: verdana,arial,sans-serif; 	font-size:11px; 	color:#333333; 	border-width: 1px; 	border-color: #999999; 	border-collapse: collapse; } table.imagetable th { 	background:#b5cfd2 url('cell-blue.jpg'); 	border-width: 1px; 	padding: 8px; 	border-style: solid; 	border-color: #999999; } table.imagetable td { 	background:#dcddc0 url('cell-grey.jpg'); 	border-width: 1px; 	padding: 8px; 	border-style: solid; 	border-color: #999999; } </style><!-- Table goes in the document BODY --><table class="imagetable"><tr>	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr>	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr>	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr></table>

3. HTML Table using CSS Gradients

This one is a more modern version of the image one - it uses CSS gradients to achieve the bevelled look of the image table example. It's a completely image free table rendering.
This code will display correctly across all modern browsers even Internet Explorer 9. It's not pixel perfect in Internet Explorer 7 or 8 but it's a good enough rendering and doesn't impare legibility.
Copy/Paste Code for CSS Gradient Table

<!--  This goes in the document HEAD so IE7 and IE8 don't cry -->	<!--[if lt IE 9]>	<style type="text/css">		table.gradienttable th { 			filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#d5e3e4', endColorstr='#b3c8cc',GradientType=0 ); 			position: relative; 			z-index: -1; 		} 		table.gradienttable td { 			filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#ebecda', endColorstr='#ceceb7',GradientType=0 ); 			position: relative; 			z-index: -1; 		} 	</style>	<![endif]--> <!-- CSS goes in the document HEAD or added to your external  stylesheet --><style type="text/css">table.gradienttable { 	font-family: verdana,arial,sans-serif; 	font-size:11px; 	color:#333333; 	border-width: 1px; 	border-color: #999999; 	border-collapse: collapse; } table.gradienttable th { 	padding: 0px; 	background: #d5e3e4; 	background:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1ZTNlNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2NjZGVlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiM2M4Y2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);  	background: -moz-linear-gradient(top,  #d5e3e4 0%, #ccdee0 40%, #b3c8cc  100%); 	background: -webkit-gradient(linear, left top, left bottom,  color-stop(0%,#d5e3e4), color-stop(40%,#ccdee0),  color-stop(100%,#b3c8cc)); 	background: -webkit-linear-gradient(top,  #d5e3e4 0%,#ccdee0  40%,#b3c8cc 100%); 	background: -o-linear-gradient(top,  #d5e3e4 0%,#ccdee0 40%,#b3c8cc  100%); 	background: -ms-linear-gradient(top,  #d5e3e4 0%,#ccdee0 40%,#b3c8cc  100%); 	background: linear-gradient(to bottom,  #d5e3e4 0%,#ccdee0 40%,#b3c8cc  100%); 	border: 1px solid #999999; } table.gradienttable td { 	padding: 0px; 	background: #ebecda; 	background:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWNkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2UwZTBjNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZWNlYjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);  	background: -moz-linear-gradient(top,  #ebecda 0%, #e0e0c6 40%, #ceceb7  100%); 	background: -webkit-gradient(linear, left top, left bottom,  color-stop(0%,#ebecda), color-stop(40%,#e0e0c6),  color-stop(100%,#ceceb7)); 	background: -webkit-linear-gradient(top,  #ebecda 0%,#e0e0c6  40%,#ceceb7 100%); 	background: -o-linear-gradient(top,  #ebecda 0%,#e0e0c6 40%,#ceceb7  100%); 	background: -ms-linear-gradient(top,  #ebecda 0%,#e0e0c6 40%,#ceceb7  100%); 	background: linear-gradient(to bottom,  #ebecda 0%,#e0e0c6 40%,#ceceb7  100%); 	border: 1px solid #999999; } table.gradienttable th p{ 	margin:0px; 	padding:8px; 	border-top: 1px solid #eefafc; 	border-bottom:0px; 	border-left: 1px solid #eefafc; 	border-right:0px; } table.gradienttable td p{ 	margin:0px; 	padding:8px; 	border-top: 1px solid #fcfdec; 	border-bottom:0px; 	border-left: 1px solid #fcfdec;; 	border-right:0px; } </style> <!-- Table goes in the document BODY --><table class="gradienttable"><tr>	<th><p>Info Header  1</p></th><th><p>Info Header  2</p></th><th><p>Info Header  3</p></th></tr><tr>	<td><p>Text 1A</p></td><td><p>Text  1B</p></td><td><p>Text 1C</p></td></tr><tr>	<td><p>Text 2A</p></td><td><p>Text  2B</p></td><td><p>Text 2C</p></td></tr></table><!-- TIP: Generate your own CSS Gradients using this tool:  http://www.colorzilla.com/gradient-editor/ -->

4. CSS Table with Automatically Alternating Rows (Requires Javascript)

This CSS table uses Javascript to automatically alternate row colors. This is especially great if you have a large table that gets updated frequently.
You can now also achieve this effect in CSS for all the modern browsers. Learn more about using CSS to make a table with alternating rows.

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C
Text 3A	Text 3B	Text 3C
Text 4A	Text 4B	Text 4C
Text 5A	Text 5B	Text 5C

Instructions

<!-- Javascript goes in the document HEAD --><script type="text/javascript">function altRows(id){ 	if(document.getElementsByTagName){   		 		var table = document.getElementById(id);   		var rows = table.getElementsByTagName("tr");  		  		for(i = 0; i < rows.length; i++){           			if(i % 2 == 0){ 				rows[i].className = "evenrowcolor"; 			}else{ 				rows[i].className = "oddrowcolor"; 			}       		} 	} } window.onload=function(){ 	altRows('alternatecolor'); } </script> <!-- CSS goes in the document HEAD or added to your external stylesheet --><style type="text/css">table.altrowstable { 	font-family: verdana,arial,sans-serif; 	font-size:11px; 	color:#333333; 	border-width: 1px; 	border-color: #a9c6c9; 	border-collapse: collapse; } table.altrowstable th { 	border-width: 1px; 	padding: 8px; 	border-style: solid; 	border-color: #a9c6c9; } table.altrowstable td { 	border-width: 1px; 	padding: 8px; 	border-style: solid; 	border-color: #a9c6c9; } .oddrowcolor{ 	background-color:#d4e3e5; } .evenrowcolor{ 	background-color:#c3dde0; } </style> <!-- Table goes in the document BODY --><table class="altrowstable" id="alternatecolor"><tr>	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr>	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr>	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr></tr><tr>	<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td></tr><tr>	<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td></tr><tr>	<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td></tr></table><!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

5. CSS Table with Highlight Row on Hover (Requires Javascript)

Nowadays I just use CSS for this so you should probably go read about how to highlight a table row using CSS.
Otherwise the code below highlights a table row using Javascript which I wouldn't advise you to normally use unless you either must provide support for IE6 (in which case you have my sympathy) or you have to work on a web page without a doctype. HTML pages created without doctypes will prevent a pure CSS solution for table row highlighting from working on all versions of Internet Explorer.
But seriously, go check out the CSS hover solution first - it's a much better method.

Info Header 1	Info Header 2	Info Header 3
Item 1A	Item 1B	Item 1C
Item 2A	Item 2B	Item 2C
Item 3A	Item 3B	Item 3C
Item 4A	Item 4B	Item 4C
Item 5A	Item 5B	Item 5C

One thing to note is you should make sure not to define the background color of a table cell in your stylesheet as that'll stop the row highlight code from working properly.

<!-- CSS goes in the document HEAD or added to your external stylesheet --><style type="text/css">table.hovertable { 	font-family: verdana,arial,sans-serif; 	font-size:11px; 	color:#333333; 	border-width: 1px; 	border-color: #999999; 	border-collapse: collapse; } table.hovertable th { 	background-color:#c3dde0; 	border-width: 1px; 	padding: 8px; 	border-style: solid; 	border-color: #a9c6c9; } table.hovertable tr { 	background-color:#d4e3e5; } table.hovertable td { 	border-width: 1px; 	padding: 8px; 	border-style: solid; 	border-color: #a9c6c9; } </style><!-- Table goes in the document BODY --><table class="hovertable"><tr>	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">	<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td></tr><tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">	<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td></tr><tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">	<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td></tr><tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">	<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td></tr><tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">	<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td></tr></table>

These 5 table styles are variants of the five most common types of tables that I usually have to create so hopefully you'll find them helpful.

HTML Tables with CSS Styles

I've put together some common CSS tables styles so that you can quickly copy/paste the code for yourselves. You can modify the styles a...