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;
}

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