HTML => Mesas

Introducción

El elemento HTML <table> permite a los autores web mostrar datos tabulares (como texto, imágenes, enlaces, otras tablas, etc.) en una tabla bidimensional con filas y columnas de celdas.

Sintaxis

<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>

Observaciones

Los diversos elementos de la tabla y sus atributos de contenido juntos definen el modelo de tabla. El elemento <table> es el elemento contenedor para los modelos de tabla / datos tabulares. Las tablas tienen filas, columnas y celdas dadas por sus descendientes. Las filas y columnas forman una cuadrícula; las celdas de una tabla deben cubrir completamente la cuadrícula sin superponerse. La siguiente lista describe los diversos elementos en el modelo de tabla:

<table> - El elemento contenedor para modelos de tablas / datos tabulares. <table> representa datos con más de una dimensión en forma de tabla.
<caption> - Título o título de la tabla (como una figcaption a una figure )
<col> - Una columna (un elemento sin contenido)
<colgroup> - una agrupación de columnas
<thead> - encabezado de tabla (solo uno)
<tbody> - Cuerpo / contenido de la tabla (múltiples están bien)
<tfoot> - pie de tabla (solo uno)
<tr> - fila de la tabla
<th> - Celda de encabezado de tabla
<td> - Celda de datos de tabla

Semánticamente, las tablas están destinadas a contener datos tabulares. Puede pensarlo como una forma de mostrar y describir datos que tendrían sentido en una hoja de cálculo (columnas y filas).

No se recomienda el uso de tablas para el diseño. En su lugar, use las reglas de CSS para el diseño y el formato, incluida la display: table

Una excepción notable que generalmente se muestra en la industria con respecto al uso del diseño de <table> es el correo electrónico HTML: algunos clientes de correo electrónico, incluido Outlook, regresan a los motores de renderización más antiguos después de que Microsoft pierde su caso de monopolio frente a la UE. Para que Microsoft haga que IE no sea parte del sistema operativo, simplemente hicieron retroceder el motor de renderizado de Outlook a una versión anterior de Trident. Esta reversión simplemente no es compatible con las tecnologías web modernas, por lo que el uso de diseños basados en <table> para correo electrónico HTML es la única manera de garantizar la compatibilidad entre navegadores / plataforma / cliente.

Mesa simple

<table>
  <tr>
    <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
    <td>Row 1 Data Column 1</td>
    <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Data Column 1</td>
    <td>Row 2 Data Column 2</td>
  </tr>
</table>

Esto generará una <table> consta de tres filas totales ( <tr> ): una fila de celdas de encabezado ( <th> ) y dos filas de celdas de contenido ( <td> ). <th> elementos <th> son encabezados tabulares y los elementos <td> son datos tabulares . Puedes poner lo que quieras dentro de <td> o <th> .

Título 1 / Columna 1	Título 2 / Columna 2
Fila 1 Columna de datos 1	Fila 1 Columna de datos 2
Fila 2 Columna de datos 1	Fila 2 Columna de datos 2

Abarcando columnas o filas

Las celdas de la tabla pueden abarcar varias columnas o filas usando los atributos colspan y rowspan . Estos atributos se pueden aplicar a los elementos <th> y <td> .

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
        <td rowspan="2">This cell spans two rows</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>

</table>

Resultará en

Tenga en cuenta que no debe diseñar una tabla en la que tanto las filas como las columnas se superpongan, ya que este no es un código HTML válido y el resultado se maneja de manera diferente por diferentes navegadores web.

rowspan = Un entero no negativo que especifica el número de filas que ocupa una celda. El valor predeterminado de este atributo es uno ( 1 ). Un valor de cero ( 0 ) significa que la celda se extenderá desde la fila actual hasta la última fila de la tabla ( <thead> , <tbody> o <tfoot> ).

colspan = Un entero no negativo que especifica el número de columnas abarcadas por la celda actual. El valor predeterminado de este atributo es uno ( 1 ). Un valor de cero ( 0 ) significa que la celda se extenderá desde la corriente hasta la última columna del grupo de columnas <colgroup> en el que se define la celda.

Tabla con thead, tbody, tfoot y subtítulo

HTML también proporciona las tablas con los elementos <thead> , <tbody> , <tfoot> y <caption> . Estos elementos adicionales son útiles para agregar valor semántico a sus tablas y para proporcionar un lugar para el estilo CSS separado.

Al imprimir una tabla que no cabe en una página (papel), la mayoría de los navegadores repiten el contenido de <thead> en cada página.

Hay un orden específico que debe cumplirse, y debemos ser conscientes de que no todos los elementos encajan en su lugar como uno esperaría. El siguiente ejemplo muestra cómo se deben colocar nuestros 4 elementos.

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

Los resultados del siguiente ejemplo se muestran dos veces: la primera tabla carece de estilos, la segunda tabla tiene algunas propiedades CSS aplicadas: background-color , color y border *. Los estilos se proporcionan como una guía visual y no son un aspecto esencial del tema en cuestión.

Elemento	Estilos Aplica
`<caption>`	Texto amarillo sobre fondo negro.
`<thead>`	Texto en negrita en el fondo púrpura.
`<tbody>`	Texto sobre fondo azul.
`<tfoot>`	Texto sobre fondo verde.
`<th>`	Bordes naranjas.
`<td>`	Bordes rojos.

Grupos de columnas

A veces es posible que desee aplicar un estilo a una columna o grupo de columnas. O para fines semánticos, puede agrupar columnas. Para hacer esto, use los elementos <colgroup> y <col> .

La etiqueta opcional <colgroup> permite agrupar columnas. <colgroup> elementos <colgroup> deben ser elementos secundarios de una <table> y deben ir después de cualquier elemento <caption> y antes del contenido de la tabla (por ejemplo, <tr> , <thead> , <tbody> , etc.).

<table>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    ...
</table>

La etiqueta opcional <col> permite hacer referencia a columnas individuales o un rango de columnas sin aplicar una agrupación lógica. <col> elementos <col> son opcionales, pero si están presentes, deben estar dentro de un elemento <colgroup> .

<table>
    <colgroup>
        <col id="MySpecialColumn" />
        <col />
    </colgroup>
    <colgroup>
        <col class="CoolColumn" />
        <col class="NeatColumn" span="2" />
    </colgroup>
    ...
</table>

Los siguientes estilos CSS se pueden aplicar a los elementos <colgroup> y <col> :

border
background
width
visibility
display (como en la display: none )
- display: none; realmente eliminará las columnas de la pantalla, lo que hará que la tabla se muestre como si esas celdas no existieran

Para más información, vea HTML5 Tabular data .

Ámbito de aplicación

th elementos se usan con mucha frecuencia para indicar encabezados de filas y columnas de tablas, de esta manera:

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Esto se puede mejorar para accesibilidad mediante el uso del atributo de scope . El ejemplo anterior se enmendaría como sigue:

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scope se conoce como un atributo enumerado , lo que significa que puede tener un valor de un conjunto específico de valores posibles. Este set incluye:

col
row
colgroup
rowgroup

Referencias:

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

HTML
Mesas

Buscar..