HTML5 y CSS3 pt. 3: Formularios y Tablas 06

tags: table, tr, td, thead, tbody, th, tfoot. y estilos. Fin 06.
This commit is contained in:
devfzn 2023-04-12 18:34:50 -04:00
parent 387de82f06
commit be87960502
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
3 changed files with 47 additions and 2 deletions

View File

@ -294,5 +294,11 @@ p.test { color: magenta; }
- Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo. - Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo.
- Descripción de imagenes `alt="Descripción de imagen"`. - Descripción de imagenes `alt="Descripción de imagen"`.
- Clase css *enviar* para input submit "Enviar Formulario" [contacto](./html_css_parte3/contacto.html#L63). - Clase css *enviar* para input submit "Enviar Formulario"
- Propiedades: cursor (pointer), transition, transform (scale, rotate). [contacto](./html_css_parte3/contacto.html#L63).
- [Propiedades](./html_css_parte3/style.css#L123): cursor (pointer), transition,
transform (scale, rotate).
- [Tablas](./html_css_parte3/contacto.html#L66) y [estilo](./html_css_parte3/style.css#L142).
Final curso HTML5 y CSS parte 3

View File

@ -62,6 +62,30 @@
</label> </label>
<input type="submit" class="enviar" value="Enviar Formulario"/> <input type="submit" class="enviar" value="Enviar Formulario"/>
</form> </form>
<table>
<thead>
<tr>
<th>Días</th>
<th>Horario</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lunes</td>
<td>9h ~ 20h</td>
</tr>
<tr>
<td>Miercoles</td>
<td>9h ~ 20h</td>
</tr>
<tr>
<td>Viernes</td>
<td>9h ~ 20h</td>
</tr>
</tbody>
</table>
</main> </main>
<footer> <footer>
<img src="./imagenes/logo-blanco.png" alt="logo Barbería Alura"> <img src="./imagenes/logo-blanco.png" alt="logo Barbería Alura">

View File

@ -139,6 +139,21 @@ form label, form legend {
transform: scale(1.2) rotate(4deg); transform: scale(1.2) rotate(4deg);
} }
table {
margin: 40px 40px;
}
thead {
background: #046dfc;
color: #f1f1f1;
font-weight: bold;
}
td, th {
border: 1px solid #046dfc;
padding: 8px 15px;
}
/* Usados para observar Jerarquía en CSS /* Usados para observar Jerarquía en CSS
form p { form p {
color: blue; color: blue;