Tutorial: Editar tablas HTML en Visual Web Developer

Actualización: noviembre 2007

La edición de tablas es una parte importante de muchas páginas Web porque las tablas se utilizan para crear el diseño de la página. Este tutorial muestra las características de edición de tablas del editor HTML en Microsoft Visual Studio. Utilizará tablas para crear el diseño de un formulario sencillo de entrada de datos en la página.

Nota:
Las características de edición de tablas descritas en este tutorial pertenecen a las tablas HTML, no al control de servidor Web Table (el control <asp:Table> y sus controles secundarios).

Las tareas ilustradas en este tutorial incluyen:

• Agregar una tabla.

• Seleccionar la tabla, filas y columnas.

• Cambiar el tamaño de los elementos.

• Agregar y quitar elementos de la tabla.

• Establecer características de las celdas como color de fondo y alineación.

Requisitos previos

Para poder completar este tutorial, necesitará:

• Visual Web Developer y .NET Framework.

Crear el sitio Web

Si ya ha creado un sitio Web en Visual Studio (por ejemplo, siguiendo los pasos de Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la sección siguiente, "Crear el diseño de la página con una tabla". De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

1. Abra Visual Web Developer.

2. En el menú Archivo, haga clic en Nuevositio Web.

3. En Plantillas instaladas de Visual Studio, haga clic en Servicio Web ASP.NET.

4. En el cuadro Ubicación, escriba el nombre de la carpeta dónde desea guardar las páginas de su sitio Web.

   Por ejemplo, escriba el nombre de carpeta C:\WebSites.

5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

6. Haga clic en Aceptar.

   Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

Crear el diseño de la página con una tabla

Empezará por agregar una tabla que define el diseño general de la página.

Para agregar una tabla para el diseño de la página

1. Si aún no tiene una página abierta en el diseñador, agregue una página al sitio Web.

2. Cambie a la vista Diseño.

3. En el menú Diseño, haga clic en Insertar tabla.

   Aparecerá el cuadro de diálogo Insertar tabla.

4. Seleccione Plantilla.

   Las plantillas de tabla son diseños de tabla predefinidos.

5. En la lista Plantilla, seleccione Encabezado y lado.

6. Haga clic en Aceptar.

   Se agrega a la página una tabla de dos columnas que ocupa todo el alto y ancho de la página. Una celda única de la parte superior abarca las columnas y proporciona un lugar para colocar un encabezado. La celda izquierda situada bajo el encabezado se utiliza para exploración o información relacionada. La celda derecha situada bajo el encabezado es el área de presentación principal de la página.

   Nota:
   Los bordes alrededor de las celdas en la tabla se muestran de forma predeterminada en tiempo de diseño para ayudarle en la edición. A menos que establezca explícitamente que la tabla o celdas tengan un borde, no aparecerá ningún borde cuando la tabla se represente en el explorador.

Crear un diseño de formulario con una tabla

También puede utilizar tablas HTML para diseñar los controles en un formulario. A continuación creará una segunda tabla dentro de la primera. Utilizará después la segunda tabla para crear el diseño de algunos controles del formulario.

Para agregar una tabla para el diseño de la página

1. Arrastre un elemento Table desde el grupo HTML del Cuadro de herramientas,a la celda derecha (principal).

   Cuando arrastra una tabla del Cuadro de herramientas, Visual Web Developer crea una tabla vacía de tres columnas y tres filas. Necesita sólo dos columnas; en un momento, eliminará una de las columnas.

   Nota:
   Puede crear las tablas utilizando el comando Insertar tabla, como hizo anteriormente o arrastrando un elemento Table desde el Cuadro de herramientas.

2. Mueva el puntero del mouse (ratón) sobre la tabla hasta que el puntero cambie a un cursor de movimiento (flecha de cuatro puntas) y, a continuación, haga clic para seleccionar la tabla.

3. Arrastre el borde derecho para ampliar la tabla hasta que ocupe la mayor parte del ancho de la página.

   A medida que arrastra la tabla, se muestran sus dimensiones actuales.

4. Haga clic con el botón secundario del mouse en una de las celdas en la columna situada más a la izquierda. En el submenú Eliminar, haga clic en Columnas para quitar la columna de la celda seleccionada.

   La columna se elimina en la tabla.

   Nota:
   Si aparece una opción Suprimir que no tiene un submenú, indica que el foco no está en una celda. Haga clic con el botón secundario del mouse en una celda de la columna izquierda.

5. Haga clic en la celda derecha inferior y, a continuación, presione la tecla TAB para agregar una cuarta fila a la tabla.

   Ahora tiene una tabla de dos columnas y cuatro filas, que pueden ser el contenedor de sus controles de formulario.

Establecer las características de la tabla de diseño de la página

Ahora que tiene una tabla de diseño de formulario en la tabla de la página, puede finalizar el diseño de la página editando la tabla de diseño de la página.

Para establecer las características de la tabla de diseño de la página

1. En la tabla de diseño de la página, haga clic en la celda superior.

   El borde más grueso alrededor de la celda indica que está seleccionada y en modo de edición de contenido.

2. En la ventana Propiedades, haga clic en el botón en el cuadro Estilo.

   Aparecerá el cuadro de diálogo Generador de estilos.

3. En la ficha Texto, en la lista Horizontal, haga clic en Centrado.

4. En la ficha Fondo, en la lista Color, seleccione el color que desee. También puede hacer clic en el botón situado junto al cuadro Color para mostrar el cuadro de diálogo Selector de color y seleccionar entre los colores adicionales.

   La configuración elegida establece el estilo de la celda situada en la parte superior de la tabla de diseño.

5. Escriba Sitio Web de Contoso como encabezado.

6. Seleccione el texto y, en la lista Formato del bloque de la barra de herramientas Formato, haga clic en Encabezado 1 <H1>.

7. Repita los pasos del 1 al 6 para la celda del extremo izquierdo de la tabla, con estos cambios:

   • Cambie el texto a Este sitio es mantenido por Contoso, Incorporated.

   • No dé formato al texto como Encabezado 1.

   • En la ficha Texto del cuadro de diálogo Generador de estilos, en la lista Vertical, haga clic en inferior.

   En una página Web de producción, un menú de vínculos u otro contenido ocuparía probablemente la celda lateral. Sin embargo, para este tutorial no importa el contenido de la celda.

Generar el formulario

Ahora puede generar el formulario.

Para agregar texto y controles a la tabla de diseño del formulario

1. En la tabla de diseño del formulario (la tabla situada dentro de la tabla de diseño de la página), haga clic en la celda izquierda superior y escriba Name.

2. Haga clic en la celda izquierda de la segunda fila y escriba Birth year.

3. Arrastre un control TextBox desde el grupo Estándar del Cuadro de herramientas hasta la celda superior derecha.

4. Establezca la propiedad ID del control TextBox en textName.

5. Arrastre otro control TextBox a la celda derecha de la segunda fila y establezca su propiedad ID en textBirthYear.

6. Arrastre un control Button a la tercera celda de la derecha y establezca su propiedad Text en Submit.

7. Arrastre un control Label a la celda inferior derecha, establezca su propiedad ID en labelDisplay y borre su propiedad Text.

8. Coloque el cursor del mouse sobre la columna izquierda hasta que aparezca un símbolo de selección (un cuadrado pequeño) en la parte superior de la columna y, a continuación, haga clic en el símbolo.

   Se selecciona la columna izquierda.

9. En la ventana Propiedades, haga clic en el botón en el cuadro Estilo para mostrar el cuadro de diálogo Generador de estilos.

10. En la ficha Texto, en la lista Horizontal, haga clic en Derecha.

    Los títulos de texto del formulario se alinean a la derecha.

11. Haga clic en Aceptar para cerrar el Generador de estilos.

12. Seleccione otra vez la columna izquierda y arrastre su borde derecho para comprimir la columna hasta que sea lo bastante ancha para ajustarse al texto del título.

13. Haga clic con el botón secundario del mouse en la celda de la tabla de diseño fuera de la tabla de diseño del formulario y, a continuación, haga clic en Estilo.

    El menú contextual proporciona una manera alternativa de mostrar el cuadro de diálogo Generador de estilos.

14. En la ficha Texto, en la lista Vertical, haga clic en superior.

    La tabla de diseño del formulario se alinea en la parte superior de la celda.

Programar los controles del formulario

Ahora puede programar los controles del formulario. El formulario muestra la edad que el usuario tendrá este año.

Para programar los controles del formulario

1. Haga doble clic en el control Button del formulario.

   El editor crea un controlador de eventos Click.

2. Agregue el código resaltado siguiente.

   Protected Sub Button1_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs) _
       Handles Button1.Click 
       Dim age As Integer    age = DateTime.Now.Year - CInt(textBirthYear.Text)    labelDisplay.Text = Server.HtmlEncode(textName.Text) & _        ", this year you are " & Server.HtmlEncode(age.ToString())
   End Sub
   

   protected void Button1_Click(Object sender, EventArgs e)
   {
       int age = DateTime.Now.Year - Int32.Parse(textBirthYear.Text);    labelDisplay.Text = Server.HtmlEncode(textName.Text) +     ", this year you are " + Server.HtmlEncode(age.ToString());
   }
   

Probar la página

Ya puede probar la página.

Para probar la página

1. Presione CTRL+F5 para ejecutar la página.

   Cuando la página se muestre en el explorador, observe el diseño que ha creado. Dado que no especificó explícitamente los bordes de la tabla, no hay ninguna línea en el formulario.

2. En el cuadro Name, escriba su nombre.

3. En el cuadro Birth year, escriba el año en que nació y, a continuación, haga clic en el botón Enviar.

   El cálculo de edad se muestra en el formulario en la ubicación que creó con la tabla del formulario.

Pasos siguientes

En este tutorial, ha practicado algunas de las funciones del editor visual de tablas en la vista Diseño. Ha agregado tablas de dos maneras, ha cambiado el tamaño de una tabla, ha agregado una fila, ha eliminado una columna, ha establecido estilos de celda y ha agregado texto y controles como contenido de las celdas. Las sugerencias para una exploración más a fondo incluyen las siguientes:

• Obtener información sobre más maneras de trabajar con tablas. Para obtener información detallada, vea:

  • Cómo: Agregar y quitar elementos de tabla HTML en Visual Web Developer

  • Cómo: Seleccionar contenido y elementos de tabla HTML en Visual Web Developer

  • Cómo: Cambiar el tamaño de los elementos de tabla HTML en Visual Web Developer

• Obtener información sobre algunas sugerencias para editar tablas en las vistas Diseño y Código fuente. Para obtener información detallada, vea Sugerencias para editar tablas HTML en Visual Web Developer.

• Agregar validación al cuadro de texto Birth year para que los usuarios sólo puedan escribir años válidos. Para obtener más información, vea Validar la información especificada por el usuario en páginas Web ASP.NET.

Vea también

Tareas

Tutorial: Crear y usar páginas principales ASP.NET en Visual Web Developer

Conceptos

Exploración de etiquetas en el Editor HTML de Visual Web Developer

Aplicar formato a los elementos en el Editor HTML de Visual Web Developer