Compartir a través de


Sugerencias para editar tablas HTML en Visual Web Developer

Actualización: noviembre 2007

El editor de tablas de HTML de Visual Studio es una herramienta muy eficaz para manipular tablas en formato HTML con el fin de definir el diseño de las páginas Web, así como para mostrar el contenido en formato de columnas. Las siguientes sugerencias le ayudarán a usar mejor este editor.

Editar tablas HTML

Los puntos siguientes describen el comportamiento general de la edición de tablas:

  • El editor de tablas HTML es una forma visual de editar los elementos de tablas HTML, como los elementos table, tr y td. Mientras el editor de tablas HTML es una forma conveniente de editar estos elementos, no puede proporcionar la funcionalidad de edición para las funciones no admitidas por las tablas HTML.

  • El editor de tablas trabaja con tablas HTML (elementos table y sus elementos secundarios), pero no con el control ASP.NET Table (elemento asp:table). El control ASP.NET Table se diseña principalmente para usarse mediante programación en lugar de hacerlo para el diseño estático, la forma en la que, a menudo, se usan las tablas HTML.

  • La vista Diseño representa la tabla de forma similar al aspecto que tendrá en un explorador. Es decir, interpretando los elementos HTML de la tabla de la misma manera que lo haría un explorador. Para obtener más información, vea la sección "Comportamiento de tamaño y cambio de tamaño" más adelante en este mismo tema.

Ámbito de modificaciones

Es útil entender cómo se aplican las modificaciones en la vista Diseño a los elementos de la tabla Tenga en cuenta lo siguiente:

  • Cada celda de la tabla se considera un miembro de la fila o columna en la que se inicia, como se muestra en la vista Diseño. Una operación de una fila o columna afecta a todos los miembros de esa fila o columna. Si asigna una celda de la vista Diseño a su elemento td correspondiente en la vista Código fuente puede que no funcione siempre como cabría esperar si las celdas contienen los atributos colspan o rowspan.

  • Las operaciones de filas afectan a todos los elementos td de dicha fila; pero no al elemento tr.

  • Si selecciona y modifica una columna, cualquier elemento th que esté en la columna se ve afectado.

Comportamiento de tamaño y cambio de tamaño

El editor de tablas, a veces, puede funcionar de forma inesperada al especificar inicialmente las dimensiones de la tabla, fila o columna. O bien, cuando se cambia el tamaño de estos elementos. El comportamiento de las dimensiones de los elementos de la tabla refleja el que tendrá la tabla en el explorador. Por ejemplo, las columnas que no tienen una configuración de ancho específico se expandirán o contraerán según el ancho total de la tabla, el ancho de las demás columnas de la tabla y el contenido que contienen todas las columnas.

El contenido tiene prioridad

En general, las dimensiones del contenido de una celda tienen prioridad sobre la configuración de ancho o alto de las celdas o filas. Por ejemplo, si una celda de la tabla contiene un gráfico, o elemento img, el tamaño del gráfico tiene prioridad sobre el ancho de la celda o incluso de la tabla. Esto también se aplica a los controles de las celdas de la tabla.

Si las celdas contienen texto y si no se establece el atributo nowrap de la celda, el texto se ajustará al ancho de la celda. Sin embargo, si el texto no contiene espacios en blanco, como espacios o signos de puntuación, no hay espacio para que se ajuste el texto y se reajustará el ancho de la celda para alojarlo.

El contenido también tiene prioridad respecto al alto de la fila. Si el texto se ajusta a una celda, puede que una fila sea más grande que la configuración height especificada para el elemento tr especificado que la representa.

Instrucciones sobre el tamaño de una tabla y el cambio de tamaño

Debido al diseño de los elementos HTML, es posible asignar una configuración de dimensiones conflictivas a una tabla y a sus elementos. Por ejemplo, puede que a una tabla de dos columnas se le asigne un ancho del 100%, pero quizá a cada una de las dos columnas se les puede asignar un ancho de 100 píxeles.

En la tabla siguiente se resume el tratamiento del tamaño en el editor de tablas. En todos los casos, el ancho del contenido tiene prioridad.

Dimensiones especificadas

Comportamiento

El ancho o el alto se especifican para la tabla y para todas sus columnas o filas, respectivamente.

Las dimensiones de la tabla tienen prioridad; la tabla calcula proporcionalmente el tamaño de las columnas y de las filas.

El ancho o el alto se especifican para la tabla y para algunas de sus columnas o filas, respectivamente.

Los elementos a los que se ha cambiado el tamaño se representan mediante dimensiones exactas y al resto de los elementos se les cambia el tamaño para rellenar las dimensiones totales de la tabla.

Nota:
El editor de tablas muestra el ancho de los elementos de la tabla que no se puede modificar como "automático".

El ancho y el alto se especifican para cada una de las columnas y filas de la tabla, pero no para la propia tabla.

El ancho o el alto de la tabla se calcula agregando el ancho de todas las columnas de la tabla o el alto de las filas de toda la tabla.

No se especifica ni el ancho ni el alto de la tabla, como tampoco ninguno de sus elementos.

El ancho o el alto se calcula solamente basándose en el contenido de la celda y el espacio requeridos para los bordes.

Nota:

Si está cambiando el tamaño de una fila o columna, y los elementos td utilizan unidades diferentes para el alto o ancho, el editor de tablas normaliza las unidades en píxeles.

Vea también

Conceptos

Introducción a la edición de tablas HTML en Visual Web Developer

Cómo: Crear y editar tablas HTML en la vista Diseño