{"id":169,"date":"2024-05-21T09:11:09","date_gmt":"2024-05-21T07:11:09","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=169"},"modified":"2024-05-21T09:11:09","modified_gmt":"2024-05-21T07:11:09","slug":"29-dar-estilo-a-las-tablas","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/29-dar-estilo-a-las-tablas\/","title":{"rendered":"29. Dar estilo a las tablas"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Usamos CSS para hacer lucir nuestras tablas m\u00e1s atractivas. Si agregas un color de fondo en cada fila de la tabla, obtendr\u00e1s un bonito efecto de rayas de cebra. Para dise\u00f1ar cualquier otro elemento de la fila de la tabla, usa el selector <strong><em>:nth-child(even)<\/em><\/strong> de esta manera.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\"><br>Usamos CSS para hacer lucir nuestras tablas m\u00e1s atractivas. Si agregas un color de fondo en cada fila de la tabla, obtendr\u00e1s un bonito efecto de rayas de cebra.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">tr:nth-child(even) {\n&nbsp; background-color: #D6EEEE;\n}<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Nota<\/strong>: si usas (<strong><em>odd<\/em><\/strong>) en lugar de (<strong><em>even<\/em><\/strong>), el estilo ocurrir\u00e1 en la fila 1,3,5, etc. en lugar de 2,4,6, etc.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Tabla HTML &#8211; Rayas verticales de cebra<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si agregas un color de fondo en cada fila de la tabla, obtendr\u00e1s un bonito efecto de rayas de cebra. Para dise\u00f1ar cualquier otro elemento de la fila de la tabla, usa el selector <strong><em>:nth-child(even)<\/em><\/strong> de esta manera.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">td:nth-child(even), th:nth-child(even) {\n&nbsp; background-color: #D6EEEE;\n}<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Nota<\/strong>: Coloque el selector :nth-child() en los elementos th y td si desea tener el estilo en los encabezados y en las celdas normales de la tabla.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Combinar rayas de cebra verticales y horizontales<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Puede combinar el estilo de los dos ejemplos anteriores y tendr\u00e1 franjas en filas alternas y columnas alternas. Si usas un color transparente obtendr\u00e1s un efecto de superposici\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"124\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/05\/Dar-estilo-a-las-tablas.png\" alt=\"\" class=\"wp-image-172\" srcset=\"https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Dar-estilo-a-las-tablas.png 644w, https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Dar-estilo-a-las-tablas-300x58.png 300w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Usa un color <strong><em>rgba()<\/em><\/strong> para especificar la transparencia del color:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">tr:nth-child(even) {\n&nbsp; background-color: rgba(150, 212, 212, 0.4);\n}\n\nth:nth-child(even),td:nth-child(even) {\n&nbsp; background-color: rgba(150, 212, 212, 0.4);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Divisores horizontales<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/sutilweb.eu\/wp-content\/uploads\/2023\/07\/Dar-estilo-a-las-tablas-2.png\" alt=\"\" class=\"wp-image-1935\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Si especificas bordes solo en la parte inferior de cada fila de la tabla, tendr\u00e1s una tabla con divisores horizontales. Agrega la propiedad <strong><em>border-bottom<\/em><\/strong> a todos los elementos <strong><em>tr<\/em> <\/strong>para obtener divisores horizontales.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">tr {\n&nbsp;&nbsp;border-bottom: 1px solid #ddd;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Usa el selector :<strong><em>hover<\/em> <\/strong>en <strong><em>tr<\/em> <\/strong>para resaltar las filas de la tabla al pasar el mouse sobre:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">tr:hover {background-color: #D6EEEE;}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Usamos CSS para hacer lucir nuestras tablas m\u00e1s atractivas. Si agregas un color de fondo en cada fila de la tabla, obtendr\u00e1s&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":28,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-169","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Usamos CSS para hacer lucir nuestras tablas m\u00e1s atractivas. Si agregas un color de fondo en cada fila de la tabla, obtendr\u00e1s...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/169\/revisions"}],"predecessor-version":[{"id":173,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/169\/revisions\/173"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}