{"id":174,"date":"2024-05-21T09:12:59","date_gmt":"2024-05-21T07:12:59","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=174"},"modified":"2024-05-21T09:12:59","modified_gmt":"2024-05-21T07:12:59","slug":"30-colgroup-en-tablas","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/30-colgroup-en-tablas\/","title":{"rendered":"30. Colgroup en tablas"},"content":{"rendered":"\n

El elemento <colgroup><\/em><\/strong> es utilizado para especificar un estilo espec\u00edfico a las columnas de una tabla. Si deseas aplicar estilo a las dos primeras columnas de una tabla, utiliza los elementos <colgroup><\/em><\/strong> y <col><\/em><\/strong>.<\/p>\n\n\n\n

\"Colgroup<\/figure>\n\n\n\n

El elemento <colgroup><\/em><\/strong> debe usarse como contenedor para las especificaciones de la columna. Cada grupo se especifica con un elemento <col><\/em><\/strong>. El atributo span<\/em> <\/strong>especifica cu\u00e1ntas columnas recibe el estilo. El atributo style<\/em><\/strong> especifica el estilo para dar a las columnas.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n<head>\n<style>\ntable, th, td {\nborder: 1px solid black;\nborder-collapse: collapse;\n}\n<\/style>\n<\/head>\n<body>\n\n<h2>Colgroup<\/h2>\n\n<table style=\"width: 100%;\">\n<colgroup>\n<col span=\"2\" style=\"background-color: #D6EEEE\">\n<\/colgroup>\n<tr>\n<th>MON<\/th>\n<th>TUE<\/th>\n<th>WED<\/th>\n<th>THU<\/th>\n<th>FRI<\/th>\n<th>SAT<\/th>\n<th>SUN<\/th>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>2<\/td>\n<td>3<\/td>\n<td>4<\/td>\n<td>5<\/td>\n<td>6<\/td>\n<td>7<\/td>\n<\/tr>\n<tr>\n<td>8<\/td>\n<td>9<\/td>\n<td>10<\/td>\n<td>11<\/td>\n<td>12<\/td>\n<td>13<\/td>\n<td>14<\/td>\n<\/tr>\n<\/table>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
\n
Nota<\/strong>: La etiqueta <colgroup><\/em><\/strong> debe ser secundaria de un elemento <table><\/em><\/strong> y debe colocarse antes de cualquier otro elemento de la tabla, como <thead><\/em><\/strong>, <tr><\/em><\/strong>, <td><\/em><\/strong>, etc., pero despu\u00e9s del elemento <caption><\/strong><\/em>, si est\u00e1 presente.<\/p>\n<\/blockquote>\n\n\n\n
M\u00faltiples elementos de columna<\/h2>\n\n\n\n
Si deseas dise\u00f1ar m\u00e1s columnas con diferentes estilos, usa m\u00e1s elementos <col><\/em><\/strong> dentro del <colgroup><\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\ntable, th, td {\nborder: 1px solid black;\nborder-collapse: collapse;\n}\n<\/style>\n<\/head>\n<body>\n\n<h2>Multiple Col Elements<\/h2>\n<p>Add multiple col elements in the colgroup:<\/p>\n\n<table style=\"width: 100%;\">\n<colgroup>\n<col span=\"2\" style=\"background-color: #D6EEEE\">\n<col span=\"3\" style=\"background-color: pink\">\n<\/colgroup>\n<tr>\n<th>MON<\/th>\n<th>TUE<\/th>\n<th>WED<\/th>\n<th>THU<\/th>\n<th>FRI<\/th>\n<th>SAT<\/th>\n<th>SUN<\/th>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>2<\/td>\n<td>3<\/td>\n<td>4<\/td>\n<td>5<\/td>\n<td>6<\/td>\n<td>7<\/td>\n<\/tr>\n<tr>\n<td>8<\/td>\n<td>9<\/td>\n<td>10<\/td>\n<td>11<\/td>\n<td>12<\/td>\n<td>13<\/td>\n<td>14<\/td>\n<\/tr>\n<tr>\n<td>15<\/td>\n<td>16<\/td>\n<td>17<\/td>\n<td>18<\/td>\n<td>19<\/td>\n<td>20<\/td>\n<td>21<\/td>\n<\/tr>\n<tr>\n<td>22<\/td>\n<td>23<\/td>\n<td>24<\/td>\n<td>25<\/td>\n<td>26<\/td>\n<td>27<\/td>\n<td>28<\/td>\n<\/tr>\n<\/table>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Columnas vac\u00edas<\/h2>\n\n\n\n
Si deseas dise\u00f1ar columnas en medio de una tabla, inserta un elemento <col><\/em><\/strong> \u00abvac\u00edo\u00bb (sin estilos) para las columnas anteriores:<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\ntable, th, td {\nborder: 1px solid black;\nborder-collapse: collapse;\n}\n<\/style>\n<\/head>\n<body>\n\n<h2>Empty Colgroups<\/h2>\n<p>Add \"empty\" col elements that represents the columns before the columns you want to style:<\/p>\n\n<table style=\"width: 100%;\">\n<colgroup>\n<col span=\"3\">\n<col span=\"2\" style=\"background-color: pink\">\n<\/colgroup>\n<tr>\n<th>MON<\/th>\n<th>TUE<\/th>\n<th>WED<\/th>\n<th>THU<\/th>\n<th>FRI<\/th>\n<th>SAT<\/th>\n<th>SUN<\/th>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>2<\/td>\n<td>3<\/td>\n<td>4<\/td>\n<td>5<\/td>\n<td>6<\/td>\n<td>7<\/td>\n<\/tr>\n<tr>\n<td>8<\/td>\n<td>9<\/td>\n<td>10<\/td>\n<td>11<\/td>\n<td>12<\/td>\n<td>13<\/td>\n<td>14<\/td>\n<\/tr>\n<tr>\n<td>15<\/td>\n<td>16<\/td>\n<td>17<\/td>\n<td>18<\/td>\n<td>19<\/td>\n<td>20<\/td>\n<td>21<\/td>\n<\/tr>\n<tr>\n<td>22<\/td>\n<td>23<\/td>\n<td>24<\/td>\n<td>25<\/td>\n<td>26<\/td>\n<td>27<\/td>\n<td>28<\/td>\n<\/tr>\n<\/table>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Ocultar columnas<\/h2>\n\n\n\n
Puedes ocultar columnas con la propiedad visibility: collapse.<\/em><\/strong><\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\ntable, th, td {\nborder: 1px solid black;\nborder-collapse: collapse;\n}\n<\/style>\n<\/head>\n<body>\n\n<h2>Hide Columns<\/h2>\n<p>You can hide specific columns with the visibility property:<\/p>\n\n<table style=\"width: 100%;\">\n<colgroup>\n<col span=\"2\">\n<col span=\"3\" style=\"visibility: collapse\">\n<\/colgroup>\n<tr>\n<th>MON<\/th>\n<th>TUE<\/th>\n<th>WED<\/th>\n<th>THU<\/th>\n<th>FRI<\/th>\n<th>SAT<\/th>\n<th>SUN<\/th>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>2<\/td>\n<td>3<\/td>\n<td>4<\/td>\n<td>5<\/td>\n<td>6<\/td>\n<td>7<\/td>\n<\/tr>\n<tr>\n<td>8<\/td>\n<td>9<\/td>\n<td>10<\/td>\n<td>11<\/td>\n<td>12<\/td>\n<td>13<\/td>\n<td>14<\/td>\n<\/tr>\n<tr>\n<td>15<\/td>\n<td>16<\/td>\n<td>17<\/td>\n<td>18<\/td>\n<td>19<\/td>\n<td>20<\/td>\n<td>21<\/td>\n<\/tr>\n<tr>\n<td>22<\/td>\n<td>23<\/td>\n<td>24<\/td>\n<td>25<\/td>\n<td>26<\/td>\n<td>27<\/td>\n<td>28<\/td>\n<\/tr>\n<\/table>\n\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
El elemento <colgroup> es utilizado para especificar un estilo espec\u00edfico a las columnas de una tabla. Si deseas aplicar estilo a las…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":29,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-174","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":"El elemento <colgroup> es utilizado para especificar un estilo espec\u00edfico a las columnas de una tabla. Si deseas aplicar estilo a las...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/174","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=174"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/174\/revisions"}],"predecessor-version":[{"id":176,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/174\/revisions\/176"}],"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=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}