HTML5 Form_ Power Node Java College

El papel de la tabla es mostrar los datos de dos dimensiones. , se introducirá más adelante). El siguiente introduce principalmente elementos HTML para hacer tablas.

Los elementos básicos del formulario incluyen: Tabla, TR y TD.

La tabla representa la tabla en el documento HTML que admite el atributo de borde para definir el ancho del marco;

TR representa la línea en la tabla;

TD representa las células en la tabla, incluidos los siguientes atributos:

1) Colspan: el número de columnas que las celdas pueden cruzar;

2) Rowspan: el número de filas que las celdas pueden cruzar;

3) Encabezados: estándares El encabezado relacionado con la cabeza de la celda.

 <Able> <tr> <td> manzanas </td> <td> verde </td> <td> medium </td> </tr> <td> oranges </td> <td> naranja </td> <TD> grande </td> </tr> </table>

La anterior define una tabla de dos líneas y tres columnas.

El uso del atributo de borde del elemento de tabla puede agregar bordes a la tabla.

 <tabla border = 1> <tr> <td> manzanas </td> <td> green </td> </ tdium </td> </tr> <td> oranges </td> <td> naranja </ td> <td> grande </td> </tr> </table>

El borde predeterminado del navegador no es muy hermoso, y generalmente necesita usar CSS para establecer el estilo de marco para varios elementos.

El uso de los atributos Colspan y Rowspan de la celda puede construir tablas irregulares, de modo que algunas filas o columnas de la tabla múltiples celdas es un ejemplo de una celda múltiples columnas:

 <Table border = 1> <ter> <th> mes </th> <th> ahorros </th> </tr> <td colorpan = 2> enero </td> </tr> <ter> <td colorpan = 2> febrero </td> </tr> </table>

El siguiente es un ejemplo de una celda que cruza múltiples líneas:

 <Table border = 1> <ter> <th> mes </th> <th> ahorros </th> </tr> <td> enero </td> <td> $ 100.00 </td> <td rowspan = 2> $ 50 </td> </tr> <td> febrero </td> <td> $ 10.00 </td> </table>

El elemento TH se usa para agregar un encabezado al formulario, que puede usarse para distinguir los datos y las explicaciones de los datos. El elemento th admite los siguientes atributos:

1) Colspan: el número de columnas que las celdas pueden cruzar;

2) Rowspan: el número de filas que las celdas pueden cruzar;

3) Alcance: Defina el método para asociar los datos de la cabeza con los datos de la unidad;

3) Encabezados: la lista de ID de encabezado separada por el espacio se proporciona con una información de encabezado para la celda de datos.

 <Table> <Ter> <th> Rank </th> <th> Name </th> <th> Color </th> </th> </tr> <th> Favorito: no/td> <td> Naranja </td> <td> grande </td> </tr> <ter> <th> 3er favorito: </th> <td> pomegraanate </td> <td> una especie de Greeny-Red </// Td> <td> varía de medio a grande </td> </tr> </table>

TH y TD se pueden usar en una línea.

El uso de los atributos de encabezados de TD puede asociarse con las celdas. El atributo de encabezados puede ser el valor de atributo de identificación de una o más celdas TH:

 <Table border = 1 ancho = 100%> <ter> <th id = nombre> name </th> <th id = correo electrónico> correo electrónico </th> <th id = teléfono> teléfono> teléfono </th> <th th Id = dirección> dirección </th> </tr> <ter> <td headers = name> george bush </td> <td headers = cague> [email protected] </td> <td headers = phone> + 789451236 </td> <td Headers = Dirección> Fifth Avenue New York, EE. UU. </td> </tr> </table>

El uso de los atributos Colspan y RowsPan de Th Th puede construir tablas complejas.

 <Table border = 1> <tr> <th colspan = 2> Compañía en EE. UU. </th> </tr> <th> name </th> <th> addr </th> </tr> tr> <td > Apple, Inc. </td> <td> 1 Infinite Loop Cupertino, CA 95014 </td> </tr> <td> Google, Inc. </td> 1600 Amphitheater Parkway Mountain View, CA 94043 </td> </tr> </table>

Puede usar los elementos Thead, Tbody y Tfoot para agregar estructuras a la forma, para que pueda agregar un estilo CSS a cada parte de la forma para que se vuelva más fácil.

1) Tema de la mesa

Tbody Element representa toda la línea del tema de la forma, excluyendo el encabezado (representación del elemento thead) y el scooter (representación del elemento tfoot).

Tenga en cuenta que la mayoría de los navegadores insertarán automáticamente el elemento Tbody cuando procese elementos de la tabla.

2) Forma encabezado

El elemento se utiliza para marcar la línea de título del formulario. Si no hay un elemento thead, todos los elementos TR serán considerados como parte del tema de la forma.

3) Agregar nota al pie

Los elementos TFoot se utilizan para marcar las líneas de formación. Antes de HTML5, los elementos TFoot solo pueden aparecer antes del elemento Tbody, y en HTML5, el elemento TFoot puede colocar el elemento TFoot después de Tbody.

A continuación se muestra un ejemplo completo, que utiliza elementos Tbody, Thead y Tfoot.

 <Table> <d> <ter> <th> rango </th> <th> name </th> <th> color </th> <th> size </th> </thead> </thead> < tfoot> <ter> <th> Rank </th> <th> name </th> <th> color </th> </th> </tr> </tfoot> <tr> <tr> <th> Favorito: <th> <td> manzanas </td> <td> verde </td> <em> medium </td> </tr> <tr> <th> 2do favorito: </th> <td> naranjas </td> <td> naranja </td> <td> grande </td> </tr> <tr> <th> 3rd favorito: </th> <td> pomegraanate </td> <td> un tipo de Greeny-Red </td> <td> varía de medio a grande </td> </tr> </tbody> </table>

El uso del elemento de subtítulos puede definir un título para el formulario y asociarlo con el formulario.

 <Able> <Tocktion> Resultados de la encuesta de frutas de 2011 </ctiter> <thead> <tr> </th> <th> name </th> </th> <th> size </th> </tr> </thead> <tfoot> <ter> <th> rango </th> <th> name </th> <th> color </th> <th> size </th> no> <ter> <th> 2do favorito: </th> <td> naranja </td> <td> naranja </td> <td> grande </td> </tr> <trd favorito: </th> <td> granada </ td > <td> Una especie de Greeny-Red </td> <td> varía de medio a grande </td> </tbody> </table>

Un formulario solo puede contener un elemento de subtítulos, no el primer elemento del formulario, pero siempre se muestra sobre la tabla.

En la tabla, debido a que la tabla está formada por la línea, la operación de la columna no es conveniente, como un estilo de definición de una columna de la forma. Puede usar el elemento colgroup para especificar el grupo.

 <html> <head> <style> #colryp1 {en segundo plano: rojo} #colryp2 {background-color: green; = 1> <colorp id = colorp1 span = 2> </colorp> <colorp id = colorp2> </colorp> <ter> </th> </th> </th> no td> <td> mi primer CSSS </td> <td> $ 47 </td> </tr> </table> </body> </html>

El ejemplo anterior especifica el grupo de dos columnas. El atributo SPAN de ColGroup especifica las extensiones.

 <html> <head> <style> #colryp1 {background-color: rojo} #col3 {background-color: green; border = 1> <colgroup id = colorp1> <col id = col1and2 span = 2/> <col ID = color3/> </colorp> <ter> </th> <th> title </th> <th> precio </th> </tr> <l> <td> 3476896 </td> <td> mi primer html </td> <td> $ 53 </td> </tr> <td> 2489604 </td> <TD> Mi primer CSS </td> <td> $ 47 </td> </table> </body> </html>

Lo anterior es todo el contenido de este artículo.