diseñoDeTablasCon_CSS
Anuncio
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; }
