Tablas con encabezado y degradado

1) Añadir estilo en Code Snippets

add_action( 'wp_head', function () { ?>
<style>
table.TableGrad1 {
width: 50%;
background: rgb(186,226,254);
background: -moz-linear-gradient(146deg, rgba(186,226,254,1) 0%, rgba(127,144,180,1) 100%);
background: -webkit-linear-gradient(146deg, rgba(186,226,254,1) 0%, rgba(127,144,180,1) 100%);
background: linear-gradient(146deg, rgba(186,226,254,1) 0%, rgba(127,144,180,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bae2fe",endColorstr="#7f90b4",GradientType=1);
border-collapse: collapse;
border-width: 1px;
border-color: #ffcc00;
border-style: solid;
color: #ffffff;
}

Diseño de sitios y páginas web

Desde landing page hasta tiendas online, incluye dominio y hosting

Ver planes y precios

¿Necesitas marketing digital para tu negocio?

Planes desde posicionamiento SEO, redes sociales, Google y ChatGPT ADS.

Ver planes

Dossier de ventas

Convertimos tu presentación PPT en una herramienta de prospección optimizada para móviles.

Cotizar ahora

‹ ›

table.TableGrad1 td, table.TableGrad1 th {
border-width: 1px;
border-color: #f1f1f1;
border-style: solid;
padding: 20px;
}

table.TableGrad1 thead {
background: rgb(0,217,220);
background: -moz-linear-gradient(146deg, rgba(0,217,220,1) 0%, rgba(239,250,97,1) 100%);
background: -webkit-linear-gradient(146deg, rgba(0,217,220,1) 0%, rgba(239,250,97,1) 100%);
background: linear-gradient(146deg, rgba(0,217,220,1) 0%, rgba(239,250,97,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00d9dc",endColorstr="#effa61",GradientType=1);
}
</style>
<?php } );

2) Añade código HTML en tu post o pagina

<table class="TableGrad1">
<thead>
<tr>
<th>HOSTING PARA WORDPRESS</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño.

El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".

Estos textos hacen parecerlo un español que se puede leer.
</td>
</tr>
</tbody>
</table>

Generadores de degradados

Código degradado: https://cssgradient.io

Circulo degradados: https://mybrandnewlogo.com/es/generador-de-gradiente-de-color