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:
En este ejercicio se recopilan variados errores que observo en mis alumnos de html edición tras edición. ¿Serás capaz de identificar sin hacer trampas todos los fallos?
¿Por qué se escapan los caracteres en html? ¿Que utilidad tiene complicarse con símbolos estraños? ¿Como los usamos? Apuntes de alumno HTML.
Ejercicio html nivel principiante para practicar el uso de las principales etiquetas html de texto. Incluye enunciado y solución.
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Ejercicio html5 dónde transformamos un documento web realizado con capas html . Incluye solución.
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
No Comments