0000600 Tablas - Camino-S/HTML-CSS GitHub Wiki

Definición

Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas.

En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una contiene a un grupo de celdas. Las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos, a saber, <table> el contenedor principal, <tr> representando a las filas contenedoras de las celdas y <td> representando a las celdas).

Dejémoslo más claro con un ejemplo:

<table>

  <tr>

    <td>Celda 1</td>

    <td>Celda 2</td>

    <td>Celda 3</td>

  </tr>

  <tr>

    <td>Celda 4</td>

    <td>Celda 5</td>

    <td>Celda 6</td>

  </tr>

</table>
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6

Añadir encabezados <th>

Son celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna

<table>
  <tr>
    <td>&nbsp;</th>
    <th>Knocky</th>
    <th>Flor</th>
    <th>Ella</th>
    <th>Juan</th>
  </tr>
  <tr>
    <th>Raza</th>
    <td>Jack Russell</td>
    <td>Caniche</td>
    <td>Perro callejero</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <th>Edad</th>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <th>Propietario</th>
    <td>Suegra</td>
    <td>Yo</td>
    <td>Yo</td>
    <td>Cuñada</td>
  </tr>
  <tr>
    <th>Hábitos alimentarios</th>
    <td>Come las sobras de todos</td>
    <td>Mordisquea la comida</td>
    <td>Come en abundancia</td>
    <td>Come hasta que revienta</td>
  </tr>
</table>
  Knocky Flor Ella Juan
Raza Jack Russell Caniche Perro callejero Cocker Spaniel
Edad 16 9 10 5
Propietario Suegra Yo Yo Cuñada
Hábitos alimentarios Come las sobras de todos Mordisquea la comida Come en abundancia Come hasta que revienta

Agrupar filas y columnas

Cuando queremos que las celdas abarquen varias filas o columnas.

<table>
      <tr>
        <th colspan="2">Animales</th>
      </tr>
      <tr>
        <th colspan="2">Hipopótamo</th>
      </tr>
      <tr>
        <th rowspan="2">Caballo</th>
        <td>Mar</td>
      </tr>
      <tr>
        <td>Semental</td>
      </tr>
      <tr>
        <th colspan="2">Cocodrilo</th>
      </tr>
      <tr>
        <th rowspan="2">Pollo</th>
        <td>Gallina</td>
      </tr>
      <tr>
        <td>Gallo</td>
      </tr>
    </table>
Animales
Hipopótamo
Caballo Mar
Semental
Cocodrilo
Pollo Gallina
Gallo

Proporcionar un estilo común a las columnas.

El HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos <col> y <colgroup>.

<table>
  <colgroup>
    <col>
    <col style="background-color: gray">
  </colgroup>
  <tr>

<th>Dato 1</th>

<th>Dato 2</th>
  </tr>
  <tr>
    <td>Calcuta</td>
    <td>Pizza</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

Cuando queremos tener una columna con un estilo específico, debemos definir todos los tipos de «columnas de estilo», una por cadda columna. SI alguna columna no tiene ningún estilo incluimos un elemento

en blanco; de lo contrario, el estilo también se aplicaría esa columna.

Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento

con un atributo span, como este: 
<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>
⚠️ **GitHub.com Fallback** ⚠️