{"id":1689,"date":"2011-11-21T21:56:07","date_gmt":"2011-11-21T19:56:07","guid":{"rendered":"http:\/\/www.4webs.es\/blog\/?p=1689"},"modified":"2011-11-21T21:56:07","modified_gmt":"2011-11-21T19:56:07","slug":"uso-de-tablas-para-tabular-datos","status":"publish","type":"post","link":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos","title":{"rendered":"Uso de tablas para tabular datos."},"content":{"rendered":"

\"\"<\/p>\n

Antiguamente en dise\u00f1o web<\/a> se utilizaban las tablas para maquetar todas las p\u00e1ginas , esta forma de realizar p\u00e1ginas ha quedado en desuso y no se deber\u00eda seguir este m\u00e9todo de trabajo, actualmente las p\u00e1ginas web se maquetan con div y CSS, gracias a esto nos permiten separar lo que es contenido de lo que ser\u00edan los estilos.
\nPero esto no quiere decir que no podamos usar tablas en nuestras p\u00e1ginas web<\/a>, las tablas en dise\u00f1o web nacieron con el prop\u00f3sito de tabular datos, por lo tanto para estos casos podemos usar tablas, por ejemplo para comparar resultados de las elecciones pol\u00edticas, listar tallas o precios o cualquier otro dato.<\/p>\n

Estructura b\u00e1sica de una tabla<\/span><\/strong><\/p>\n

<table><\/table><\/code>: <\/strong>El elemento\u00a0table<\/code> es necesario para indicar al navegador que quer\u00e9is organizar el contenido de una manera tabular.<\/p>\n

<tr><\/tr><\/code>: <\/strong>El elemento\u00a0tr<\/code> establece una fila de la tabla. Esto permite que el navegador organice todo el contenido que hay entre las etiquetas\u00a0<tr><\/code> y\u00a0<\/tr><\/code> dde una manera horizontal, todas ellas en una fila.<\/p>\n

<td><\/td><\/code>: <\/strong>El elemento\u00a0td<\/code> define la celda de la tabla o cada uno de los espacios individuales para el contenido dentro de la fila. Utilizad s\u00f3lo las celdas de tabla\u00a0td<\/code> necesarias seg\u00fan los datos que se quieran incluir.<\/p>\n

<caption><\/caption>: <\/strong>El elemento\u00a0caption\u00a0permite a\u00f1adir un t\u00edtulo a los datos de la tabla.<\/p>\n

<th><\/th>: <\/strong>El elemento\u00a0th\u00a0define el contenido que hay entre estas etiquetas como encabezamiento para la columna correspondiente de la tabla.<\/p>\n

<thead>: <\/strong>Identifica el t\u00edtulo de la tabla<\/p>\n

<tbody>:<\/strong> Identifica el cuerpo de la tabla, donde se insertan los datos<\/p>\n

<tfooter> : <\/strong>Identifica el pie de la tabla, donde se suelen colocar los cr\u00e9ditos o paginaci\u00f3n.<\/p>\n

colspan: <\/strong>El atributo colspan permite combinar varias celdas en la misma fila.<\/p>\n

<td colspan=\u201d3><\/td><\/p>\n

colrow: <\/strong>El atr\u00edbuto colrwo permite cominar varias celdas en la misma columna<\/p>\n

<td colrow=\u201d5\u201d><\/td><\/p>\n

scope: <\/strong>Se utiliza siempre dentro de la etiqueta th para indicar el t\u00edtulo de las columnas.<\/p>\n

Esta forma de tabular datos es la existente a d\u00eda de hoy y habr\u00eda que usar estos elementos para realizarlo correctamente.<\/p>\n

 <\/p>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"

Antiguamente en dise\u00f1o web se utilizaban las tablas para maquetar todas las p\u00e1ginas , esta forma de realizar p\u00e1ginas ha quedado en desuso y no se deber\u00eda seguir este m\u00e9todo de trabajo, actualmente las p\u00e1ginas web se maquetan con div y CSS, gracias a esto nos permiten separar lo que es contenido de lo que ser\u00edan los estilos.<\/p>\n","protected":false},"author":1,"featured_media":1690,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,6],"tags":[],"class_list":{"0":"post-1689","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-actualidad","8":"category-recursos-web"},"yoast_head":"\nUso de tablas para tabular datos. | 4webs.es<\/title>\n<meta name=\"description\" content=\"Antiguamente en dise\u00f1o web se utilizaban las tablas para maquetar todas las p\u00e1ginas , esta forma de realizar p\u00e1ginas ha quedado en desuso y no se deber\u00eda seguir este m\u00e9todo de trabajo, actualmente las p\u00e1ginas web se maquetan con div y CSS, gracias a esto nos permiten separar lo que es contenido de lo que ser\u00edan los estilos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uso de tablas para tabular datos. | 4webs.es\" \/>\n<meta property=\"og:description\" content=\"Antiguamente en dise\u00f1o web se utilizaban las tablas para maquetar todas las p\u00e1ginas , esta forma de realizar p\u00e1ginas ha quedado en desuso y no se deber\u00eda seguir este m\u00e9todo de trabajo, actualmente las p\u00e1ginas web se maquetan con div y CSS, gracias a esto nos permiten separar lo que es contenido de lo que ser\u00edan los estilos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos\" \/>\n<meta property=\"og:site_name\" content=\"4webs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/4webs\" \/>\n<meta property=\"article:published_time\" content=\"2011-11-21T19:56:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2011\/11\/tabulacion-datos-tablas.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"603\" \/>\n\t<meta property=\"og:image:height\" content=\"230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pablo Risue\u00f1o\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@4webs\" \/>\n<meta name=\"twitter:site\" content=\"@4webs\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pablo Risue\u00f1o\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos\"},\"author\":{\"name\":\"Pablo Risue\u00f1o\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\"},\"headline\":\"Uso de tablas para tabular datos.\",\"datePublished\":\"2011-11-21T19:56:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos\"},\"wordCount\":390,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/11\\\/tabulacion-datos-tablas.jpg\",\"articleSection\":[\"Actualidad\",\"Recursos Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos\",\"name\":\"Uso de tablas para tabular datos. | 4webs.es\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/11\\\/tabulacion-datos-tablas.jpg\",\"datePublished\":\"2011-11-21T19:56:07+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\"},\"description\":\"Antiguamente en dise\u00f1o web se utilizaban las tablas para maquetar todas las p\u00e1ginas , esta forma de realizar p\u00e1ginas ha quedado en desuso y no se deber\u00eda seguir este m\u00e9todo de trabajo, actualmente las p\u00e1ginas web se maquetan con div y CSS, gracias a esto nos permiten separar lo que es contenido de lo que ser\u00edan los estilos.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos#primaryimage\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/11\\\/tabulacion-datos-tablas.jpg\",\"contentUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/11\\\/tabulacion-datos-tablas.jpg\",\"width\":603,\"height\":230},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/uso-de-tablas-para-tabular-datos#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.4webs.es\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Uso de tablas para tabular datos.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/\",\"name\":\"4webs\",\"description\":\"Desarrollo con Prestashop, gesti\u00f3n de proyectos ecommerce\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\",\"name\":\"Pablo Risue\u00f1o\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"caption\":\"Pablo Risue\u00f1o\"},\"sameAs\":[\"http:\\\/\\\/www.4webs.es\"],\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/author\\\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Uso de tablas para tabular datos. | 4webs.es","description":"Antiguamente en dise\u00f1o web se utilizaban las tablas para maquetar todas las p\u00e1ginas , esta forma de realizar p\u00e1ginas ha quedado en desuso y no se deber\u00eda seguir este m\u00e9todo de trabajo, actualmente las p\u00e1ginas web se maquetan con div y CSS, gracias a esto nos permiten separar lo que es contenido de lo que ser\u00edan los estilos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos","og_locale":"es_ES","og_type":"article","og_title":"Uso de tablas para tabular datos. | 4webs.es","og_description":"Antiguamente en dise\u00f1o web se utilizaban las tablas para maquetar todas las p\u00e1ginas , esta forma de realizar p\u00e1ginas ha quedado en desuso y no se deber\u00eda seguir este m\u00e9todo de trabajo, actualmente las p\u00e1ginas web se maquetan con div y CSS, gracias a esto nos permiten separar lo que es contenido de lo que ser\u00edan los estilos.","og_url":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos","og_site_name":"4webs","article_publisher":"https:\/\/www.facebook.com\/4webs","article_published_time":"2011-11-21T19:56:07+00:00","og_image":[{"width":603,"height":230,"url":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2011\/11\/tabulacion-datos-tablas.jpg","type":"image\/jpeg"}],"author":"Pablo Risue\u00f1o","twitter_card":"summary_large_image","twitter_creator":"@4webs","twitter_site":"@4webs","twitter_misc":{"Escrito por":"Pablo Risue\u00f1o","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos#article","isPartOf":{"@id":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos"},"author":{"name":"Pablo Risue\u00f1o","@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048"},"headline":"Uso de tablas para tabular datos.","datePublished":"2011-11-21T19:56:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos"},"wordCount":390,"commentCount":1,"image":{"@id":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos#primaryimage"},"thumbnailUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2011\/11\/tabulacion-datos-tablas.jpg","articleSection":["Actualidad","Recursos Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos","url":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos","name":"Uso de tablas para tabular datos. | 4webs.es","isPartOf":{"@id":"https:\/\/www.4webs.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos#primaryimage"},"image":{"@id":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos#primaryimage"},"thumbnailUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2011\/11\/tabulacion-datos-tablas.jpg","datePublished":"2011-11-21T19:56:07+00:00","author":{"@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048"},"description":"Antiguamente en dise\u00f1o web se utilizaban las tablas para maquetar todas las p\u00e1ginas , esta forma de realizar p\u00e1ginas ha quedado en desuso y no se deber\u00eda seguir este m\u00e9todo de trabajo, actualmente las p\u00e1ginas web se maquetan con div y CSS, gracias a esto nos permiten separar lo que es contenido de lo que ser\u00edan los estilos.","breadcrumb":{"@id":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos#primaryimage","url":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2011\/11\/tabulacion-datos-tablas.jpg","contentUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2011\/11\/tabulacion-datos-tablas.jpg","width":603,"height":230},{"@type":"BreadcrumbList","@id":"https:\/\/www.4webs.es\/blog\/uso-de-tablas-para-tabular-datos#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.4webs.es\/blog"},{"@type":"ListItem","position":2,"name":"Uso de tablas para tabular datos."}]},{"@type":"WebSite","@id":"https:\/\/www.4webs.es\/blog\/#website","url":"https:\/\/www.4webs.es\/blog\/","name":"4webs","description":"Desarrollo con Prestashop, gesti\u00f3n de proyectos ecommerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.4webs.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048","name":"Pablo Risue\u00f1o","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","caption":"Pablo Risue\u00f1o"},"sameAs":["http:\/\/www.4webs.es"],"url":"https:\/\/www.4webs.es\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/1689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/comments?post=1689"}],"version-history":[{"count":1,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/1689\/revisions"}],"predecessor-version":[{"id":1691,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/1689\/revisions\/1691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/media\/1690"}],"wp:attachment":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/media?parent=1689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/categories?post=1689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/tags?post=1689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}