Microsoft Expression Web: tabla de datos
En este capítulo, aprenderemos cómo agregar una tabla de datos en su página web. Creemos una nueva página HTML, pero aquí queremos aplicar la Plantilla Web Dinámica también a nuestra página HTML.
Step 1 - Vayamos al menú Archivo y seleccionamos New → Create from Dynamic Web Template…
Se abrirá el siguiente cuadro de diálogo como se muestra en la siguiente captura de pantalla.
Step 2 - Seleccione el master.dwt archivo y luego haga clic en el botón Abrir.
Step 3 - Guarda la página web y llámala datatable.html.
Step 4 - En la Vista de diseño, vaya a la sección de contenido principal y elimine el texto.
Step 5 - A continuación, vaya al Table → Insert Table… opción de menú que abrirá el cuadro de diálogo Insertar tabla.
Seleccione el número de filas y columnas. También puede establecer diferentes opciones de diseño como alineación, relleno, tamaño y color del borde y color de fondo, etc. Una vez que haya terminado, haga clic en Aceptar.
Step 6 - La vista de diseño de datatable.html ahora aparecerá de la siguiente manera -
Ahora, si observa la Vista de código de la página, verá que Expression Web agrega el siguiente código.
<table class = "auto-style2" style = "width: 100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Step 7 - En el panel de tareas Administrar estilos, haga clic con el botón derecho “.auto-style2”. Haga clic en Elegir cambiar el nombre de la clase "auto-style2".
Step 8 - En el cuadro de diálogo Cambiar nombre de clase, ingrese mytable en el New namecampo. Asegúrese de que la opción Cambiar nombre de las referencias de clase en esta página esté marcada y luego haga clic en Aceptar.
Ahora, eche un vistazo a su página web en la vista Diseño. Aparecerá de la siguiente manera:
Step 9 - Para formatear esta tabla y aplicarle un estilo, vaya al panel de tareas Administrar estilos y haga clic en New Style…
Step 10- En el cuadro de diálogo Nuevo estilo, establezca la configuración del borde y luego haga clic en Aceptar. Existe otra opción para formatear su tabla de datos. En la Vista de diseño, haga clic con el botón derecho en la tabla y seleccioneModify → Table AutoFormat…
En este cuadro de diálogo, verá los diferentes formatos y otras configuraciones. Seleccionemos el formato Profesional y hagamos clic en Aceptar.
Step 11 - Ahora, la Vista de diseño de su página web tiene el siguiente aspecto:
Agreguemos algunos datos en la vista de diseño.
Step 12- Guarde su página web y obtenga una vista previa en un navegador. Se verá como la siguiente captura de pantalla.