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

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

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

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

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.