Objetivo

Las páginas web utilizan con regularidad tablas y formularios. La llegada del HTML5 (que ha pasado a recomendación oficial el 28 de octubre de 2014) ha comportado la posibilidad de utilizar nuevos elementos específicamente dedicados a la creación de formularios. Los elementos de creación de tablas no han cambiado.

En lo que respecta a las CSS, todas las propiedades relativas al texto pueden aplicarse también a tablas y formularios. En cambio, son muy pocas las propiedades que solo se aplican específicamente a tablas y formularios. Ello tiene su lógica, ya que las tablas pueden incluir cualquier otro tipo de elemento (texto, imágenes...), si bien los formularios únicamente contienen texto y, en algunos casos, imágenes.

Observe que el W3C estaría preparando un módulo CSS3 dedicado a las tablas, con el nombre Table Level 3. En junio de 2015 este módulo aún no se había publicado; se hallaba en la categoría Upcomming, ¡pero con la indicación de Inactive!

Las tablas

1. La anchura de las tablas

El cálculo de la anchura de una tabla depende de un algoritmo que es específico para cada navegador; no obstante, todos los navegadores pueden usar el que propone el W3C, que depende del valor de la propiedad table-layout.

Propiedad: table-layout

Valor: auto | fixed | inherit

Valor inicial: auto

Se aplica a: elementos cuyo valor de la propiedad display sea table o inline-table

Herencia: no

Los dos valores que pueden usarse son:

auto: es el navegador el que utiliza su propio algoritmo de visualización de las tablas.
fixed: los navegadores utilizan el algoritmo de visualización fija de las tablas.

El algoritmo no tiene en cuenta el contenido de las celdas, sino solo la anchura que se ha fijado para la tabla, la anchura fija de las columnas, el grosor y el espaciado de las celdas (los márgenes de las celdas tampoco se tienen en cuenta).

La propiedad width se utiliza para determinar todos estos anchos.

Para determinar la anchura de una columna, este algoritmo tiene en cuenta en primer lugar no la longitud especificada en la columna (que no debe estar en auto), sino la longitud de la celda de la primera fila a la que concierne esta columna. Si esta celda está fusionada con otras columnas, su longitud se reparte entre las columnas afectadas. Finalmente, si no se especifican los demás valores de las otras columnas, las columnas se «reparten» el ancho de la tabla (sin los grosores de los bordes ni los rellenos).

2. Los bordes de las tablas

Existen dos modelos de gestión de los bordes de las tablas. Según el primer modelo, todos los bordes están fusionados y son los mismos para todos los elementos constitutivos: tabla y celdas. Según el segundo modelo, cada elemento constitutivo se trata individualmente: la tabla y las celdas. La propiedad border-collapse es la que define este modo.

Propiedad: border-collapse

Valor: collapse | separate | inherit

Valor incial: separate

Se aplica a: elementos de tipo tabla e inline-table

Herencia: sí

Estos son los dos valores posibles:

collapse: los bordes de las celdas están fusionados.
separate: los bordes de las celdas están individualizados (para cada celda).

He aquí un ejemplo sencillo (06-01.html) con dos tablas. La primera tiene los bordes separados y en la segunda los bordes están fusionados.


<!DOCTYPE html>   
<html lang="es">   ...

Los formularios

1. Dar formato

Para dar formato a los formularios, puede utilizar las propiedades CSS aplicables al texto, así como las propiedades de los contenedores (ancho, contorno, color de fondo...). No existe ninguna propiedad ni ningún módulo específicamente dedicado a los formularios.

Vamos a utilizar, sencillamente, selectores, propiedades y atributos que se adaptan bien a los formularios.

2. Redimensionar un campo

La propiedad resize forma parte del módulo Basic User Interface Module Level 3 (CSS3 UI), que está como Candidate Recommendation, 7 July 2015 (http://www.w3.org/TR/css3-ui/). Puede usarse, por ejemplo, en un campo de formulario cuando el diseñador desee que el usuario pueda modificar el tamaño de dicho campo.

Propiedad: resize

Valor: none | both | horizontal | vertical

Valor inicial: none

Se aplica a: los elementos visibles (propiedad overflow)

Herencia: no

Los valores que se pueden utilizar:

none: sin posibilidad de redimensionamiento.
both: redimensionable horizontal y verticalmente.
horizontal: redimensionable horizontalmente.
vertical: redimensionable verticalmente.

He aquí un ejemplo sencillo (06_03.html):


<!DOCTYPE html> 
<html lang="es"> 
<head>   
   <title>Redimensionar un campo</title> 
   <meta charset="UTF-8" /> 
   <style>   
      #comentario {   
         width: 200px;   
         height: 90px;   
         border: 1px solid #333; 
         background-color: lightyellow; 
         resize: both;   
      }   
   </style>   
</head>   
<body>   
<form id="test" method="#" action="#">   
   <p>   
      <label for="nombre">Nombre: </label>   
      <input type="text" id="nombre" />   
   </p>   
   <p>   
      <label for="comentario">Comentarios: </label>  
      <br />   ...

Tablas y formularios