{"id":150,"date":"2024-05-21T09:01:53","date_gmt":"2024-05-21T07:01:53","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=150"},"modified":"2024-05-21T09:01:53","modified_gmt":"2024-05-21T07:01:53","slug":"23-tablas-en-html","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/23-tablas-en-html\/","title":{"rendered":"23. Tablas en HTML"},"content":{"rendered":"\n

Una tabla<\/strong> en HTML consta de celdas<\/strong> de tabla dentro de filas<\/strong> y columnas<\/strong>.<\/p>\n\n\n\n

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

<table>\n  <tr>\n    <th>Company<\/th>\n    <th>Contact<\/th> \n    <th>Country<\/th>\n  <\/tr>\n  <tr>\n    <td>Alfreds Futterkiste<\/td>\n    <td>Maria Anders<\/td> \n    <td>Germany<\/td>\n  <\/tr>\n  <tr>\n    <td>Centro comercial Moctezuma<\/td>\n    <td>Francisco Chang<\/td> \n    <td>Mexico<\/td>\n  <\/tr>\n<\/table><\/pre>\n\n\n\n
Celdas de la tabla<\/h2>\n\n\n\n
Cada celda de la tabla est\u00e1 definida con la etiqueta <td><\/td><\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<table>\n  <tr>\n    <td>Emil<\/td>\n    <td>Tobias<\/td> \n    <td>Linus<\/td>\n  <\/tr>\n<\/table><\/pre>\n\n\n\n
Filas de la tabla<\/h2>\n\n\n\n
Cada fila de la tabla comienza con <tr><\/em><\/strong> y finaliza con <\/tr><\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<table>\n  <tr>\n    <td>Emil<\/td>\n    <td>Tobias<\/td> \n    <td>Linus<\/td>\n  <\/tr>\n  <tr>\n    <td>16<\/td>\n    <td>14<\/td> \n    <td>10<\/td>\n  <\/tr>\n<\/table><\/pre>\n\n\n\n
Puedes tener tantas filas como desees en una tabla, solo aseg\u00farate de que la cantidad de celdas sea la misma en cada fila.<\/p>\n\n\n\n
Encabezados de tabla<\/h2>\n\n\n\n
A veces deseas que tus celdas sean encabezados, en esos casos usa la etiqueta <th><\/em><\/strong> en lugar de la etiqueta <td><\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<table>\n  <tr>\n    <th>Persona 1<\/th>\n    <th>Persona 2<\/th> \n    <th>Persona 3<\/th>\n  <\/tr>\n  <tr>\n    <td>Emil<\/td>\n    <td>Tobias<\/td> \n    <td>Linus<\/td>\n  <\/tr>\n  <tr>\n    <td>16<\/td>\n    <td>14<\/td> \n    <td>10<\/td>\n  <\/tr>\n<\/table><\/pre>\n\n\n\n
De manera predeterminada, el texto en los elementos <th><\/em><\/strong> est\u00e1 en negrita y centrado, pero puede cambiar eso con CSS.<\/p>\n\n\n\n
Etiquetas HTML usadas para tablas<\/h2>\n\n\n\n
Tag<\/th>Descrip<\/th><\/tr>
<table><\/em><\/strong><\/td>Define una tabla<\/td><\/tr>
<th><\/em><\/strong><\/td>Define una celda de encabezado en una tabla<\/td><\/tr>
<tr><\/em><\/strong><\/td>Define una fila en una tabla<\/td><\/tr>
<td><\/em><\/strong><\/td>Define una celda en una tabla<\/td><\/tr>
<caption><\/em><\/strong><\/td>Define un t\u00edtulo de tabla<\/td><\/tr>
<colgroup><\/em><\/strong><\/td>Especifica un grupo de una o m\u00e1s columnas en una tabla para formatear<\/td><\/tr>
<col><\/em><\/strong><\/td>Especifica propiedades de columna para cada columna dentro de un elemento <colgroup><\/td><\/tr>
<thead><\/em><\/strong><\/td>Agrupa el contenido del encabezado en una tabla<\/td><\/tr>
<tbody><\/em><\/strong><\/td>Agrupa el contenido del cuerpo en una tabla.<\/td><\/tr>
<tfoot><\/em><\/strong><\/td>Agrupa el contenido del pie de p\u00e1gina en una tabla<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
Una tabla en HTML consta de celdas de tabla dentro de filas y columnas. Ejm <table>   <tr>     <th>Company<\/th>     <th>Contact<\/th>…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":22,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-150","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":"Una tabla en HTML consta de celdas de tabla dentro de filas y columnas. Ejm <table>   <tr>     <th>Company<\/th>     <th>Contact<\/th>...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/150","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=150"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/150\/revisions"}],"predecessor-version":[{"id":152,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/150\/revisions\/152"}],"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=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}