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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Ejercicios html sobre listas ordenadas y listas no ordenadas y el uso de los atributos que pueden acompañar una lista. Inlcuye solución.
Aquí encontrarás etiquetas y atributos html obsoletos que deberías borrar de tu mente y mantener únicamente a modo de consulta. ¡Qué horror>
Ejercicio en el que se aplican etiquetas html5 a un documento creado a partir de div e id. Incluye solución.
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
El uso de tablas html es un clásico dentro del mundo web. Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
En esta entrada repasamos las etiquetas html imprescindibles para escribir formularios así como los atributos más importantes de todos.
No hay comentarios