Tablas CSS Tabla base <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Tablas CSS</title> <link href="csstablegallery-2.css" type="text/css" rel="stylesheet" </head> <body> <table > <tr id="titulo"> <td >Enc1</td> <td>Enc2</td> <td>Enc3</td> <td>Enc4</td> <td>Enc5</td> </tr> <tr> <td><a href="#">Gato</a></td> <td>Animal</td> <td>4</td> <td>2</td> <td>Varios</td> </tr> Tabla base <tr> <td><a href="#">Perro</a></td> <td>Animal</td> <td>4</td> <td>2</td> <td>Varios</td> </tr> <tr> <td><a href="#">Libro</a></td> <td>Cosa</td> <td>0</td> <td>0</td> <td>Varios</td> </tr> <tr> <td><a href="#">Rosa</a></td> <td>Planta</td> <td>0</td> <td>0</td> <td>Roja</td> </tr> </table> </body> </html> Formato CSS 1 table { width: 650px; border:1px solid #000000; border-spacing: 0px; } table a, table, tbody, tfoot, tr, th, td { font-family: Arial, Helvetica, sans-serif; } table caption { font-size: 1.8em; text-align: left; text-indent: 100px; background: url(bg_caption.gif) left top; height: 40px; color: #FFFFFF; border:1px solid #000000; } thead th { background: url(bg_th.gif) left; height: 21px; color: #FFFFFF; font-size: 0.8em; font-family: Arial; font-weight: bold; padding: 0px 7px; margin: 20px 0px 0px; text-align: left; } tbody tr { background: #ffffff; } tbody tr.odd { background: #f0f0f0; } Formato CSS1 tbody th { background: url(arrow_white.gif) left center no-repeat; background-position: 5px; padding-left: 40px !important; } tbody tr.odd th { background: url(arrow_red.gif) left center no-repeat; background-position: 5px; padding-left: 40px !important; } tbody th, tbody td { font-size: 0.8em; line-height: 1.4em; font-family: Arial, Helvetica, sans-serif; color: #000000; padding: 10px 7px; border-bottom: 1px solid #800000; text-align: left; } tbody a { color: #000000; font-weight: bold; text-decoration: none; } tbody a:hover { color: #ffffff; text-decoration: underline; } tbody tr:hover th { background: #800000 url(arrow_red.gif) left center no-repeat; background-position: 5px; color: #ffffff; } tbody tr.odd:hover th { background: #000000 url(arrow_red.gif) left center no-repeat; background-position: 5px; color: #ffffff; } tbody tr:hover th a, tr.odd:hover th a{ color: #ffffff; } tbody tr:hover td, tr:hover td a, tr.odd:hover td, tr.odd:hover td a { background: #800000; color: #ffffff; } tbody tr.odd:hover td, tr.odd:hover td a{ background: #000000; color: #ffffff; } tfoot th, tfoot td { background: #ffffff ; font-size: 0.8em; color: #ffffff; height: 21px;} Formato CSS2 table { color: #7F7F7F; font: 0.8em/1.6em "Trebuchet MS",Verdana,sans-serif; border-collapse: collapse } table,caption { margin: 0 auto; border-right: 1px solid #CCC; border-left: 1px solid #CCC } caption,th,td { border-left: 0; padding: 10px } caption,thead th,tfoot th,tfoot td { background-color: #E63C1E; color: #FFF; font-weight: bold; text-transform: uppercase } thead th { background-color: #C30; color: #FFB3A6; text-align: center} Formato CSS2 tbody th { padding: 20px 10px } tbody tr.odd { background-color: #F7F7F7; color: #666 } tbody a { padding: 1px 2px; color: #333; text-decoration: none; border-bottom: 1px dotted #E63C1E } tbody a:active,tbody a:hover,tbody a:focus,tbody a:visited { color: #666 } tbody tr:hover { background-color: #EEE; color: #333 } tbody tr:hover a { background-color: #FFF } tbody td+td+td+td a { color: #C30; font-weight: bold; border-bottom: 0 } tbody td+td+td+td a:active,tbody td+td+td+td a:hover,tbody td+td+td+td a:focus,tbody td+td+td+td a:visited { color: #E63C1E } tbody td a[href="http://www.rodcast.com.br/"] { margin: 0 auto; display: block; width: 15px; height: 15px; background: transparent url('data:image/gif;base64,R0lGODlhDwAPAIAAACEp Mf///yH5BAAAAAAALAAAAAAPAA8AAAIjjA8Qer0J mYvULUOlxXEjaEndliUeA56c97TqSD5pfJnhNxYAOw %3D%3D') no-repeat; text-indent: -999em; border-bottom: 0 } tbody a:visited:after { font-family: Verdana,sans-serif; content: "\00A0\ Formato CSS3 table { width: 100%; color: #212424; margin: 0 0 1em 0; font: 80%/150% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Lucida, Helvetica, sansserif; } table, tr, th, td { margin: 0; padding: 0; border-spacing: 0; border-collapse: collapse; } caption { width: 100%; height: 39px; font-size: 0; line-height: 0; text-indent: -5000em; background: url(caption.gif) no-repeat 98% 0; } caption:hover { background-position: 98% 100%;} Formato CSS3 thead { background: #524123;} thead tr th { padding: 1em 0; text-align: center; color: #FAF7D4; border-bottom: 3px solid #A5D768;} tfoot { color: #fff; background: #524123;} tfoot tr th, tfoot tr td { padding: .2em .6em; border-top: 2px solid #A5D768;} tfoot tr th { } tfoot tr td { text-align: right;} /* BODY */ tbody tr td { background: #DDF0BD url(../bg_cell.gif) norepeat top left;} tbody tr.odd td { background-color: #D0EBA6;} tbody tr td:hover, tbody tr.odd td:hover { background: #c5e894;} tbody tr th, tbody tr td { padding: 0.1em 0.4em; border: 1px solid #a6ce39;} tbody tr th { padding-right: 1em; text-align: right; font-weight: normal; background: #c5e894 url(bg_cell.gif) no-repeat top left; text-transform: uppercase; } tbody tr th:hover { background: #D0EBA6; } table a[href*="taimar.pri.ee"] { float: left; width: 64px; height: 64px; font-size: 0; text-decoration: none; background: transparent url(http://taimar.pri.ee/examples/table-design/taimar.gif) no-repeat 0 0; } table a[title^="Download"] { float: none; width: auto; height: auto; font-size: 100%; background: none; } table a { color: #854400; text-decoration: none; } table a:visited { text-decoration: line-through; } table a:hover { text-decoration: underline; }