etiqueta de tabla HTML se utiliza para mostrar datos en forma tabular (fila * columna). Puede haber muchas columnas seguidas.

Podemos crear una tabla para mostrar datos en forma tabular, usando

En cada tabla, la fila de la tabla está definida poretiqueta, el encabezado de la tabla está definido por, y los datos de la tabla están definidos poretiquetas.

Las tablas HTML se utilizan para gestionar el diseño de la página, p. sección de encabezado, barra de navegación, contenido del cuerpo, sección de pie de página, etc. Pero se recomienda usar la etiqueta div sobre la tabla para administrar el diseño de la página.

Etiquetas de tabla HTML

Ejemplo de tabla HTML

Veamos el ejemplo de etiqueta de tabla HTML. Su salida se muestra arriba.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Producción:

tutorial de pyspark

En la tabla html anterior, hay 5 filas y 3 columnas = 5 * 3 = 15 valores.

Tabla HTML con borde

Hay dos formas de especificar el borde de las tablas HTML.

1. Por atributo de borde de tabla en HTML
2. Por propiedad de borde en CSS

1) Atributo de borde HTML

Puede utilizar el atributo de borde de la etiqueta de la tabla en HTML para especificar el borde. Pero no se recomienda ahora.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Producción:

2) Propiedad de borde CSS

Ahora se recomienda utilizar la propiedad de borde de CSS para especificar el borde en la tabla.

 table, th, td { border: 1px solid black; } 

Puede contraer todos los bordes en un solo borde mediante la propiedad de colapso de borde. Colapsará la frontera en una sola.

que coleccion en java

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

Producción:

Tabla HTML con relleno de celda

Puede especificar el relleno para el encabezado de la tabla y los datos de la tabla de dos maneras:

1. Por atributo cellpadding de tabla en HTML
2. Por propiedad de relleno en CSS

El atributo cellpadding de la etiqueta de la tabla HTML ahora está obsoleto. Se recomienda utilizar CSS. Entonces veamos el código de CSS.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

Producción:

Ancho de la tabla HTML:

Podemos especificar el ancho de la tabla HTML usando el Ancho CSS propiedad. Se puede especificar en píxeles o porcentaje.

Podemos ajustar el ancho de nuestra mesa según nuestros requisitos. El siguiente es el ejemplo para mostrar la tabla con ancho.

 table{ width: 100%; } 

Ejemplo:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

Producción:

Tabla HTML con colspan

Si desea que una celda abarque más de una columna, puede utilizar el atributo colspan.

Dividirá una celda/fila en varias columnas, y el número de columnas dependerá del valor del atributo colspan.

Veamos el ejemplo que abarca dos columnas.

Código CSS:

administrador de tareas de linux

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

Código HTML:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

Producción:

Tabla HTML con extensión de filas

Si desea que una celda abarque más de una fila, puede utilizar el atributo de extensión de filas.

Dividirá una celda en varias filas. El número de filas divididas dependerá de los valores de amplitud de filas.

Veamos el ejemplo que abarca dos filas.

Código CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

Código HTML:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

Producción:

Tabla HTML con título

El título HTML se muestra encima de la tabla. Debe usarse únicamente después de la etiqueta de la tabla.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

Aplicar estilo a una tabla HTML con celdas pares e impares

Código CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

Producción:

NOTA: También puede crear varios tipos de tablas usando diferentes propiedades CSS en su tabla.

Navegadores compatibles

Elemento	Cromo	ES DECIR	Firefox	Ópera	Safari
	Sí	Sí	Sí	Sí	Sí