HTML5 y CSS3 pt. 3: Formularios y Tablas 06

tags: table, tr, td, thead, tbody, th, tfoot. y estilos. Fin 06.

004_primeras_paginas/README.md

@@ -294,5 +294,11 @@ p.test { color: magenta; }
 
 - Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo.
 - Descripción de imagenes `alt="Descripción de imagen"`.
-- Clase css *enviar* para input submit "Enviar Formulario" [contacto](./html_css_parte3/contacto.html#L63).
-- Propiedades: cursor (pointer), transition, transform (scale, rotate).
+- Clase css *enviar* para input submit "Enviar Formulario"
+[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
+

004_primeras_paginas/html_css_parte3/contacto.html

@@ -62,6 +62,30 @@
                 </label>
                 <input type="submit" class="enviar" value="Enviar Formulario"/>
             </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>
         <footer>
             <img src="./imagenes/logo-blanco.png" alt="logo Barbería Alura">

004_primeras_paginas/html_css_parte3/style.css

@@ -139,6 +139,21 @@ form label, form legend {
     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
 form p {
     color: blue;