Ejemplo Tabla HTML
| Número | Nombre de pila | Apellido | Puntos |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
Definición de tablas HTML
Ejemplo
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Inténtalo tú mismo " Ejemplo explicó:
Las tablas se definen con el <table> etiqueta.
Las tablas se dividen en filas de la tabla con el <tr> etiqueta.
Las filas se dividen en datos de la tabla con la <td> etiqueta.
Una fila de la tabla también se puede dividir en encabezados de la tabla con el <th> etiqueta.
Datos de la tabla <td> son los contenedores de datos de la tabla.
Pueden contener todo tipo de elementos HTML como texto, imágenes, listas, otras tablas, etc.
Una tabla HTML con un atributo border
Si no se especifica un borde de la mesa, se mostrará sin fronteras.
Un borde se puede agregar utilizando la border atributo:
Ejemplo
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Inténtalo tú mismo " La border atributo es en su salida del estándar HTML! Es mejor usar CSS.
Para añadir bordes, utilice la propiedad border CSS:
Recuerde que definen los bordes de la tabla y las celdas de la tabla.
Una tabla HTML con bordes cerrados
Si desea que las fronteras se colapsen en una frontera, añadir CSS border-collapse :
Una tabla HTML con Relleno de celda
Relleno de la celda especifica el espacio entre el contenido celular y de sus fronteras.
Si no se especifica un relleno, las celdas de la tabla se mostrarán sin relleno.
Para establecer el relleno, utilice el CSS padding propiedad:
Ejemplo
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
} Inténtalo tú mismo " HTML encabezados de la tabla
Encabezados de la tabla se definen con la <th> tag.
Por defecto, todos los principales navegadores muestran títulos de la tabla como negrita y centrado:
Ejemplo
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Inténtalo tú mismo " A la izquierda a alinear los encabezados de la tabla, utilice el CSS text-align propiedad:
Una tabla HTML con espaciado de bordes
espaciamiento Border especifica el espacio entre las células.
Para establecer el espaciado de bordes de una tabla, utilice el CSS border-spacing propiedad:
Si la tabla se ha derrumbado fronteras, espaciado de borde no tiene ningún efecto.
Celdas de tabla que abarcan muchas columnas
Para hacer un lapso celular más de una columna, utilice el colspan atributo:
Ejemplo
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table> Inténtalo tú mismo " Celdas de tabla que abarcan muchas filas
Para hacer un lapso celular más de una fila, utilice el rowspan atributo:
Ejemplo
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table> Inténtalo tú mismo " Una tabla HTML con una leyenda
Para añadir un título a una tabla, utilice el <caption> etiqueta:
Ejemplo
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table> Inténtalo tú mismo " La <caption> etiqueta debe insertarse inmediatamente después de la <table> etiqueta.
Un estilo especial para una tabla
Para definir un estilo especial para una mesa especial, añadir una id de atributos a la tabla:
Ejemplo
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Ahora se puede definir un estilo especial para esta tabla:
table#t01 {
width: 100%;
background-color: #f1f1c1;
} Inténtalo tú mismo " Y añadir más estilos:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
} Inténtalo tú mismo " Resumen del capítulo
- Utilice el código HTML <table> elemento para definir una tabla
- Utilice el código HTML <tr> elemento para definir una fila de la tabla
- Utilice el código HTML <td> elemento para definir una tabla de datos
- Utilice el código HTML <th> elemento para definir un encabezado de la tabla
- Utilice el código HTML <caption> elemento para definir un título de la tabla
- Utilizar el CSS border la propiedad para definir una frontera
- Utilizar el CSS border-collapse propiedad a colapsar los bordes de celda
- Utilizar el CSS padding propiedad para agregar relleno a las células
- Utilizar el CSS text-align propiedad para alinear el texto celular
- Utilizar el CSS border-spacing propiedad para establecer el espacio entre las células
- Utilice el colspan atributo para hacer un lapso de células muchas columnas
- Usar la rowspan atributo para hacer un lapso de muchas filas de células
- Utilice el id de atributos para definir de forma única una tabla
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»
HTML tabla de etiquetas
| Etiqueta | Descripción |
|---|---|
| <table> | Define una tabla |
| <th> | Define una celda de encabezado de una tabla |
| <tr> | Define una fila de una tabla |
| <td> | Define una celda de una tabla |
| <caption> | Define una leyenda de la tabla |
| <colgroup> | Especifica un grupo de una o más columnas en una tabla para formatear |
| <col> | Especifica propiedades de columna para cada columna dentro de un <colgroup> elemento |
| <thead> | Grupos el contenido de la cabecera de una mesa |
| <tbody> | Grupos el contenido del cuerpo en una tabla |
| <tfoot> | Grupos el contenido de pie en una tabla |