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, aunque el borde se dibuja aunque no se escriba este valor.
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.
El validador del W3C recomienda no utilizar el atributo border y en su lugar asignar bordes a los elementos en la hoja de estilo:
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>
<tbody>
<tr>
<td colspan="2">celdas a1 y b1 unidas</td>
</tr>
<tr>
<td>celda a2</td>
<td>celda b2</td>
</tr>
</tbody>
</table>
<table>
<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>
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>.
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>
<tbody>
...
colgroup.fondo {
background-color: lightgrey;
}
<table border="1">
<caption>Esto es la leyenda</caption>
<colgroup class="fondo"><col><col></colgroup>
<col>
<tbody>
...
colgroup.fondo {
background-color: lightgrey;
}
<table border="1">
<caption>Esto es la leyenda</caption>
<colgroup><col span="2"></colgroup>
<col>
<tbody>
...
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>.