En el siguiente link encontraran el código de como crear las tablas anteriores.
El código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>codigos Tablas</title>
<style> <!-- se usa para ponerle bolde a la tabla-->
table,
tr,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption></caption><!--añede un titulo sobre la tabla-->
<tr></tr><!--representa una fila en la tabla-->
<td></td><!--representa una celda de datos en la tabla-->
<th></th> <!--celdas de cabecera, destacar celdas en negrilla-->
<!--agrupar filas entres bloques de estilos-->
<thead></thead><!--agrupa filas e cabecera-->
<tbody></tbody> <!--agrupa filas de cuerpo-->
<tfoot></tfoot> <!--agrupa filas de pie-->
</table>
<p>Tabla 1 </p>
<table><!-- crear tabla -->
<tr><!-- define cada fila de la tabla y encierra todas las columnas -->
<td>A</td> <!-- define cada una de las columnas de las filas, celdas de datos -->
<td rowspan="2">B</td><!-- rowspan Número de filas que ocupa esta celda -->
</tr>
<tr>
<td>C</td>
</tr>
</table>
<p>Tabla 2 </p>
<table>
<tr>
<td colspan="2">B</td><!-- colspan Número de columnas que ocupa esta celda -->
</tr>
<tr>
<td>A</td>
<td>C</td>
</tr>
</table>
<p>Tabla 3 </p>
<table>
<caption>Mi primera tabla</caption><!-- establecer o añade la leyenda o título de una tabla-->
<tr>
<th scope="col">Alumno</th> <!--scope Indica las celdas para las que esta celda será su cabecera,scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columna -->
<th>Nota</th><!-- th indicar que una celda es cabecera de otras celdas.-->
<th>Nota</th>
</tr>
<tr>
<td>Pepe</td>
<td>Pepe</td>
<td>Maria jose</td>
</tr>
<tr>
<th scope="row">TOTAL</th><!--scope="row" indica que esta celda es la cabecera de todas las demás celdas que están en la misma fila -->
<td colspan="2"><strong>207.51</strong></td>
</tr>
</table>
<p>Tabla fusión de columnas</p>
<table>
<!-- fila 1-->
<tr>
<td colspan="3">A</td> <!-- columna 1, ocupa 3 espacios de columnas-->
<td>B</td> <!-- columna 2-->
</tr>
<!-- fila 2-->
<tr>
<td>C</td> <!-- columna 1-->
<td colspan="2">D</td> <!-- columna 2, ocupa dos espacios-->
<td>E</td><!-- columna 3-->
</tr>
<!-- fila 3-->
<tr>
<td colspan="4">F</td><!-- columna 1ocupa 4 espacios-->
</tr>
<!-- fila 4-->
<tr>
<td>G</td><!-- columna 1-->
<td>H</td><!-- columna 2-->
<td>I</td><!-- columna 3-->
<td>J</td><!-- columna 4, total de columnas en este caso-->
</tr>
</table>
</body>
</html
Comentarios
Publicar un comentario