Ejercicio tablas HTML

 Crea un documento HTML con una tabla que contenga lo siguiente:

    1. Columnas: Nombre, Apellidos, Nota final

    2. Con 4 filas rellenas de datos

06 Tablas

 Para crear tablas en nuestro documento HTML usaremos la etiqueta “table”, dentro de esta etiqueta introducimos la etiqueta “tr” que indica la fila, para incluir elementos dentro de cada fila usaremos la etiqueta “td”.

Para diferenciar la cabecera de la tabla podemos usar “th” dentro de su fila marcada por “tr”.

Si queremos que se muestre el borde de la tabla se lo indicaremos dentro de la apertura de la etiqueta “table” incluyendo “border=1”.

Otra propiedad importante como puedes ver en el código siguiente es la propiedad “colspan”, en este caso le indicamos que ocupe 2 columnas.

<!DOCTYPE html>

<html lang="es">

<head>

<title>Tablas</title>

</head>

<body>

<h1>Tablas</h1>

<table border="1">

<tr>

<th>Nombre</th>

<th>Apellidos</th>

</tr>

<tr>

    <td>Jose</td>

    <td>Ojeda</td>

</tr>

<tr>

    <td colspan="2">M Mar</td>    

</tr>

</table>

</body>

</html>

08 Html Css. Tablas y formularios

Vemos en el video como insertar tablas y formularios en nuestra web.

<!DOCTYPE html><html><head><title>Tablas y Formularios</title><meta charset="utf-8"></head><body><!--Cabecera--><header>
</header> <!--Barra navegacion--><nav>
</nav><!--Contenido principal--><section><article><!--Tabla--><table border="1"><caption>Tabla</caption><tr><th>Nombre</th><th>Edad</th></tr><tr><td>Jose</td><td>46</td></tr><tr><td>Mar</td><td>44</td></tr></table><!--Formulario--><form action="webRespuesta.php"><fieldset><legend>Formulario</legend><label for="usuario">Usuario</label><input type="text" name="usuario" autofocus placeholder="Por tu nombre" required><br/><label for="pass">Password</label><input type="password" name="pass" required><br/><label for="email">Email</label><input type="email" name="email" required><br/><button type="submit">Enviar</button></fieldset><fieldset><legend>Otros, pruebas</legend><label for="numero">Numero</label><input type="number" name="numero" min="1" max="80" step="3"><br/><br/><input type="radio" name="radiobutton" value="Radio"><label>Radio</label><br/><input type="checkbox" checked="checked"><label>Check</label><br/><input type="date"><br/><input type="color"><br/></fieldset></form></article></section><!--Complemento lateral--><aside>
</aside><!--Pie de pagina--><footer>
</footer></body></html>

06. CSS Tablas

En este video se ven algunas propiedades de las tablas, que se cambiaran mediante CSS.

El codigo html es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/tablas.css">
<title>
Tablas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<h2>Primera tabla</h2>
<table class="uno">
<caption>Tabla de colores</caption>
<tr><th>Colores</th><th>Numeros</th> </tr>
<tr>
<td>Verde</td>
<td>Uno</td>
</tr>
<tr>
<td>Rojo</td>
<td>Dos</td>
</tr>
<tr>
<td>Amarillo</td>
<td>Tres</td>
</tr>
</table>
<h2>Segunda tabla</h2>
<table class="dos">
<caption>Tabla de colores 2</caption>
<tr><th>Colores</th><th>Numeros</th> </tr>
<tr>
<td>Rosa</td>
<td>Cuatro</td>
</tr>
<tr>
<td>Azul</td>
<td>Cinco</td>
</tr>
<tr>
<td>Celeste</td>
<td></td>
</tr>
</table>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo css es:

/*Comentario de CSS*/
/*selector universal*/
*{
   
}
table{
    border-collapse:separate;
    border-spacing:5px 4px;
   
}
caption {
    caption-side:top;
}
.uno{
    border:1px solid gray;
    width:50%;
    table-layout:auto;
    text-align:center;
}
.dos{
    border:2px solid blue;
    width:75%;
    table-layout:fixed;
    background-color:gray;
    empty-cells:hide;
}

En el video se me paso como ocultar celdas vacias mediante la propiedad empty-cells a la que podemos darle como valor hide para que no se muestren, en el codigo css esta incluido.
Espero os sea util, gracias.