Atributos de tablas

Atributos de <table>

El atributo border

El atributo border indica si se dibujan bordes alrededor de las celdas y un borde alrededor de la tabla. El único valor admitido es el valor 1, sin unidades.

<table border="1">
Esto es la leyenda
Celda 1 Celda 2
Celda 3 Celda 4
<table border="">
Esto es la leyenda
Celda 1 Celda 2
Celda 3 Celda 4
<table>
Esto es la leyenda
Celda 1 Celda 2
Celda 3 Celda 4

Normalmente, las tablas sin bordes se utilizan como elemento de diseño (para distribuir elementos) y las tablas con borde se utilizan para mostrar información en la que los elementos de la misma fila o de la misma columna están relacionados.

Si en la hoja de estilo se establece un borde para un elemento de la tabla, este borde se muestra aunque el atributo border sea vacío.

<table>
Esto es la leyenda
Celda 1 Celda 2
Celda 3 Celda 4
table {
  border: red 5px solid;
}

Atributos de <td> y <th>

Los atributos colspan y rowspan

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

Atributos de <col />

El atributo span

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 hace referencia la etiqueta <col />.

<table border="1">
  <caption>Esto es la leyenda</caption>
  <col span="2" /><col />
  <tbody>
    <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>
  </tbody>
</table>
Esto es la leyenda
Celda 1 A Celda 2 Celda 3
Celda 4 Celda 5 Celda 6
col {
  background-color: lightblue;
}

Atributos de <colgroup>

El atributo span

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 />.

<table border="1">
  <caption>Esto es la leyenda</caption>
  <colgroup span="2"></colgroup><col />
  <tbody>
  ...
Esto es la leyenda
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6
colgroup {
  background-color: lightgrey;
}
col { background-color: lightblue; }
<table border="1">
  <caption>Esto es la leyenda</caption>
  <colgroup><col /><col /></colgroup><col />
  <tbody>
  ...
  
Esto es la leyenda
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6
colgroup {
  background-color: lightgrey;
}
col {
  background-color: lightblue;
}
<table border="1">
  <caption>Esto es la leyenda</caption>
  <colgroup><col span="2" /></colgroup><col />
  <tbody>
  ...
Esto es la leyenda
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6
colgroup {
  background-color: lightgrey;
}
col { background-color: lightblue; }