Diseño de tabla, Fila de diseño de tabla y Celda de diseño de tabla

Diseño de tabla, Fila de diseño de tabla y Celda de diseño de tabla crean una sección que incluye otras vistas y los muestra en una estructura similar a una tabla que puede configurarse utilizando atributos HTML.
Nota: Estas vistas son diferentes de las vistas Tabla y Tabla de datos de servicio .
Los controles Fila de diseño de tabla y Celda de diseño de tabla no tienen opciones de configuración. En su lugar, puede utilizar los atributos HTML colspan y rowspan para especificar cómo se visualiza una vista Celda de diseño de tabla en un de diseño de tabla. Para estas vistas, debe utilizar la misma estructura que en una tabla HTML.
  • Las vistas de Fila de diseño de tabla se colocan dentro de una vista Diseño de tabla.
  • Las vistas de Celda de diseño de tabla se colocan dentro de una vista Fila de diseño de tabla.
Puede especificar los atributos HTML en la pestaña de propiedades Atributos HTML.
Nota: El diseño de estas vistas no es WYSIWYG en el diseñador.

Propiedades de configuración

En Configuración, establezca o modifique las propiedades de configuración de la vista.

Tamaño de pantalla
Una propiedad de configuración que tenga el icono Tamaños de pantalla El icono Tamaños de pantalla junto al nombre de propiedad puede tener distintos valores para cada tamaño de pantalla. Si no define un valor, el tamaño de la pantalla hereda el valor del siguiente tamaño de pantalla más grande como valor predeterminado.
Definiciones de temas
Las definiciones de temas especifican los colores y los estilos de una vista y determinan su aspecto. Puede obtener una vista previa del aspecto de las vistas en el editor de temas. Consulte Temas.

Las propiedades de configuración de aspecto para Diseño de tabla se muestran en la tabla siguiente:

Tabla 1. Propiedades de configuración de aspecto para Diseño de tabla
Propiedad de configuración del aspecto Descripción Tipo de datos
Espaciado de borde Especifica el espaciado entre las celdas en píxeles. String
Contracción de borde Especifica uno de los siguientes valores para el espacio entre las celdas:
  • Separar: añade un espacio entre las celdas.
  • Contraer: sin espacio entre las celdas.
 String

Ejemplo

Para mostrar dos vistas de Texto en una estructura de tabla:
  1. Añada una vista Diseño de tabla.
  2. Inserte una vista Fila de diseño de tabla dentro de la vista Diseño de tabla.
  3. Inserte dos vistas Celda de diseño de tabla dentro de la vista Fila de diseño de tabla.
  4. Inserte una vista Texto en cada uno de las vistas Celda de diseño de tabla.
  5. Opcionalmente, establezca la propiedad Espacio de borde en 25y la propiedad Contraer borde en Separate para añadir espacio entre las celdas.
También puede utilizar varias vistas Fila de diseño de tabla y Celda de diseño de tabla dentro de una vista Diseño de tabla y utilizar los atributos HTML colspan y rowspan para hacer que las celdas abarquen más de una columna o fila. Por ejemplo:
  1. Añada una vista Diseño de tabla.
  2. Inserte tres vistas Fila de diseño de tabla dentro de la vista Diseño de tabla.
  3. Inserte tres vistas Celda de diseño de tabla dentro de la primera vista Fila de diseño de tabla que ha añadido en el paso 2.
  4. Inserte una vista Celda de diseño de tabla dentro de la segunda vista Fila de diseño de tabla que ha añadido en el paso 2.
  5. Inserte dos vistas Celda de diseño de tabla dentro de la tercera vista Fila de diseño de tabla que ha añadido en el paso 2.
  6. En los atributos HTML de la primera celda de la primera fila, añada el atributo rowspan, establézcalo en 3 e inserte una vista Conmutador dentro de la celda.
  7. Inserte una vista Botón dentro de la segunda celda de la primera fila.
  8. Inserte una vista Código QR dentro de la tercera celda de la primera fila.
  9. En los atributos HTML de la celda de la segunda fila, añada el atributo colspan, establézcalo en 2 e inserte una vista Selección única dentro de la celda.
  10. Inserte una vista Selector de fecha dentro de la primera celda de la tercera fila.
  11. Inserte una vista Área de texto dentro de la segunda celda de la tercera fila.
El resultado es un diseño que se parece a la imagen siguiente.

Métodos

Para obtener información detallada sobre los métodos disponibles para Diseño de tabla, Fila de diseño de tabla y Celda de diseño de tabla, consulte Diseño de tabla, la Fila de diseño de tablao la API Celda de diseño de tabla JavaScript .

Recursos adicionales

Para obtener información sobre cómo crear un coach o una página, consulte Creación de coaches.
Para obtener información sobre las propiedades estándar (General, Configuración, Posicionamiento, Visibilidady Atributos HTML), consulte Ver propiedades.