Haga clic aquí para volver a la columna del tutorial Wulin.com HTML.
Arriba: Idioma de marcado - Título
Fuente original
Soluciones de diseño estandarizadas - Manualde marcado
y estilo Parte 1: Baje con Markup Comience con Markup CAPÍTULO2 TABLA ENVA?¿Sabes? No sé cuándo comenzó, usando tablas convertidas en un acto pecaminoso. De hecho, el mito más grande de escribir páginas web basadas en los estándares web es dejar de usar tablas más, ¡nunca! Suena como una plaga, debe evitarse, y debe ser sellado y arrojado a un gabinete polvoriento, y se considera una antigüedad transmitida desde los primeros días de la era del desarrollo de Internet.
¿De dónde viene tal asco? Quizás fue muy simple al principio, al menos con una buena razón. Muchas personas confiarían en promover los beneficios de abandonar el diseño tradicional de la anidación de la mesa y las imágenes GIF vacías, y en su lugar usar un diseño CSS estructurado flexible. Podemos comenzar a eliminar todas las tablas de manera separada, e incluso insistir obstinadamente en expulsar todas las mesas, sin importar la ocasión.
Más adelante en el libro, veremos el método de diseño de CSS y todos los beneficios de hacerlo. Pero ahora echemos un vistazo a cómo usar tablas en la situación correcta, es decir, al marcar listas de datos. Veremos algunas formas simples de hacer que nuestras listas de datos sean más fáciles de usar y más hermosas.
Es totalmente una formaAl etiquetar los datos de la lista, no hay absolutamente ninguna razón para no usar etiquetas de tabla. Pero espera, ¿qué son los datos de la lista? Aquí hay algunos ejemplos: itinerario de tiempo de la hoja de cálculo del calendario
Para estos ejemplos y muchos otros casos, se deben usar efectos CSS muy complejos y estrictos para que los datos parezcan una tabla. Tal vez pueda imaginar que el uso de flotadores CSS inteligentes para localizar todos los proyectos dará como resultado resultados incompatibles y contradictorios, sin mencionar que después de eliminar CSS, leer con precisión cada datos probablemente se convertirá en una tarea imposible. De hecho, no tenemos que tener miedo de las mesas: debemos usarlas con sus objetivos de diseño originales.
Formularios para todosUna de las razones por las cuales las tablas son criticadas es que si no se usa con cuidado, habrá defectos de usabilidad. Por ejemplo: los programas de lectura de pantalla son difíciles de leer el contenido correctamente, mientras que los dispositivos de pantalla pequeño a menudo se ven perturbados por las tablas utilizadas para diseñar, pero tenemos algunas formas simples de aumentar la usabilidad de las tablas de datos de la lista. Al mismo tiempo, establecemos una estructura flexible para facilitar la configuración de estilos con CSS en el futuro.
Veamos el ejemplo simple de la Figura 3-1, que es el récord de la liga de la American Baseball League:
Figura 3-1: Ejemplo de representación de datos típico
Quizás estos son un datos estadísticos muy deprimentes para los fanáticos de los Medias Rojas, pero la Figura 3-1 es un ejemplo perfecto de los datos de la lista. Tiene tres encabezados de tabla (año, oponente, récord de temporada (WL)), seguido de datos de cuatro años. En la tabla está el título de la tabla, que explica el contenido de la tabla.
La forma de marcar esta tabla de datos es muy intuitiva, y podemos hacerlo con un código como este:
<p align = Center> Boston Red Sox World Series Championships </p>
<Table>
<tr>
<td align = center> <b> año </b> </td>
<td align = center> <b> oponente </b> </td>
<td align = centro> <b> Record de temporada (WL) </b> </td>
</tr>
<tr>
<TD> 1918 </td>
<TD> Chicago Cubs </td>
<TD> 75-51 </td>
</tr>
<tr>
<TD> 1916 </td>
<TD> Brooklyn Robins </td>
<TD> 91-63 </td>
</tr>
<tr>
<TD> 1915 </td>
<TD> Philadelphia Phillies </td>
<TD> 101-50 </td>
</tr>
<tr>
<TD> 1912 </td>
<TD> New York Giants </td>
<TD> 105-47 </td>
</tr>
</table>
Los resultados que se muestran de esta manera deberían ser muy similares a la Figura 3-1, pero podemos agregar algunas mejoras a esta base.
Primero, podemos usar una etiqueta más semántica <tittittion> para almacenar campeonatos de la Serie Mundial de los Medias Rojas de Boston. La etiqueta <tittittion> debe seguirse inmediatamente después de la etiqueta de inicio <ABLA>, que generalmente se usa para almacenar el título de la tabla o la descripción de la información de la tabla.
Parece que facilita que los usuarios vean el tema de la tabla, y también puede ayudar a las personas que conocen el contenido de la web de otras maneras.
Eliminemos el párrafo inicial y agregemos el correcto <tittition>:
<Table>
<tittition> Boston Red Sox World Series Championships </titertion>
<tr>
<td align = center> <b> año </b> </td>
<td align = center> <b> oponente </b> </td>
<td align = centro> <b> Record de temporada (WL) </b> </td>
</tr>
<tr>
<TD> 1918 </td>
<TD> Chicago Cubs </td>
<TD> 75-51 </td>
</tr>
<tr>
<TD> 1916 </td>
<TD> Brooklyn Robins </td>
<TD> 91-63 </td>
</tr>
<tr>
<TD> 1915 </td>
<TD> Philadelphia Phillies </td>
<TD> 101-50 </td>
</tr>
<tr>
<TD> 1912 </td>
<TD> New York Giants </td>
<TD> 105-47 </td>
</tr>
</table>
Es importante destacar que el título debe transmitir rápidamente el tema de la siguiente información. De acuerdo con la configuración predeterminada, la mayoría de los navegadores visuales centran el texto en la etiqueta <tittion> en la parte superior de la tabla. Por supuesto, podemos usar CSS para cambiar el estilo de la configuración predeterminada más adelante: este problema se discutirá en la extensión de las puntas de este capítulo. De hecho, el título ahora se encuentra en una etiqueta única, lo que hace que nuestra modificación posterior funcione más fácil y simple.
Página anterior1 2 3 4 5 6 7 8 Página siguiente Lea el texto completo