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

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

Print Friendly, PDF & Email
Ejercicio html sobre tablas. Etiquetas table, tr, td, colspan, rowspan
Valora esta entrada
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:

Corrige los errores que veas en la estructura web | Ejercicios html
- 48
Ejercicio html dónde se muestran errores comunes que cometemos al escribir documentos html. Incluye solución.
Errores html típicos que todos cometemos alguna vez
- 56
Cuando nos iniciamos todos solemos cometer errores parecidos. En esta entrada encontrarás un buen repositorio de casos reales en alumnos.
Practicando con listas ordenadas y listas no ordenadas | Ejercicio html
- 46
Ejercicios html sobre listas ordenadas y listas no ordenadas y el uso de los atributos que pueden acompañar una lista. Inlcuye solución.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 61
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Libro digital navegable
- 46
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Ejercicio estructura web mediante capas con div e id
- 62
¿Como crear y organizar capas html en un documento web? En este ejercicio lo harás de 0. Se incluye propuesta de solución. Es un paso previo a html5.
Ejemplo de creación de página web con capas y migración a HTML5
- 1115
El lenguaje de marcas sirve para dotar de estructura y contenido a un documento web. Mediante la etiqueta div veremos un ejemplo de como dotar de estructura a una página web. Y después utilizaremos la...
Ejercicio sobre listas de definiciones html
- 44
Gran excusa para repasar las listas html de definiciones y conceptos de cultura general sobre web e internet. Incluye solución.
Conversión de un xhtml a htm5. Continuación ejercicio capas html.
- 36
Ejercicio en el que se aplican etiquetas html5 a un documento creado a partir de div e id. Incluye solución.
Anclas html
- 598
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.