123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489 |
- .. 4.9
- ===============
- Datos Tabulados
- ===============
- El elemento ``table``
- =====================
- Representa datos con más de una dimensión, en forma de tabla.
- Las tablas pueden contener los siguientes elementos:
- - Opcionalmente puede tener un elemento ``<caption>``,
- - seguido por cero o más elementos ``<colgroup>``,
- - alternativamente puede tener un elemento ``<thead>``,
- - continuado por cero o más elementos ``<tbody>``
- - o uno o más elementos ``<tr>``,
- - opcionalmente también puede poseer un elemento ``<tfoot>``.
- El elemento ``<table>`` posee el atributo ``border``, el cual permite darle un
- grosor determinado en pixeles que el cual puede ser una cadena vacia o un valor númerico.
- Por ejemplo, ``border="1"``.
- Si se va a utilizar una tabla para diseño, el debe utilizarse el atributo ``role``
- con el valor presentation (``role = 'presentation'``). Así, se comunica al
- navegador que la tabla se utiliza con fines de diseño.
- Sin embargo, no se deben usar tablas como ayuda para el diseño.
- Técnicas para describir tablas
- ==============================
- Es recomendable en las tablas poner una descripción que explique la forma la cual
- se presenta los datos de la tabla en cuestion, algo como
- 'Las características son mostradas en la segunda columna, con el lado negativo en la
- columna izquierda y el lado positivo en la columna derecha'. Esta descripción,
- acompañada por el atributo ``aria-describedby`` hace posible que personas
- invidentes puedan conocer los datos que componen la tabla mediante sistemas
- de lectura asistida.
- .. code-block:: html
- <p id="summary">En el siguiente ejemplo, las caracteristicas son
- mostradas en la segunda columna, con el lado negativo
- a la izquierda de dicha columna
- y el lado positivo a la derecha de dicha columna.</p>
- <table aria-describedby="summary">
- <caption>Características con lados positivos y negativos</caption>
- <thead>
- <tr>
- <th id="n"> Negativo
- <th> Características
- <th> Positiva
- <tbody>
- <tr>
- <td headers="n r1"> Triste
- <th id="r1"> Humor
- <td> Feliz
- <tr>
- <td headers="n r2"> Debil
- <th id="r2"> Grado
- <td> Pasajero
- </table>
- En el ejemplo de arriba el atributo ``aria-describedby`` es usado para las
- tecnologías de asistencia para personas invidentes.
- A continuación, se muestra el mismo ejemplo con el elemento ``<figure>``.
- .. code-block:: html
- <figure aria-labelledby="caption">
- <p>Las características se dan en la segunda columna,
- con el lado negativo en la columna izquierda y el
- lado positivo en la columna derecha.</p>
- <table>
- <caption id="caption">Características con lados positivos y negativos</caption>
- <thead>
- <tr>
- <th id="n"> Negativo
- <th> Características
- <th> Positiva
- <tbody>
- <tr>
- <td headers="n r1"> Triste
- <th id="r1"> Humor
- <td> Feliz
- <tr>
- <td headers="n r2"> Debil
- <th id="r2"> Grado
- <td> Pasajero
- </table>
- </figure>
- El elemento ``<figure>`` en este ejemplo ha sido etiquetado por el subtítulo de la ``<table>``
- usando el atributo ``aria-labelledby.``
- El elemento ``caption``
- =======================
- Representa el título del elemento ``<table>`` que sera su padre más directo.
- El elemento ``<caption>`` puede introducir el contexto de una tabla, haciéndola
- más fácil de comprender.
- Consideremos el siguiente ejemplo sin la etiqueta ``<caption>``.
- .. code-block:: html
- <table>
- <thead>
- <tr>
- <th>1</th>
- <th>2</th>
- <th>3</th>
- <th>4</th>
- <th>5</th>
- <th>6</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>5</td>
- <td>7</td>
- <td>4</td>
- <td>5</td>
- <td>2</td>
- <td>4</td>
- </tr>
- </tbody>
- </table>
- Una tabla con este formato no es nada intutitiva; es por ello que el elemento
- ``<caption>`` ayuda a un mayor entendimiento de los datos que se muestran en
- la tabla. Veamos el mismo ejemplo con la etiqueta ``<caption>``.
- .. code-block:: html
- <table>
- <caption>
- <p>Table 1.</p>
- <p>Esta tabla muestra los resultados de lanzar un dado con seis caras</p>
- <p>Cada encabezado representa una cara del dado, debajo se muestra
- el número de veces que ha salido ese resultado</p>
- </caption>
- <thead>
- <tr>
- <th>1</th>
- <th>2</th>
- <th>3</th>
- <th>4</th>
- <th>5</th>
- <th>6</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>5</td>
- <td>7</td>
- <td>4</td>
- <td>5</td>
- <td>2</td>
- <td>4</td>
- </tr>
- </tbody>
- </table>
- El elemento ``colgroup``
- ========================
- Define un grupo de una o más columnas de una tabla.
- Contiene el atributo ``span`` que representa el número de columnas que abarca el elemento
- Se utiliza como hijo de un elemento de ``<table>``, después de cualquier elemento del subtítulo y antes de los siguientes elementos: ``<thead>``, ``<tbody>``,
- ``<tfoot>`` y ``<tr>``.
- .. code-block:: html
- <table>
- <colgroup>
- <col span="2" style="background-color:red">
- <col style="background-color:yellow">
- </colgroup>
- <tr>
- <th>ISBN</th>
- <th>Titulo</th>
- <th>Precio</th>
- </tr>
- <tr>
- <td>3476896</td>
- <td>El señor de los anillos</td>
- <td>30€</td>
- </tr>
- <tr>
- <td>5869207</td>
- <td>1984</td>
- <td>10€</td>
- </tr>
- </table>
- El elemento ``col``
- ===================
- Permite especificar propiedades para una columna o un grupo de ellas.
- Este elemento se puede utilizar como hijo de un elemento ``<colgroup>`` que
- no tiene un atributo ``span``.
- Si un elemento ``<col>`` tiene un elemento padre ``<table>`` y un elemento ``<colgroup>``,
- entonces el elemento ``<col>`` representa una o más columnas en el grupo de columnas
- representado por ese ``<colgroup>``.
- En el siguiente ejemplo definimos un grupo de columnas con ``<colgroupd>`` en
- una tabla con cinco encabezados. El primer atributo ``<col>`` establece un
- color de fondo de color rojo para la primera columna; el segundo utiliza
- para el color de fondo el verde para las siguientes tres columnas (``span="3"``);
- y el último utiliza el color naranja para la última columna.
- .. code-block:: html
- <table border="1">
- <colgroup>
- <col style="background:red;">
- <col span="3" style="background:green;">
- <col style="background:orange;">
- </colgroup>
- <tr>
- <th>Encabezado 1</th>
- <th>Encabezado 2</th>
- <th>Encabezado 3</th>
- <th>Encabezado 4</th>
- <th>Encabezado 5</th>
- </tr>
- <tr>
- <td>Celda</td>
- <td>Celda</td>
- <td>Celda</td>
- <td>Celda</td>
- <td>Celda</td>
- </tr>
- <tr>
- <td>Celda</td>
- <td>Celda</td>
- <td>Celda</td>
- <td>Celda</td>
- <td>Celda</td>
- </tr>
- </table>
- El elemento ``tbody``
- =====================
- Define un bloque de filas que consiste en un cuerpo
- de datos de una tabla.
- Este elemento se utiliza como hijo de un elemento de ``<table>``, después de
- cualquier elemento ``<caption>``, ``<colgroup>`` y ``<thead>``, pero sólo si
- no hay elementos ``<tr>`` que sean hijos del elemento de ``<table>``.
- .. code-block:: html
- <table border="1">
- <thead>
- <tr> <td colspan="2">Cabecera de la tabla (thead)</td></tr>
- </thead>
- <tbody>
- <tr>
- <td>Celda 1 - parte de tbody</td>
- <td>Celda 2 - parte de tbody</td>
- </tr>
- <tr>
- <td>Celda 3 - parte de tbody</td>
- <td>Celda 4 - parte de tbody</td>
- </tr>
- <tr>
- <td>Celda 5 - parte de tbody</td>
- <td>Celda 6 - parte de tbody</td>
- </tr>
- </tbody>
- <tfoot>
- <tr> <td colspan="2">Pie de la tabla (tfoot)</td></tr>
- </tfoot>
- </table>
- El elemento ``thead``
- =====================
- Representa el bloque de filas que consiste en las títulos de las columnas de
- una tabla.
- Se puede utilizar como hijo de un elemento de ``<table>``, después de cualquier ``<caption>``,
- y elementos de ``<colgroup>`` y antes de cualquier elemento ``<tbody>``, ``<tfoot>``
- y ``<tr>``, pero sólo si no hay otros elementos ``<thead>`` que sean hijos del
- elemento ``<table>``.
- A continuación, se muestra un ejemplo.
- .. code-block:: html
- <table>
- <caption>Hoja de subasta</caption>
- <thead>
- <tr>
- <th><label for=e1>Nombre</label>
- <th><label for=e2>Producto</label>
- <th><label for=e3>Fotografia</label>
- <th><label for=e4>Precio</label>
- <tr>
- <td>Tú nombre
- <td>¿Qué vas a vender?
- <td>Enlace a la fotografía.
- <td>El precio.
- <tbody>
- <tr>
- <td>Pepe
- <td>Galletas
- <td><img src="https://example.com/galletas.png" title="Las galletas de Pepe">
- <td>0.40€
- <tr>
- <td><input id=e1 type=text name=quien required form=f>
- <td><input id=e2 type=text name=que required form=f>
- <td><input id=e3 type=url name=foto form=f>
- <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
- </table>
- <form id=f action="/subasta.cgi">
- <input type=button name=add value="submit">
- </form>
- El elemento ``tfoot``
- =====================
- Representa el bloque de filas que consiste en los
- resúmenes de las columnas (pie de página) de una tabla.
- Se puede utilizar como hijo de un elemento de ``<table>``, después de cualquier elemento
- ``<caption>``, ``<colgroup>``, ``<thead>``, ``<tbody>`` y ``<tr>``, pero sólo si no hay otros
- elementos ``<tfoot>`` que sean hijos del elemento ``<table>``.
- .. code-block:: html
- <table>
- <thead>
- <tr> <td colspan="2">Cabecera (thead)</td></tr>
- </thead>
- <tbody>
- <tr>
- <td>Celda 1 - parte tbody</td>
- <td>Celda 2 - parte tbody</td>
- </tr>
- <tr>
- <td>Celda 3 - parte tbody</td>
- <td>Celda 4 - parte tbody</td>
- </tr>
- <tr>
- <td>Celda 5 - parte tbody</td>
- <td>Celda 6 - parte tbody</td>
- </tr>
- </tbody>
- <tfoot>
- <tr> <td colspan="2">Pie (tfoot)</td></tr>
- </tfoot>
- </table>
- El elemento ``tr``
- ==================
- Define una fila de celdas en una tabla.
- Se puede utilizar junto en los siguientes contextos:
- - Como un hijo de un elemento ``<thead>``.
- - Como un hijo de un elemento ``<tbody>``.
- - Como un hijo de un elemento ``<tfoot>``.
- - Como hijo de un elemento de ``<table>``, después de cualquier elemento ``<caption>``,
- ``<colgroup>`` y ``<thead>``, pero solo si no hay elementos ``<tbody>`` que son hijos del elemento de ``<table>``.
- .. code-block:: html
- <table border = "1">
- <tr>
- <td>Celda 1</td>
- <td>Celda 2</td>
- </tr>
- </table>
- El elemento ``th``
- ==================
- Define una celda del encabezado en una tabla.
- Se puede utilizar con los siguientes atributos:
- - ``colspan``. El número de columnas que la celda ocupa.
- - ``rowspan``. El número de filas que la celda ocupa.
- - ``headers``. Las cabeceras de la celda
- - ``abbr``. Título alternativo para hacer referencia a la celda desde otros contextos.
- - ``scope``. Especifca las celdas a las que se aplica el encabezado.
- Es un atributo enumerado con 5 estados, 4 de los
- cuales tienen palabras clave explícitas:
- - ``col``. Significa que la celda de cabecera se aplica a algunas de las celdas
- subsiguientes en el grupo de columnas.
- - ``colgroup``. Significa que la celda de cabecera se aplica a todas las celdas
- subsiguientes en el grupo de columnas.
- - ``row``. Significa que la celda de cabecera se aplica a algunas de las celdas
- subsiguientes en el grupo de filas.
- - ``rowgroup``. Significa que la celda de cabecera se aplica a todas las celdas
- subsiguientes en el grupo de filas.
- - ``auto``. Significa que la celda de cabecera se aplica a todas las celdas
- seleccionadas basadas en el contexto.
- .. code-block:: html
- <table>
- <caption>Medicion de patas, rabos entre gatos y dalmatas</caption>
- <thead>
- <tr><th> ID <th> Medicion <th> Media <th> Maxima.
- <tbody>
- <tr> <td> <th scope=rowgroup> Gatos <td> <td>
- <tr> <td> 32 <th scope=row> Piernas <td> 2.67 <td> 4.
- <tr> <td> 10 <th scope=row> Cola <td> 1 <td> 1.
- </tbody>
- <tbody>
- <tr> <td> <th scope=rowgroup> Perros <td> <td>
- <tr> <td> 93 <th scope=row> Patas <td> 3.5 <td> 4.
- <tr> <td> 35 <th scope=row> Cola <td> 0.33 <td> 1.
- </tbody>
- </table>
- El anterior ejemplo muestra cómo el atributo ``scope`` con la palabra clave
- ``rowgroup`` afecta a las celdas de los datos que se aplica a las celdas del encabezado.
- Las celdas de cabecera con un ``scope = rowgroup`` ('Perros' y 'Gatos') se aplican
- a todas las celdas de su grupo de filas distintas de las celdas (a su izquierda)
- en la columna 1.
- El elemento ``td``
- ==================
- Representa una celda de datos en una tabla.
- Este elemento siempre es hijo de un elemento ``<tr>``.
- Se puede utilizar con los siguientes atributos:
- - ``colspan``. El número de columnas que la celda ocupa.
- - ``rowspan``. El número de filas que la celda ocupa.
- - ``headers``. Los encabezados de esta celda.
- .. code-block:: html
- <table>
- <thead>
- <tr>
- <th>
- <th>2008
- <th>2007
- <th>2006
- <tbody>
- <tr>
- <th>Net sales
- <td>$ 32,479
- <td>$ 24,006
- <td>$ 19,315
- <tr>
- <th>Cost of sales
- <td> 21,334
- <td> 15,852
- <td> 13,717
- <tbody>
- <tr>
- <th>Gross margin
- <td>$ 11,145
- <td>$ 8,154
- <td>$ 5,598
- <tfoot>
- <tr>
- <th>Gross margin percentage
- <td>34.3%
- <td>34.0%
- <td>29.0%
- </table>
|