Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Tạo bảng kiểu 'ngựa vằn'
URL: https://www.javascriptbank.com/stripe-tables.html
Hiệu ứng giúp ta tạo ra một bảng với từng dòng có màu thay đổi xen kẽ nhau.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Tạo bảng kiểu 'ngựa vằn'
URL: https://www.javascriptbank.com/stripe-tables.html
<style> {box-sizing: border-box; moz-box-sizing: border-box}SMALL {FONT-SIZE: 85%}BLOCKQUOTE {BORDER-LEFT: #696969 1px solid; PADDING-LEFT: 5px}IMG {BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px}#footer A {PADDING-LEFT: 10px; PADDING-RIGHT: 10px}#footer A:hover {COLOR: #cd853f; TEXT-DECORATION: underline}DIV#intro {BACKGROUND-COLOR: #eee; COLOR: darkred; FLOAT: left; FONT-FAMILY: Trebuchet MS, verdana; FONT-SIZE: 13px; MARGIN-TOP: -6px; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 3px; WIDTH: 44%}BODY {COLOR: #222; FONT-FAMILY: verdana; FONT-SIZE: 13px; scrollbar-3dlight-color: #7DAAEA; scrollbar-arrow-color: white; scrollbar-base-color: #527bbd; scrollbar-darkshadow-color: #7DAAEA; scrollbar-face-color: #7DAAEA; scrollbar-track-color: #666; scrollbar-highlight-color: #527bdd; scrollbar-shadow-color: #6b6b6b}DIV#intro SPAN {BORDER-TOP: #333 1px dashed; COLOR: #414141; DISPLAY: block; FONT-FAMILY: arial; FONT-SIZE: 13px; MARGIN-TOP: 3px; PADDING-TOP: 3px}DIV#intro:first-letter {FONT-SIZE: 140%} {CLEAR: left}H1 {TEXT-ALIGN: left}H2 {TEXT-ALIGN: left}H3 {TEXT-ALIGN: left}H4 {TEXT-ALIGN: left}H1 {BORDER-BOTTOM: #333 1px solid; COLOR: #3d80df; FONT-FAMILY: tahoma, arial; FONT-WEIGHT: normal; PADDING-BOTTOM: 3px; PADDING-LEFT: 5px}H2 {BORDER-BOTTOM: #ccc 1px solid; CLEAR: left; COLOR: #999; FONT-SIZE: 21px; PADDING-BOTTOM: 1px; WIDTH: 60%}H4 {COLOR: #7c9bce; FONT-FAMILY: tahoma,arial,sans-serif; FONT-SIZE: 127%; MARGIN-BOTTOM: 0.8em; MARGIN-TOP: 0.7em}DIV#facts {BACKGROUND-COLOR: #f5f5dc; COLOR: #333; FLOAT: right; FONT-FAMILY: arial; MARGIN-TOP: -6px; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 3px; WIDTH: 40%}DIV#intro A {FONT-WEIGHT: bold}A {COLOR: #3d80df; TEXT-DECORATION: none}A:unknown {COLOR: #3d80df; TEXT-DECORATION: none}A:hover {COLOR: #cd853f}UL {COLOR: #222; MARGIN-LEFT: 20px}UL.special {COLOR: #414141; LIST-STYLE: square; MARGIN-LEFT: 20px}#dcbox {FLOAT: right; MARGIN-RIGHT: 90px; MARGIN-TOP: -8px}H3 {BACKGROUND: url('dots.gif') repeat-x 50% bottom; CLEAR: left; COLOR: #527bbd; WHITE-SPACE: nowrap; WIDTH: 4em}TEXTAREA {HEIGHT: 120px; WIDTH: 250px}TEXTAREA {COLOR: #527bbd; FONT-FAMILY: arial; FONT-WEIGHT: bold}INPUT {COLOR: #527bbd; FONT-FAMILY: arial; FONT-WEIGHT: bold}BUTTON {BACKGROUND-COLOR: #dadee4; BORDER-BOTTOM: #333 1px solid; BORDER-LEFT: #333 1px solid; BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; COLOR: #666; FONT-FAMILY: arial; FONT-WEIGHT: bold; MARGIN-TOP: 2px}EM {FONT-STYLE: italic; FONT-WEIGHT: bold; TEXT-DECORATION: underline}PRE {COLOR: #333; MARGIN-LEFT: 3%; OVERFLOW-X: auto; PADDING-BOTTOM: 4px; WIDTH: 90%; scrollbar-3dlight-color: #999; scrollbar-arrow-color: #666; scrollbar-darkshadow-color: #eee; scrollbar-face-color: #eee; scrollbar-track-color: #B0BDEC; scrollbar-highlight-color: #ccc}CODE {COLOR: #333}HR {COLOR: #666; WIDTH: 70%}TABLE.compat {WIDTH: 100%}TABLE.compat TR.header TD {FONT: 13px arial bold; TEXT-ALIGN: center}TH.what {PADDING-LEFT: 5px; TEXT-ALIGN: left}TD.what {BORDER-BOTTOM: #3d80df 1px dashed; BORDER-LEFT: #3d80df 1px dashed; BORDER-RIGHT: #3d80df 1px dashed; BORDER-TOP: #3d80df 1px dashed; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px; VERTICAL-ALIGN: top; WIDTH: 23%}H2.compheader {BACKGROUND-COLOR: #ccc; COLOR: #666; FONT-WEIGHT: normal; TEXT-ALIGN: center; WIDTH: 50%}TABLE.compat TD {FONT-SIZE: 13px}TD.cd {HEIGHT: 30px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px; TEXT-ALIGN: center; VERTICAL-ALIGN: middle}TD.no {BACKGROUND-COLOR: #cd853f; COLOR: #ffffff; FONT-WEIGHT: bold}TD.yes {BACKGROUND-COLOR: #527bbd; COLOR: #fff; FONT-WEIGHT: bold}TD.incomplete {BORDER-BOTTOM: #9bb3d9 1px solid; BORDER-LEFT: #9bb3d9 1px solid; BORDER-RIGHT: #9bb3d9 1px solid; BORDER-TOP: #9bb3d9 1px solid; COLOR: #527bbd}TD.alternative {BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; COLOR: #000000}TD.untestable {COLOR: #414141}TD.minimal {COLOR: #cd853f}TD.incorrect {BORDER-BOTTOM: #ad007b 1px solid; BORDER-LEFT: #ad007b 1px solid; BORDER-RIGHT: #ad007b 1px solid; BORDER-TOP: #ad007b 1px solid; COLOR: #ad007b}TD.buggy {BACKGROUND-COLOR: #ddd0b9; COLOR: #ffffff}TD.almost {BACKGROUND-COLOR: #8da8d3; COLOR: #fff; FONT-WEIGHT: normal}TR.header TH {BORDER-BOTTOM: #444 2px solid; FONT-FAMILY: tahoma, arial; TEXT-ALIGN: center}TD.what H4 {BORDER-BOTTOM: #527bbd 1px solid; COLOR: #666; FONT-SIZE: 120%; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 2px}TD.sep {BORDER-BOTTOM: black 1px solid; HEIGHT: 3px; MARGIN-BOTTOM: 3px; MARGIN-TOP: 3px; VERTICAL-ALIGN: middle; WIDTH: 100%}</style><STYLE>TD {BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT-SIZE: 13px}TABLE {BORDER-BOTTOM: #111 1px solid; BORDER-COLLAPSE: collapse; BORDER-LEFT: #111 1px solid; BORDER-RIGHT: #111 1px solid; BORDER-TOP: #111 1px solid; MARGIN-TOP: 5px}TD {BORDER-LEFT: #333 1px solid; PADDING-BOTTOM: 2px; PADDING-LEFT: 9px; PADDING-RIGHT: 2px; PADDING-TOP: 2px}TH {BORDER-BOTTOM: #222 1px solid; BORDER-LEFT: #333 1px solid; COLOR: #222}THEAD TR {BACKGROUND-COLOR: #eee}TR.special {BACKGROUND-COLOR: #555; COLOR: white}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT type=text/javascript>function stripe() {if (!document.getElementsByTagName || !document.createElement) return;var x = document.getElementsByTagName("tr");for (var i=0;i<x.length;i++) {if (!x[i].parentNode.getAttribute("oc") || x[i].className || x[i].parentNode=="THEAD") continue;var col = (i%2==0) ? x[i].parentNode.getAttribute("ec") : x[i].parentNode.getAttribute("oc");//Uncomment the line below if you want to use specific classes (change the names if you want)//var col = (1%2==0) ? "erow" : "orow";x[i].style.backgroundColor = col;}}window.onload = stripe;</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE cellSpacing=0> <THEAD> <TR> <TH>Title</TH> <TH>Artist</TH></TR></THEAD> <TBODY oc="#7DAAEA" ec="#eff"> <TR> <TD>Purple Haze</TD> <TD>Jimi Hendrix</TD></TR> <TR> <TD>You should be dancing</TD> <TD>The Bee Gees</TD></TR> <TR> <TD>You’re my best friend</TD> <TD>Queen</TD></TR> <TR> <TD>I Wish You Peace</TD> <TD>The Eagles</TD></TR> <TR> <TD>All Along the Watchtower</TD> <TD>Jimi Hendrix</TD></TR> <TR> <TD>Funeral For a Friend/Love Lies Bleeding</TD> <TD>Elton John</TD></TR> <TR class=special> <TD>Bat out of Hell</TD> <TD>Meat Loaf</TD></TR> <TR> <TD>Little Lies</TD> <TD>Fleetwood Mac</TD></TR></TBODY></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->