{"id":160,"date":"2024-05-21T09:06:21","date_gmt":"2024-05-21T07:06:21","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=160"},"modified":"2024-05-21T09:06:22","modified_gmt":"2024-05-21T07:06:22","slug":"26-encabezado-de-una-tabla","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/26-encabezado-de-una-tabla\/","title":{"rendered":"26. Encabezado de una tabla"},"content":{"rendered":"\n

Los encabezados<\/strong> de tabla se definen con el elemento th. <\/em><\/strong>Cada elemento th<\/em> <\/strong>representa una celda de tabla.<\/p>\n\n\n\n

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

<table>\n  <tr>\n    <th>Firstname<\/th>\n    <th>Lastname<\/th>\n    <th>Age<\/th>\n  <\/tr>\n  <tr>\n    <td>Jill<\/td>\n    <td>Smith<\/td>\n    <td>50<\/td>\n  <\/tr>\n  <tr>\n    <td>Eve<\/td>\n    <td>Jackson<\/td>\n    <td>94<\/td>\n  <\/tr>\n<\/table><\/pre>\n\n\n\n
Encabezado vertical<\/h2>\n\n\n\n
Para usar la primera columna como encabezados de tabla, defina la primera celda de cada fila como un elemento th<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<table>\n  <tr>\n    <th>Firstname<\/th>\n    <td>Jill<\/td>\n    <td>Eve<\/td>\n  <\/tr>\n  <tr>\n    <th>Lastname<\/th>\n    <td>Smith<\/td>\n    <td>Jackson<\/td>\n  <\/tr>\n  <tr>\n    <th>Age<\/th>\n    <td>94<\/td>\n    <td>50<\/td>\n  <\/tr>\n<\/table><\/pre>\n\n\n\n
Alinear encabezados<\/h2>\n\n\n\n
Por defecto los encabezados se sit\u00faan en el centro de la celda. Para alinearlos de distinta manera se utiliza la propiedad CSS text-align<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
th {\n  text-align: left;\n}<\/pre>\n\n\n\n
Encabezados para m\u00faltiples columnas<\/h2>\n\n\n\n
Puede tener un encabezado que abarque dos o m\u00e1s columnas. Para ello se utiliza el atributo colspan<\/em><\/strong> dentro de la etiqueta <th><\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<table>\n  <tr>\n    <th colspan=\"2\">Name<\/th>\n    <th>Age<\/th>\n  <\/tr>\n  <tr>\n    <td>Jill<\/td>\n    <td>Smith<\/td>\n    <td>50<\/td>\n  <\/tr>\n  <tr>\n    <td>Eve<\/td>\n    <td>Jackson<\/td>\n    <td>94<\/td>\n  <\/tr>\n<\/table><\/pre>\n\n\n\n
T\u00edtulo de la tabla<\/h2>\n\n\n\n
Para a\u00f1adir un t\u00edtulo<\/strong> a la tabla utilizamos la etiqueta <caption><\/em><\/strong> de la siguiente manera.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<table style=\"width:100%\">\n  <caption>Monthly savings<\/caption>\n  <tr>\n    <th>Month<\/th>\n    <th>Savings<\/th>\n  <\/tr>\n  <tr>\n    <td>January<\/td>\n    <td>$100<\/td>\n  <\/tr>\n  <tr>\n    <td>February<\/td>\n    <td>$50<\/td>\n  <\/tr>\n<\/table><\/pre>\n","protected":false},"excerpt":{"rendered":"
Los encabezados de tabla se definen con el elemento th. Cada elemento th representa una celda de tabla. Ejm <table>   <tr>    …<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":25,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-160","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":"Los encabezados de tabla se definen con el elemento th. Cada elemento th representa una celda de tabla. Ejm <table>   <tr>    ...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/160","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=160"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/160\/revisions"}],"predecessor-version":[{"id":162,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/160\/revisions\/162"}],"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=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}