Created
December 9, 2017 19:14
-
-
Save junioryauricasa/0b1a157e8280b3029a42a265fd593962 to your computer and use it in GitHub Desktop.
table style css - Tablas estilo EXCEL
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="excel-2000.css"/> | |
| <link rel="stylesheet" type="text/css" href="excel-xp.css"/> | |
| <link rel="stylesheet" type="text/css" href="excel-2003.css"/> | |
| <link rel="stylesheet" type="text/css" href="excel-2007.css"/> | |
| <script lang="javascript"> | |
| function ChangeTableClass(newClass) | |
| { | |
| document.getElementById("TheTable").className = "ExcelTable" + newClass; | |
| } | |
| </script> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
| <title>Table Excel</title> | |
| </head> | |
| <body> | |
| selecciona un estilo | |
| <select onchange='ChangeTableClass(this.options[this.selectedIndex].value);'> | |
| <option value="None">HTML Default</option> | |
| <option value="2000">Excel 2000</option> | |
| <option value="XP">Excel XP</option> | |
| <option value="2003">Excel 2003</option> | |
| <option value="2007">Excel 2007</option> | |
| </select> | |
| <p/> | |
| <table id="TheTable" border="1" class=""> | |
| <tr> | |
| <th class="heading"> </th> | |
| <th>Nombre</th> | |
| <th>Apellido</th> | |
| <th>Dirección</th> | |
| <th>Telefono</th> | |
| </tr> | |
| <tr> | |
| <td class="heading">12</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">13</td> | |
| <td align="left" valign="bottom">Alma Marcela</td> | |
| <td align="right" valign="bottom">silva de Alegria</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">14</td> | |
| <td align="left" valign="bottom">Elba</td> | |
| <td align="right" valign="bottom">Nane Roh</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">15</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">16</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">17</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| </table> | |
| <br /> | |
| <div class="excel2000"> | |
| <p>Estilo excel 2000</p> | |
| <table id="TheTable" border="1" class="ExcelTable2000"> | |
| <tbody> | |
| <tr> | |
| <th class="heading"> </th> | |
| <th>Nombre</th> | |
| <th>Apellido</th> | |
| <th>Dirección</th> | |
| <th>Telefono</th> | |
| </tr> | |
| <tr> | |
| <td class="heading">12</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">13</td> | |
| <td align="left" valign="bottom">Alma Marcela</td> | |
| <td align="right" valign="bottom">silva de Alegria</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">14</td> | |
| <td align="left" valign="bottom">Elba</td> | |
| <td align="right" valign="bottom">Nane Roh</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">15</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">16</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">17</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="excel2003"> | |
| <p>Estilo excel XP</p> | |
| <table id="TheTable" border="1" class="ExcelTableXP"> | |
| <tbody> | |
| <tr> | |
| <th class="heading"> </th> | |
| <th>Nombre</th> | |
| <th>Apellido</th> | |
| <th>Dirección</th> | |
| <th>Telefono</th> | |
| </tr> | |
| <tr> | |
| <td class="heading">12</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">13</td> | |
| <td align="left" valign="bottom">Alma Marcela</td> | |
| <td align="right" valign="bottom">silva de Alegria</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">14</td> | |
| <td align="left" valign="bottom">Elba</td> | |
| <td align="right" valign="bottom">Nane Roh</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">15</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">16</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">17</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="excel2003"> | |
| <p>Estilo excel 2003</p> | |
| <table id="TheTable" border="1" class="ExcelTable2003"> | |
| <tbody> | |
| <tr> | |
| <th class="heading"> </th> | |
| <th>Nombre</th> | |
| <th>Apellido</th> | |
| <th>Dirección</th> | |
| <th>Telefono</th> | |
| </tr> | |
| <tr> | |
| <td class="heading">12</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">13</td> | |
| <td align="left" valign="bottom">Alma Marcela</td> | |
| <td align="right" valign="bottom">silva de Alegria</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">14</td> | |
| <td align="left" valign="bottom">Elba</td> | |
| <td align="right" valign="bottom">Nane Roh</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">15</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">16</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">17</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <br /> | |
| <div class="excel2007"> | |
| <p>Estilo excel 2007</p> | |
| <table id="TheTable" border="1" class="ExcelTable2007"> | |
| <tbody> | |
| <tr> | |
| <th class="heading"> </th> | |
| <th>Nombre</th> | |
| <th>Apellido</th> | |
| <th>Dirección</th> | |
| <th>Telefono</th> | |
| </tr> | |
| <tr> | |
| <td class="heading">12</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">13</td> | |
| <td align="left" valign="bottom">Alma Marcela</td> | |
| <td align="right" valign="bottom">silva de Alegria</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">14</td> | |
| <td align="left" valign="bottom">Elba</td> | |
| <td align="right" valign="bottom">Nane Roh</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">15</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">16</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| <tr> | |
| <td class="heading">17</td> | |
| <td align="left" valign="bottom">Elver</td> | |
| <td align="right" valign="bottom">Galarga</td> | |
| <td align="right" valign="bottom">Pje las Cucardas 123</td> | |
| <td align="right" valign="bottom">9555rriente</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Stylish excel 2007 */ | |
| .ExcelTable2007 { | |
| border: 1px solid #B0CBEF; | |
| border-width: 1px 0px 0px 1px; | |
| font-size: 11pt; | |
| font-family: Calibri; | |
| font-weight: 100; | |
| border-spacing: 0px; | |
| border-collapse: collapse; | |
| } | |
| .ExcelTable2007 TH { | |
| background-image: url(excel-2007-header-bg.gif); | |
| background-repeat: repeat-x; | |
| font-weight: normal; | |
| font-size: 14px; | |
| border: 1px solid #9EB6CE; | |
| border-width: 0px 1px 1px 0px; | |
| height: 17px; | |
| background: rgba(212,228,239,1); | |
| background: -moz-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 11%, rgba(212,228,239,1) 31%, rgba(183,195,204,1) 100%); | |
| background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(212,228,239,1)), color-stop(11%, rgba(212,228,239,1)), color-stop(31%, rgba(212,228,239,1)), color-stop(100%, rgba(183,195,204,1))); | |
| background: -webkit-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 11%, rgba(212,228,239,1) 31%, rgba(183,195,204,1) 100%); | |
| background: -o-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 11%, rgba(212,228,239,1) 31%, rgba(183,195,204,1) 100%); | |
| background: -ms-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 11%, rgba(212,228,239,1) 31%, rgba(183,195,204,1) 100%); | |
| background: linear-gradient(to bottom, rgba(212,228,239,1) 0%, rgba(212,228,239,1) 11%, rgba(212,228,239,1) 31%, rgba(183,195,204,1) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#b7c3cc', GradientType=0 ); | |
| } | |
| .ExcelTable2007 TD { | |
| border: 0px; | |
| background-color: white; | |
| padding: 0px 4px 0px 2px; | |
| border: 1px solid #D0D7E5; | |
| border-width: 0px 1px 1px 0px; | |
| } | |
| .ExcelTable2007 TD B { | |
| border: 0px; | |
| background-color: white; | |
| font-weight: bold; | |
| } | |
| .ExcelTable2007 TD.heading { | |
| background-color: #E4ECF7; | |
| text-align: center; | |
| border: 1px solid #9EB6CE; | |
| border-width: 0px 1px 1px 0px; | |
| } | |
| .ExcelTable2007 TH.heading { | |
| background-image: url(excel-2007-header-left.gif); | |
| background-repeat: none; | |
| } | |
| /* Stylish excel XP */ | |
| .ExcelTableXP { | |
| border: 1px solid #716F64; | |
| border-width: 1px 0px 0px 1px; | |
| font-size: 10pt; | |
| font-family: arial; | |
| border-spacing: 0px; | |
| border-collapse: collapse; | |
| } | |
| .ExcelTableXP TH { | |
| background-color: #EFEDDE; | |
| border: 1px solid #ACA899; | |
| border-width: 0px 1px 1px 0px; | |
| font-weight: normal; | |
| } | |
| .ExcelTableXP TD { | |
| border: 0px; | |
| background-color: white; | |
| padding: 0px 4px 0px 2px; | |
| border: 1px solid #C0C0C0; | |
| border-width: 0px 1px 1px 0px; | |
| } | |
| .ExcelTableXP TD.heading { | |
| background-color: #EFEDDE; | |
| text-align: center; | |
| padding: 0px 0px 0px 0px; | |
| border: 1px solid #ACA899; | |
| border-width: 0px 1px 1px 0px; | |
| } | |
| .ExcelTable2000 { | |
| border: 0px; | |
| background-color: #BDBDBD; | |
| font-size: 10pt; | |
| font-family: arial; | |
| border-spacing: 1px; | |
| } | |
| .ExcelTable2000 TH { | |
| background-color: #ECE9D8; | |
| border: 0px; | |
| font-weight: normal; | |
| border-left: 1px solid white; | |
| } | |
| .ExcelTable2000 TD { | |
| border: 0px; | |
| background-color: white; | |
| padding: 0px 4px 0px 2px; | |
| } | |
| .ExcelTable2000 TD.heading { | |
| background-color: #ECE9D8; | |
| text-align: center; | |
| padding: 0px 0px 0px 0px; | |
| border-top: 1px solid white; | |
| } | |
| .ExcelTable2003 { | |
| border: 1px solid #404040; | |
| border-width: 1px 0px 0px 1px; | |
| font-size: 10pt; | |
| font-family: arial; | |
| border-spacing: 0px; | |
| border-collapse: collapse; | |
| } | |
| .ExcelTable2003 TH { | |
| background-color: #D4D0C8; | |
| border: 1px solid #808080; | |
| border-width: 0px 1px 1px 0px; | |
| font-weight: normal; | |
| } | |
| .ExcelTable2003 TD { | |
| border: 0px; | |
| background-color: white; | |
| padding: 0px 4px 0px 2px; | |
| border: 1px solid #C0C0C0; | |
| border-width: 0px 1px 1px 0px; | |
| } | |
| .ExcelTable2003 TD.heading { | |
| background-color: #D4D0C8; | |
| border: 1px solid #808080; | |
| border-width: 0px 1px 1px 0px; | |
| text-align: center; | |
| padding: 0px 0px 0px 0px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment