Красиві таблиці на css + відео

lt;table cellspacing="0"gt;lt;trgt;lt;thgt; Lorem ipsumlt;/thgt;lt;thgt; Lorem ipsumlt;/thgt;lt;thgt; Lorem ipsumlt;/thgt;lt;/trgt;lt;trgt;lt;tdgt; Etiam dolorlt;/tdgt;lt;tdgt; 100%lt;/tdgt;lt;tdgt; Немаєlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; Etiam dolorlt;/tdgt;lt;tdgt; 100%lt;/tdgt;lt;tdgt; Такlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; Etiam dolorlt;/tdgt;lt;tdgt; 50%lt;/tdgt;lt;tdgt; Такlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; Etiam dolorlt;/tdgt;lt;tdgt; 0%lt;/tdgt;lt;tdgt; Такlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; Etiam dolorlt;/tdgt;lt;tdgt; 100%lt;/tdgt;lt;tdgt; Такlt;/tdgt;lt;/trgt;lt;/tablegt;

table {overflow:hidden-border:1px solid # d3d3d3-background:#fefefe-width:70%-margin:5% auto 0--moz-border-radius:5px- / * FF1 + * /-webkit-border-radius:5px- / * Saf3-4 * /border-radius:5px--moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2)--webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2)-}th, td {padding:18px 28px 18px-text-align:center-}th {padding-top:22px-text-shadow: 1px 1px 1px #fff-background:# e8eaeb-}td {border-top:1px solid # e0e0e0-border-right:1px solid # e0e0e0-}tr.odd-row td {background:# f6f6f6-}td.first, th.first {text-align:left}td.last {border-right:none-}td {background: -moz-linear-gradient(100% 25% 90deg, #fefefe, # f9f9f9)-background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(# f9f9f9), to(#fefefe))-}tr.odd-row td {background: -moz-linear-gradient(100% 25% 90deg, # f6f6f6, # f1f1f1)-background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(# f1f1f1), to(# f6f6f6))-}th {background: -moz-linear-gradient(100% 20% 90deg, # e8eaeb, #ededed)-background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(# e8eaeb))-}tr: First-child th.first {-moz-border-radius-topleft:5px--webkit-border-top-left; radius:5px- / * Saf3-4 * /}tr: First-child th.last {-moz-border-radius-topright:5px--webkit-border-top-right; radius:5px- / * Saf3-4 * /}tr: Last-child td.first {-moz-border-radius-bottomleft:5px--webkit-border-bottom-left; radius:5px- / * Saf3-4 * /}tr: Last-child td.last {-moz-border-radius-bottomright:5px--webkit-border-bottom-right; radius:5px- / * Saf3-4 * /}

lt;table class="Bordered"gt;lt;theadgt;lt;trgt;lt;thgt; №lt;/thgt;lt;thgt; Top 10 фільмівlt;/thgt;lt;thgt; Рікlt;/thgt;lt;/trgt;lt;/theadgt;lt;trgt;lt;tdgt; 1lt;/tdgt;lt;tdgt; Втеча з Шоушенкаlt;/tdgt;lt;tdgt; 1994lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; 2lt;/tdgt;lt;tdgt; Хрещений батькоlt;/tdgt;lt;tdgt; тисяча дев`ятсот сімдесят дваlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; 3lt;/tdgt;lt;tdgt; Хрещений батько: Частина IIlt;/tdgt;lt;tdgt; одна тисяча дев`ятсот сімдесят чотириlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; 4lt;/tdgt;lt;tdgt; Хороший, поганий, злийlt;/tdgt;lt;tdgt; тисяча дев`ятсот шістьдесят шістьlt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; 5lt;/tdgt;lt;tdgt; Кримінальне чтивоlt;/tdgt;lt;tdgt; 1994lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; 6lt;/tdgt;lt;tdgt; 12 розгніваних чоловіківlt;/tdgt;lt;tdgt; +1957lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; 7lt;/tdgt;lt;tdgt; Список Шиндлераlt;/tdgt;lt;tdgt; 1993lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; 8lt;/tdgt;lt;tdgt; Пролітаючи над гніздом зозуліlt;/tdgt;lt;tdgt; 1975lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; 9lt;/tdgt;lt;tdgt; Темний лицарlt;/tdgt;lt;tdgt; 2008lt;/tdgt;lt;/trgt;lt;trgt;lt;tdgt; 10lt;/tdgt;lt;tdgt; Володар кілець: Повернення Короляlt;/tdgt;lt;tdgt; 2003lt;/tdgt;lt;/trgt;lt;/tablegt;

.bordered {border: solid #ccc 1px--moz-border-radius: 6px--webkit-border-radius: 6px-border-radius: 6px--webkit-box-shadow: 0 1px 1px #ccc--moz-box-shadow: 0 1px 1px #ccc-box-shadow: 0 1px 1px #ccc-}.bordered tr: hover {background: # fbf8e9--o-transition: all 0.1s ease-in-out--webkit-transition: all 0.1s ease-in-out--moz-transition: all 0.1s ease-in-out--ms-transition: all 0.1s ease-in-out-transition: all 0.1s ease-in-out-}.bordered td, .bordered th {border-left: 1px solid #ccc-border-top: 1px solid #ccc-padding: 10px-text-align: left-}.bordered th {background-color: # dce9f9-background-image: -webkit-gradient(linear, left top, left bottom, from(# ebf3fc), to(# dce9f9))-background-image: -webkit-linear-gradient(top, # ebf3fc, # dce9f9)-background-image:-moz-linear-gradient(top, # ebf3fc, # dce9f9)-background-image: -ms-linear-gradient(top, # ebf3fc, # dce9f9)-background-image: -o-linear-gradient(top, # ebf3fc, # dce9f9)-background-image: linear-gradient(top, # ebf3fc, # dce9f9)--webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset--moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset-border-top: none-text-shadow: 0 1px 0 rgba(255,255,255,.5)-}.bordered td: First-child, .bordered th: First-child {border-left: none-}.bordered th: First-child {-moz-border-radius: 6px 0 0 0--webkit-border-radius: 6px 0 0 0-border-radius: 6px 0 0 0-}.bordered th: Last-child {-moz-border-radius: 0 6px 0 0--webkit-border-radius: 0 6px 0 0-border-radius: 0 6px 0 0-}.bordered th: Only-child{-moz-border-radius: 6px 6px 0 0--webkit-border-radius: 6px 6px 0 0-border-radius: 6px 6px 0 0-}.bordered tr: Last-child td: First-child {-moz-border-radius: 0 0 0 6px--webkit-border-radius: 0 0 0 6px-border-radius: 0 0 0 6px-}.bordered tr: Last-child td: Last-child {-moz-border-radius: 0 0 6px 0--webkit-border-radius: 0 0 6px 0-border-radius: 0 0 6px 0-}