Ejercicio html sobre tablas. Etiquetas table, tr, td, colspan, rowspan

12 Feb Ejercicio html sobre tablas. Etiquetas table, tr, td, colspan, rowspan

Publicado a las 07:30h en Tutorial HTML gratuito. Aprende a estructurar tus páginas web., Ejercicios HTML por Francesc Ricart 0 Comentarios

En este ejercicio vamos a aplicar la teoría sobre tablas html explicada en esta entrada.

<table>, <tr>, <td> son algunas de las etiquetas.
colspan =»» , rowspan=»» son los atributos.

Es un ejercicio sencillo pero que ayuda a entender conceptos.

En otro ejercicio trabajaremos <thead>, <tbody>, <tfoot>, <caption>. Pero no en este.

Entremos en materia.

Enunciado

Crea un documento html mediante el cuál se visualize una tabla como la de la imagen.

Para que se vea bonita la tabla añade dentro del <head> del documento html este código.

<style>
        
        table{
            border-collapse: collapse;
        }
        
        td{
            border:1px solid #000;
            padding:25px;
            background-color:#ccc;
        }
        
</style>

Enunciado ejercicio html sobre tablas — Enunciado ejercicio tablas html

Solución del ejercicio

Si usas emmet puede ayudarte este expresión

(tr>td*4)*4

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Solución Ejercicio HTML sobre tablas">
        <meta name="author" content="Francesc Ricart">
        <title>tablas html</title>

    <style>
        
        table{
            border-collapse: collapse;
        }
        
        td{
            border:1px solid #000;
            padding:25px;
            background-color:#ccc;
        }
        
    </style>   

</head>
                       
<body>

<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td rowspan="2">E,I</td>
        <td>F</td>
        <td colspan="2">G,H</td>
    </tr>
    <tr>
        <td>J</td>
        <td rowspan="2">K,O</td>
        <td>L</td>
    </tr>
    <tr>
        <td>M</td>
        <td>N</td>
        <td>P</td>
    </tr>
</table>



</body>
</html>

¡Hola!

Querido lector,

Resiste la tentación del copy pega de otros ejemplos que hayas visto por internet. Es necesario que entiendas bien lo que se está escribiendo en cada momento.

Te animo ahora a investigar sobre etiquetas semánticas para tablas.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Como funcionan los frameset de html. ¡Cuidado que están obsoletos!
El uso de framesets está completamente desaconsejado. Son etiquetas obsoletas. Sin embargo en esta entrada recuperamos su uso y las repasamos. ¡Nunca ...

Mapas de imagen en html
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de ...

Ejercicio html sobre listas anidadas para un menú de navegación
Ejercicio html dónde se práctica como anidar correctamente una lista no ordenada. Esta lista simula un futuro menú de navegación. Incluye solución.

Como hacer espacios en blanco con html
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de...

Corrige los errores que veas en la estructura web | Ejercicios html
Ejercicio html dónde se muestran errores comunes que cometemos al escribir documentos html. Incluye solución.

Espacios en blanco HTML. Practicando con caracteres especiales.
Ejercicio html de nivel básico para practicar con el espacio en blanco de HTML. Incluye solución.

Francesc Ricart

hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi