Esta es una Tabla HTML Responsive para blogger, puedes verla en acción aquí. ir al ejemplo
Estilos CSS del plugins Tabla Responsive Para Blogger
/*!
* TRB BLOGGER
* by tutorialbloggerorg.blogspot.com
* Insertar los estilos CSS antes de ]]></b:skin>
*/
/* Levels Table */
table.levels {
width: 100%;
text-align: center;
vertical-align: middle;
margin-bottom: 1em;
color: #444;
}
table.levels thead {
position: absolute;
left: -9999em;
top: -9999em;
display: block;
}
@media only screen and (min-width: 600px) {
table.levels thead {
position: relative;
display: table-header-group;
}
}
table.levels thead th {
background: #ffefd3;
font: 13px Helvetica, Arial, sans-serif;
color: #7a0000;
letter-spacing: 1px;
padding: 10px;
width: 16.666%;
text-align: center;
}
table.levels thead th:hover {
background: #eee;
}
table.levels thead th:first-child {
border-left: none;
background: none;
color: #FFF;
}
table.levels tbody {
font: 1em/1.5em Helvetica, Arial, sans-serif;
display: block;
margin: 0;
}
@media only screen and (min-width: 600px) {
table.levels tbody {
font: 0.8125em/1.5em Helvetica, Arial, sans-serif;
display: table-row-group;
border: 1px solid #CCC;
border-bottom: 2px solid #303030;
}
}
table.levels tbody tr {
border: 1px solid #ccc;
margin-bottom: 1em;
display: block;
width: 100%;
float: left;
}
@media only screen and (min-width: 600px) {
table.levels tbody tr {
display: table-row;
float: none;
}
table.levels tbody tr td {
background: #f7f7f7;
border-bottom: 1px solid #dedede;
}
}
table.levels tbody tr th {
background: #eee;
display: block;
font: bold 1.35em/1.5em Helvetica, Arial, sans-serif;
padding: 6px 0;
text-align: center;
}
table.levels tbody tr th:hover {
background: #FFF;
}
@media only screen and (min-width: 600px) {
table.levels tbody tr th {
display: table-cell;
padding-right: 10px;
font-size: 1em;
line-height: 1.5em;
}
}
table.levels tbody tr td {
display: block;
float: left;
width: 20%;
padding: 0 0 5px 0;
}
table.levels tbody tr td:hover {
background: #FFF;
}
@media only screen and (min-width: 600px) {
table.levels tbody tr td {
padding: 12px;
display: table-cell;
float: none;
width: auto;
}
}
table.levels tbody tr td:nth-of-type(n):before {
background: #e37509;
color: #FFF;
font-weight: bold;
display: block;
padding: 5px 0;
margin-bottom: 5px;
}
@media only screen and (min-width: 600px) {
table.levels tbody tr td:nth-of-type(n):before {
content: "";
background: none;
padding: 0;
margin-bottom: 0;
}
}
table.levels td:nth-of-type(1):before {
content: "ítem 1";
}
table.levels td:nth-of-type(2):before {
content: "ítem 2";
}
table.levels td:nth-of-type(3):before {
content: "ítem 3";
}
table.levels td:nth-of-type(4):before {
content: "ítem 4";
}
table.levels td:nth-of-type(5):before {
content: "ítem 5";
}
@media only screen and (min-width: 600px) {
table.levels td:nth-of-type(n):before {
content: "";
background: none;
padding: 0;
margin-bottom: 0;
}
}
.boton_personalizado{
background-color: gold;
font-size: .7rem;
padding: .35rem .7rem;
border: .09rem solid #555555;
border-radius: 5px;
color: black;
text-decoration: none;
box-shadow: inset 0px 0px 0.5px #555555;
} Código HTML del plugins Tabla Responsive Para Blogger. Selecciona la Tabla Comparativa Responsive y coloca donde quieres que aparezca en tu post o articulo
<center><h3>Comparativa de Mejores Juegos de Destornilladores </h3></center>
<table class='levels'>
<thead>
<tr>
<th>Mejores Productos</th>
<th>VESSEL - Juego de destornilladores de precisión TD-56S/+0, 00, 000, 0000, -0.7</th>
<th>Wera 05073675001 Juego de destornilladores, Negro</th>
<th>StarTech CTK100P Kit Destornilladores Precision, Negro, 7 Piezas</th>
<th>Bellota 6250J - Destornilladores de Precisión, Kit de 6 destornilladores</th>
<th>Stanley 0-65-492 Juego 6 destornilladores de precisión FatMax, Set de 6 Piezas</th>
</tr>
</thead>
<tbody>
<tr>
<th>Imagen</th>
<td><img src="https://images-na.ssl-images-amazon.com/images/I/71hV7zq0N7L._AC_SL1500_.jpg" width="80" height="100" alt="Italian Trulli"></td>
<td><img src="https://images-na.ssl-images-amazon.com/images/I/71%2BD5KJeNnL._AC_SL1500_.jpg" width="80" height="100" alt="Italian Trulli"></td>
<td><img src="https://images-na.ssl-images-amazon.com/images/I/81iLP7t2W6L._AC_SL1500_.jpg" width="80" height="100" alt="Italian Trulli"></td>
<td><img src="https://images-na.ssl-images-amazon.com/images/I/61EBzpPNwiL._AC_SL1181_.jpg" width="80" height="100" alt="Italian Trulli"></td>
<td><img src="https://images-na.ssl-images-amazon.com/images/I/81vYwOuytUL._AC_SL1500_.jpg" width="80" height="100" alt="Italian Trulli"></td>
</tr>
<tr>
<th>Marca</th>
<td>VESSEL</td>
<td>Wera</td>
<td>StarTech</td>
<td>Bellota</td>
<td>STANLEY</td>
</tr>
<tr>
<th>Modelo</th>
<td>TD-56S</td>
<td>05073675001</td>
<td>CTK100P</td>
<td>6250J</td>
<td>0-65-492</td>
</tr>
<tr>
<th>Uso</th>
<td>Bricolaje, manualidades</td>
<td>Profesional</td>
<td>Bricolaje, aficiones</td>
<td>Bricolaje, profesional</td>
<td>Bricolaje, profesional</td>
</tr>
<tr>
<th>Precio</th>
<td><a class="boton_personalizado" target="_blank" rel="noopener noreferrer" href="https://www.amazon.es/">Ver Precio</a>
</td>
<td><a class="boton_personalizado" target="_blank" rel="noopener noreferrer" href="https://www.amazon.es/">Ver Precio</a></td>
<td><a class="boton_personalizado" target="_blank" rel="noopener noreferrer" href="https://www.amazon.es/">Ver Precio</a></td>
<td><a class="boton_personalizado" target="_blank" rel="noopener noreferrer" href="https://www.amazon.es/">Ver Precio</a></td>
<td><a class="boton_personalizado" target="_blank" rel="noopener noreferrer" href="https://www.amazon.es/">Ver Precio</a></td>
</tr>
</tbody>
</table>¿No logras hacer funcionar este plugins en tu blog?
Cuenta conmigo para implementar este plugins en tu blogger. Si quieres que lo haga yo por ti, porque no tienes tiempo ni ganas de hacerlo, solo debes:
¡Contrátame Aquí!