TABLAS Y

FORMULARIOS
Lic. David I. López Pérez
TABLAS EN HTML

Etiqueta Descripción
Etiqueta contenedora que tendrá
Las etiquetas <table>
en su interior toda la tabla.
básicas para crear <tr>
Table Row. Etiqueta contenedora
una tabla de la forma de cada fila de la tabla.

más sencilla posible es: <td>

Table Data. Cada una de las celdas
de la tabla.
Table Header. Cada una de las
<th>
celdas de cabecera de la tabla.

2
Ejemplo de tabla básica HTML
 Combinar celdas de una tabla
Atributo Valor Descripción
colspan número Número de columnas que la celda abarcará.
rowspan número Número de filas que la celda abarcará.

headers ids Id de los elementos <th> con los que tiene relación la celda.

scope (solo <th>) row La cabecera se aplica a alguna de las filas adyacentes.

col La cabecera se aplica a alguna de las columnas adyacentes.

rowgroup La cabecera se aplica a todas las celdas restantes de la fila.

colgroup La cabecera se aplica a todas las celdas restantes de la columna.

auto La cabecera se aplica a las celdas de forma automática. 4

Ejemplo de combinar celdas
Ejemplo CSS para tablas
Celdas de encabezado
Etiquetas de organización de tablas

Etiqueta Descripción
Etiqueta contenedora de la cabecera de la tabla.
<thead>
Parte superior de la tabla.
Etiqueta contenedora del cuerpo de la tabla.
<tbody>
Parte central de la tabla.
Etiqueta contenedora del pie de la tabla. Parte
<tfoot>
inferior de la tabla.
Establece un título de la tabla,
<caption>
independientemente de su posición.
Ejemplo de organización de tablas
Agrupando columnas de una tabla

Etiqueta Descripción

Etiqueta contenedora de columnas.

<colgroup>
Crea una agrupación de columnas.

Etiqueta que representa a una columna

<col>
de la tabla.
Ejemplo Agrupando columnas
Practica. Realizar las siguientes tablas
en HTML
Practica. Realizar las siguientes tablas
en HTML
Practica. Realizar las siguientes tablas
en HTML