{"id":226336,"date":"2022-08-29T16:29:00","date_gmt":"2022-08-29T13:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226336"},"modified":"2022-11-08T23:50:29","modified_gmt":"2022-11-08T20:50:29","slug":"como-establecer-facilmente-el-color-de-fondo-de-la-tabla","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/como-establecer-facilmente-el-color-de-fondo-de-la-tabla\/","title":{"rendered":"C\u00f3mo establecer f\u00e1cilmente el color de fondo de la tabla"},"content":{"rendered":"\n<p>Las tablas son piezas esenciales de su sitio web. Se utilizan para transmitir datos e informaci\u00f3n importantes de una manera f\u00e1cil de entender. En esencia, una tabla es un grupo o una colecci\u00f3n de filas y columnas, cada una de las cuales contiene cierto tipo de informaci\u00f3n. Inicialmente, estaban destinados a ser parte del marcado HTML.<\/p>\n<p>Si bien las tablas son la forma correcta de presentar datos, muchos dise\u00f1adores las evitan simplemente porque pueden parecer poco atractivas. Sin embargo, eso se puede cambiar con un poco de trabajo e implementando algunos m\u00e9todos sencillos, por ejemplo, cambiando el color de fondo de la tabla. No lleva mucho tiempo hacer que las tablas sean atractivas f\u00e1cilmente con algunos ajustes.<\/p>\n<p>Pronto descubrir\u00e1 que la presentaci\u00f3n de datos tabulares funciona mejor en tablas, como es de esperar. <a href=\"https:\/\/wpdatatables.com\/html-tables\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Las celdas de la tabla se utilizan a menudo en las marcas HTML<\/a> como componentes donde se coloca el contenido para crear un sitio web. Estas celdas, o cuadr\u00edculas, son partes esenciales de los dise\u00f1os de sitios web. Por eso es importante que hagas que las tablas de tu sitio web sean atractivas y est\u00e9n bien engrasadas.<\/p>\n<p>En este art\u00edculo creado por nuestro equipo en <a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wpDataTables<\/a>, veremos c\u00f3mo puede cambiar y configurar el color de fondo de la tabla f\u00e1cilmente. Esto puede, como m\u00ednimo, aportar algo de variedad al contenido.<\/p>\n<h3>Tablas de WordPress<\/h3>\n<p>La versi\u00f3n predeterminada de WordPress le brinda a usted, el creador, ninguna ayuda significativa para <a href=\"https:\/\/wpdatatables.com\/documentation\/creating-wpdatatables\/creating-wpdatatables-from-google-spreadsheets\/creating-tables-wordpress-google-spreadsheets-formulas\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">crear o cambiar tablas.<\/a> Entonces, tendr\u00e1s que hacer esto manualmente. Como creador de un <a href=\"https:\/\/wordpress.mediadoma.com\/es\/como-anular-la-publicacion-de-un-sitio-de-wordpress-con-un-complemento-en-construccion\/\" title=\"sitio de WordPress,\">sitio de WordPress,<\/a> primero debe habilitar el modo Texto del editor antes de cambiar el c\u00f3digo HTML e insertar c\u00f3digos para tablas en \u00e9l.<\/p>\n<p>Adem\u00e1s de eso, el ajuste del color de fondo de la tabla debe hacerse manualmente. Despu\u00e9s de crear una tabla, el color de fondo de una tabla se configurar\u00e1 autom\u00e1ticamente para que coincida con el fondo de un tema. La \u00fanica forma de hacer que el fondo de la tabla sea \u00fanico es cambiar los valores del c\u00f3digo e <a href=\"https:\/\/wordpress.mediadoma.com\/es\/tablas-css-y-su-codigo-que-puedes-usar\/\" title=\"implementar estos cambios con CSS\">implementar estos cambios con CSS<\/a> m\u00e1s adelante.<\/p>\n<h2>C\u00f3mo cambiar el color de fondo de la tabla manualmente<\/h2>\n<p>Cuando desee incorporar una tabla HTML en su sitio web, es posible que desee dise\u00f1arla un poco antes de colocar informaci\u00f3n en las celdas de la tabla. Puede, por ejemplo, cambiar el color de fondo de la tabla HTML, pero hay otros cambios que puede realizar en los bordes de la tabla, los colores de las columnas y m\u00e1s.<\/p>\n<p>Cambiar el c\u00f3digo CSS es esencial para todos los cambios en el dise\u00f1o de la tabla. Cosas como el color de fondo de la tabla se establecen en el c\u00f3digo CSS, al igual que todas las propiedades de toda la tabla HTML y las propiedades de las filas y celdas.<\/p>\n<p>Ahora, echemos un vistazo a c\u00f3mo cambiar los colores de fondo manualmente cambiando el c\u00f3digo CSS.<\/p>\n<h3>C\u00f3mo cambiar el color de fondo de toda la tabla<\/h3>\n<p>Para hacer esto, simplemente debe insertar el siguiente c\u00f3digo.<\/p>\n<pre><code>&lt;table style=\"background-color:#70163C;\"&gt;<\/code><\/pre>\n<h3>Cambiar el color de una fila de la tabla<\/h3>\n<p>Tambi\u00e9n puede cambiar el color de una fila de tabla individual, que puede diferir del color de fondo de la tabla. Cuando una fila individual es de un color diferente al del fondo, esa fila deseada de la tabla llamar\u00e1 la atenci\u00f3n de las personas. Con el siguiente pasaje de c\u00f3digo, podemos cambiar el color de una sola fila. El color del texto tambi\u00e9n se modifica.<\/p>\n<pre><code>&lt;table style=\"background-color:#70163C;\"&gt;<\/code><\/pre>\n<h3>Cambiar el color de fondo de una celda<\/h3>\n<p>Al igual que puede cambiar el color de una fila individual, tambi\u00e9n puede cambiar el color de una celda individual. Para cambiar el color de una fila, puede agregar la propiedad &quot;estilo&quot; en el<\/p>\n<p>corchetes y definir el color de la celda desde all\u00ed.<\/p>\n<pre><code>&lt;table style=\"background-color:#70163C;\"&gt;<\/code><\/pre>\n<h3>Fondo de celda y color del texto<\/h3>\n<p>A continuaci\u00f3n, echemos un vistazo a c\u00f3mo configurar el color de fondo para filas enteras y c\u00f3mo cambiar los colores de texto correspondientes. Puede hacerlo agregando las propiedades de color de fondo a<\/p>\n<p>etiquetas, como se ejemplificar\u00e1 con el c\u00f3digo fuente a continuaci\u00f3n. Los colores de los bordes tambi\u00e9n se ver\u00e1n alterados, ya que pueden coincidir con los colores de fondo.<\/p>\n<pre><code>&lt;style type=\"text\/css\"&gt;\n<\/code><\/pre>\n<h2>Uso de complementos para cambiar el color de fondo de la tabla<\/h2>\n<p>En su lugar, puede simplificar todo el proceso de cambiar el color <a href=\"https:\/\/wordpress.mediadoma.com\/es\/complementos-de-jquery-table-que-debe-consultar-wpdatatables\/\" title=\"de fondo de la tabla utilizando algunos complementos\">de fondo de la tabla utilizando algunos complementos<\/a>. De forma predeterminada, WordPress no ofrece la funci\u00f3n para cambiar los colores de la tabla, pero puedes incorporar algunos complementos que te permitir\u00e1n hacerlo muy r\u00e1pidamente. Aqu\u00ed, veremos los mejores complementos que puede usar para cambiar el color de fondo de la tabla en los sitios de WordPress y c\u00f3mo usarlos.<\/p>\n<h3>wpDataTables<\/h3>\n<p>wpDataTables es <a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el complemento de tablas de WordPress<\/a> m\u00e1s vendido que hace que su trabajo con tablas, gr\u00e1ficos y administraci\u00f3n de datos sea muy f\u00e1cil. M\u00e1s de 30 000 empresas e individuos ya conf\u00edan en wpDataTables para trabajar con datos financieros, cient\u00edficos, estad\u00edsticos, comerciales y de otro tipo.<\/p>\n<p>Las tablas de WordPress creadas con el complemento wpDataTables responden de forma nativa y se pueden usar en cualquier tipo de dispositivo.<\/p>\n<p>wpDataTables funciona r\u00e1pido ya sea que su tabla tenga algunas filas o algunos millones. Todas las operaciones ser\u00e1n manejadas por el servidor MySQL.<\/p>\n<p>wpDataTables le permite crear filtros individuales para su conjunto de datos, que es una forma bastante pr\u00e1ctica de reducir r\u00e1pidamente los resultados de su tabla de WordPress.<\/p>\n<h3>Prensa de mesa<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tablepress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-201276-61e8be91e5e35.jpg\" alt=\"C\u00f3mo establecer f\u00e1cilmente el color de fondo de la tabla\" \/><\/a><\/p>\n<p>Crear tablas impresionantes y atractivas con colores de fondo \u00fanicos nunca ha sido tan f\u00e1cil como con TablePress. Puede cambiar los colores usando la pesta\u00f1a Opciones de complemento en TablePress, que le permite cambiar los colores de la tabla r\u00e1pidamente.<\/p>\n<p>Tambi\u00e9n le permite cambiar el color de una sola fila. Por ejemplo, un fragmento de c\u00f3digo como este podr\u00eda usarse para hacerlo:<\/p>\n<pre><code>.tablepress-id-N .row-X td {<\/code><\/pre>\n<p>Puede cambiar el c\u00f3digo de color para elegir los colores que desea tener.<\/p>\n<h3>Mesas Ninja<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/ninja-tables\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-201276-61e8be93047fe.jpg\" alt=\"C\u00f3mo establecer f\u00e1cilmente el color de fondo de la tabla\" \/><\/a><\/p>\n<p>Otra opci\u00f3n es el plugin Ninja Tables. Este complemento le permite crear <a href=\"https:\/\/wordpress.mediadoma.com\/es\/tablas-receptivas-con-css-y-html-o-wordpress\/\" title=\"tablas impresionantes y receptivas.\">tablas impresionantes y receptivas.<\/a> Todo se puede hacer con solo un par de clics; todo lo que necesita hacer es abrir la parte &quot;editar&quot; del complemento. Esto revela algunas opciones muy completas para modificar sus tablas.<\/p>\n<p>Si disfrut\u00f3 leyendo este art\u00edculo sobre c\u00f3mo configurar f\u00e1cilmente el color de fondo de la tabla, debe consultar este sobre <a href=\"https:\/\/wordpress.mediadoma.com\/es\/las-tablas-bootstrap-mas-utiles-que-puede-descargar-y-usar\/\" title=\"las tablas de Bootstrap\">las tablas de Bootstrap<\/a>.<\/p>\n<p>Tambi\u00e9n escribimos sobre algunos temas relacionados, como C\u00f3mo <a href=\"https:\/\/wordpress.mediadoma.com\/es\/como-centrar-una-tabla-con-css-guia-rapida\/\" title=\"centrar una tabla\">centrar una tabla<\/a> con CSS, <a href=\"https:\/\/wpdatatables.com\/html-tables\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tablas HTML<\/a>, tablas <a href=\"https:\/\/wordpress.mediadoma.com\/es\/tablas-receptivas-con-css-y-html-o-wordpress\/\" title=\"receptivas\">receptivas<\/a> con CSS, <a href=\"https:\/\/wordpress.mediadoma.com\/es\/tablas-css-y-su-codigo-que-puedes-usar\/\" title=\"tablas CSS\">tablas CSS<\/a> y <a href=\"https:\/\/wordpress.mediadoma.com\/es\/complementos-de-jquery-table-que-debe-consultar-wpdatatables\/\" title=\"complementos de tablas jQuery\">complementos de tablas jQuery<\/a>.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpdatatables.com\" class=\"external external_icon\">wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El color de fondo de la tabla debe hacerse manualmente. Despu\u00e9s de crear una tabla, el color de fondo de una tabla se configurar\u00e1 autom\u00e1ticamente para que coincida.<\/p>\n","protected":false},"author":1,"featured_media":201277,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[840,861],"tags":[1172],"class_list":["post-226336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/226336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=226336"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/226336\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/201277"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=226336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=226336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=226336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}