Índice

Celdas de la tabla

Las celdas pueden contener cualquier elemento definido en HTML, bien sea un texto, imágenes, un enlace, un fondo e incluso otra tablas.

En HTML5 han desaparecido los atributos width, height, align, valign, abbr, axis y scope de HTML 4.0.

1. Ancho de las celdas

Por defecto, el navegador adapta el ancho de las celdas según su contenido.

Vea el siguiente ejemplo de una tabla con tres columnas sin especificaciones particulares.

images/06RI08.png

Habrá que recurrir a la propiedad de estilo width, pero aplicada en esta ocasión a la etiqueta <td>, para uniformar el ancho de las celdas.

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
<title>Html5</title> 
<meta charset="UTF-8"> 
<style> 
table { border: 1px solid black; 
        border-collapse: collapse; 
        width: 250px;} 
td { border: 1px solid black; 
     width: 33%;} 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td>Celda 1</td><td>Cel 2</td><td>3</td> 
</tr> 
<tr> 
<td>Celda 4</td><td>Cel 5</td><td>6</td> 
</tr> 
</table> 
</body> 
</html>
images/CAP06IMG06.png

2. Alineación horizontal

El contenido de una celda puede alinearse a la izquierda, centrado o a la derecha. El resultado se obtiene mediante la propiedad de estilo text-align aplicada a una celda. La propiedad text-align puede tomar los valores left (izquierda), ...