Atributos de tablas

El atributo border de <table>

Como se comenta en la lección sobre elementos obsoletos, en HTML el atributo border se considera obsoleto y en su lugar se deben asignar bordes mediante propiedades CSS de bordes, aunque los navegadores siguen admitiendo su uso.

<table border="1">
  ...

<table>
  ...

table {
  border: #b2b2b2 1px solid;
}
td, th {
  border: black 1px solid;
}

Los atributos colspan y rowspan de <td> y <th>

Los atributos colspan y rowspan permiten unir una celda con las celdas contiguas, tanto horizontal como verticalmente. El valor de colspan indica la cantidad de celdas unidas en horizontal y el valor de rowspan indica la cantidad de celdas unidas en vertical.

<table>
  <caption>Esto es una tabla</caption>
  <tr>
    <td colspan="2">celdas a1 y b1 unidas</td>
  </tr>
  <tr>
    <td>celda a2</td>
    <td>celda b2</td>
  </tr>
</table>

<table>
  <caption>Esto es una tabla</caption>
  <tr>
    <td rowspan="2">celdas a1 y a2 unidas</td>
    <td>celda b1</td>
  </tr>
  <tr>
    <td>celda b2</td>
  </tr>
</table>

<table border="1">
  <caption>Esto es una tabla</caption>
  <tr>
    <td rowspan="2" colspan="2">celdas a1, a2, b1 y b2 unidas</td>
    <td>celda c1</td>
  </tr>
  <tr>
    <td>celda c2</td>
  </tr>
  <tr>
    <td>celda a3</td>
    <td>celda b3</td>
    <td>celda c3</td>
  </tr>
</table>

El atributo span de <col>

El atributo span permite que una etiqueta <col> haga referencia a varias columnas seguidas. El valor del atributo span indica el número de columnas al que hace referencia la etiqueta <col>.

<table border="1">
  <caption>Esto es la leyenda</caption>
  <col span="2" class="fondo"><col>
  <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>

col.fondo {
  background-color: lightblue;
}

El atributo span de <colgroup>

Para indicar el número de columnas que forman parte de un grupo de columnas, se pueden utilizar etiquetas <col> (con o sin atributo span) o el atributo span de <colgroup>. Si se utiliza el atributo span, su valor indica el número de columnas que forman parte del grupo de columnas.

Pero si se utiliza el atributo span en la etiqueta <colgroup>, no se pueden incluir etiquetas <col> en el <colgroup>.

En los tres ejemplos siguientes se pueden ver las tres maneras de definir un grupo de dos columnas. El <colgroup> abarca las dos primeras columnas y se ven de color gris porque tiene clase fondo. La tercera columna no se ve de color gris porque aunque el navegador añade un <colgroup> para la tercera columna, este <colgroup> no tiene clase fondo:

<table border="1">
  <caption>Esto es la leyenda</caption>
  <colgroup span="2" class="fondo"></colgroup>
  <col>
  <tr>
    ...

colgroup.fondo {
  background-color: lightgrey;
}

<table border="1">
  <caption>Esto es la leyenda</caption>
  <colgroup class="fondo"><col><col></colgroup>
  <col>
  <tr>
    ...

colgroup.fondo {
  background-color: lightgrey;
}

<table border="1">
  <caption>Esto es la leyenda</caption>
  <colgroup><col span="2"></colgroup>
  <col>
  <tr>
    ...

colgroup {
  background-color: lightgrey;
}
col {
  background-color: lightblue;
}

Para entender el resultado de los ejemplos siguientes, hay que tener en cuenta que los navegadores añaden etiquetas <colgroup> alrededor de las etiquetas <col> consecutivas no incluidas en etiquetas <colgroup>.

• En el ejemplo siguiente, el <colgroup> abarca las dos primeras columnas y se ven de color gris. La tercera columna también se ve de color gris porque el navegador añade un <colgroup> para la tercera columna:

  <table border="1">
    <caption>Esto es la leyenda</caption>
    <colgroup span="2"></colgroup>
    <col>
    <tr>
      ...
  

  colgroup {
    background-color: lightgrey;
  }
  

  
• En el ejemplo siguiente, el <colgroup> abarca las dos primeras columnas y se ven de color gris. En este caso la tercera columna se ve de color azul porque aunque el navegador añade un <colgroup> para esa columna, la regla para col tiene precedencia sobre la regla para el colgroup:

  <table border="1">
    <caption>Esto es la leyenda</caption>
    <colgroup span="2"></colgroup>
    <col>
    <tr>
      ...
  

  colgroup {
    background-color: lightgrey;
  }
  col {
    background-color: lightblue;
  }
  

  
• En el ejemplo siguiente, todas las columnas se ven de color azul porque el <colgroup> contiene etiquetas <col> y la regla para col tiene precedencia sobre la regla para el colgroup:

  <table border="1">
    <caption>Esto es la leyenda</caption>
    <colgroup><col><col></colgroup>
    <col>
    <tr>
      ...
  

  colgroup {
    background-color: lightgrey;
  }
  col {
    background-color: lightblue;
  }