Scribd
Cargar
28 vistas3 páginas

02

El documento proporciona instrucciones sobre cómo crear y estilizar tablas en HTML, incluyendo el uso de etiquetas como <table>, <tr>, <td>, y <th>. Se explican propiedades de estilo como bordes, colapsar bordes, y ajuste de ancho y color de fondo. Además, se incluyen ejemplos de código que ilustran la creación de tablas con diferentes configuraciones y estilos.

Cargado por

Marilyn Rivera
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
28 vistas3 páginas

02

El documento proporciona instrucciones sobre cómo crear y estilizar tablas en HTML, incluyendo el uso de etiquetas como <table>, <tr>, <td>, y <th>. Se explican propiedades de estilo como bordes, colapsar bordes, y ajuste de ancho y color de fondo. Además, se incluyen ejemplos de código que ilustran la creación de tablas con diferentes configuraciones y estilos.

Cargado por

Marilyn Rivera
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd

CREAR TABLAS

<table>
...
</table>

Dentro de una tabla:


Fila -
<tr>
...
</tr>

Columna -
<td> </td>

Encabezado / Poner negrita y centrar a los demas. Para resaltar -


<th> </th>

Usando STYLE:

border: 1px solid black; = Significa borde general para una tabla, su grosor

border-collapse: collapse; = Para retirar el borde general para tablas con borde ya
puesto con un border

<table style="float:right"> = Para que una tabla se vea flotando hacia un lado si
hay texto o no en la pagina

<table style="background-color: -El color- "> = Darle color de fondo a la tabla

<table width: 100px> =

td {
padding: 60px; = Esto significa una distancia vertical de tabla, expandirla
}

<table style="width: 200px"> = Ponerle un ancho a la tabla

<table>
<caption> -Titulo personal para una tabla- </caption>
----------------------------------------------------------------

<th colspan = "2">...</th> para separar seccion horizontal de arriba abajo entre 2
celdas
<th rowspan = "2">...</th> para separar seccion verticar de arriba abajo entre 2
celdas

ejemplo 1

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th colspan = "6">ALUMNOS MATRICULADOS</th>
</tr>
<tr>
<td colspan = "3">PRIMER TRIMESTRE</td>
<td colspan = "3">SEGUNDO TRIMESTRE</td>

<tr>
<td>enero</td>
<td>febrero</td>
<td>marzo</td>

<td>abril</td>
<td>mayo</td>
<td>junio</td>
</tr>
</table>
</body>
</html>

ejemplo 2

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<table style="width:100%">
<tr>

<th colspan="8">Primera fila</th>


</tr>
<tr>

<td> CASA </td>


<td> 100 </td>
<td> HOJA </td>
<td> MARCADORES </td>
<td> 200 </td>
<td> 300 </td>

</tr>

<tr>
<th colspan ="4">Semestre uno</th> <th colspan ="4">Semestre dos</th>
</tr>

<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
<td>500</td>
<td>600</td>
<td>700</td>
<td>800</td>
</tr>
<tr>
<th rowspan= "8">futbol</th>
<td>100</td>
<td>200</td>
<th rowspan= "8" clospan = "3">clase</th>
<td>500</td>
<th rowspan= "8">tablas</th>
<td>700</td>
</tr>

<tr>
<td>300</td>
<td>400</td>
<td>600</td>
<td>800</td>
</tr>

</table>

</body>
</html>

También podría gustarte