12 Feb 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>
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:
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.
Ejercicio sobre mapa de imagen con areas inertes y ligeramente más complicado que los anteriores. Incluye solución.
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 una misma imagen. A pesar de haber caído en desuso...
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!
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
Ejercicio html dónde practicarás primero con el word de Office y después mediante html el estructurado correcto de los encabezados de un documento web mediante h1, h2 y h3
No Comments