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 Ejercicios HTML, Tutorial HTML gratuito. Aprende a estructurar tus páginas web. por Francesc Ricart 0 Comentarios

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:

Listas HTML. Etiquetas ol, ul, li, dl, dt, dd.
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones....

Anclas html
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...

LibrosWeb ahora es UniWebSidad
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!

Ejercicio html sobre códigos HTML y caracteres especiales
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.

Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?

Ejercicio fácil de creación de tablas html. Incluye solución
Ejercicio básico para practicar como hacer una tabla en html. Etiquetas thead, tboyd, table, tr, th y td. 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