Skip to content

Instantly share code, notes, and snippets.

@junioryauricasa
Created December 9, 2017 19:14
Show Gist options
  • Save junioryauricasa/0b1a157e8280b3029a42a265fd593962 to your computer and use it in GitHub Desktop.
Save junioryauricasa/0b1a157e8280b3029a42a265fd593962 to your computer and use it in GitHub Desktop.
table style css - Tablas estilo EXCEL
<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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
/* 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