漂亮的HTML表格

Info Header 1Info Header 2Info Header 3Text 1AText 1BText 1CText 2AText 2BText 2C

<!-- CSS goes in the document HEAD or added to your external stylesheet --><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 goes in the document BODY --><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>

Info Header 1Info Header 2Info Header 3Text 1AText 1BText 1CText 2AText 2BText 2C

<!-- 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>

Info Header 1

Info Header 2

Info Header 3

Text 1A

Text 1B

Text 1C

Text 2A

Text 2B

Text 2C

<!-- 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/ -->

Info Header 1Info Header 2Info Header 3Text 1AText 1BText 1CText 2AText 2BText 2CText 3AText 3BText 3CText 4AText 4BText 4CText 5AText 5BText 5C

<!-- 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/tutorials/css-tables.php#css-table03 -->

Info Header 1Info Header 2Info Header 3Item 1AItem 1BItem 1CItem 2AItem 2BItem 2CItem 3AItem 3BItem 3CItem 4AItem 4BItem 4CItem 5AItem 5BItem 5C

<!-- 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>

From : http://www.textfixer.com/tutorials/css-tables.php#css-table01