WebClassTablas
La presente Tabla tiene una presentación característica que está definida entre las etiquetas
<style></style>
Copia, pega en archivo Html y lánza el siguiente Código con el navegador de tu preferencia, se presentará la misma tabla con las características previamente definidas.
<html>
color gris suave como para bordes o con letras blancas #777
color azul suave fondo "#edf2ff"
color azul oscuro para usar con letras blancas #3630a3
La propiedad border-collapse se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2
"fusión" y "separación" (collapse - separated).
el caso collapse significa que los cuadros que rodean el texto se encuentran pegados
| Primer Nombre | Apellido |
|---|---|
| Alfonso | Paz |
| Emmanuel | Guerrero |
Copia, pega en archivo Html y lánza el siguiente Código con el navegador de tu preferencia, se presentará la misma tabla con las características previamente definidas.
<html>
<head>
<title>Style fijo</title>
<head>
<title>Style fijo</title>
<style>
table.tbl { width:400px; border-collapse: collapse; }
.tbl th { border: solid 5px #777; padding: 20px; background: #3630a3; color:white;}
.tbl td { border: solid 3px #800; padding: 5px; background: #edf2ff; color:black;}
</style>
table.tbl { width:400px; border-collapse: collapse; }
.tbl th { border: solid 5px #777; padding: 20px; background: #3630a3; color:white;}
.tbl td { border: solid 3px #800; padding: 5px; background: #edf2ff; color:black;}
</style>
</head>
<body>
<table class="tbl" style=" style="width:400px; border-collapse: collapse; ">
<table class="tbl" style=" style="width:400px; border-collapse: collapse; ">
<thead>
<tr> <th>Primer Nombre</th> <th>Apellido</th> </tr>
</thead>
<tr> <th>Primer Nombre</th> <th>Apellido</th> </tr>
</thead>
<tbody id="mytbody" style="font-style:italic;">
<tr> <td>Alfonso</td> <td>Paz</td> </tr>
<tr> <td>Alfonso</td> <td>Paz</td> </tr>
<tr> <td>Emmanuel</td> <td>Guerrero</td> </tr>
</tbody>
</table>
<body>
</tbody>
</table>
<body>
<html>
La presente Tabla tiene una presentación característica que está definida dentro de las etiquetas
<table style="border-collapse: collapse; width: 400px;">
<thead style="background: rgb(54, 48, 163); border: 5px solid rgb(119, 119, 119); color: white; padding: 20px;">
<tbody id="mytbody" style="background: rgb(237, 242, 255); border: 3px solid rgb(136, 0, 0); color: black; font-style: italic; padding: 5px;">
<Table //es la tabla en general//>
<thead /es el encabezado de la tabla//>
<tbody //es el cuerpo de la tabla//>
tiene el mismo efecto pero se diferencia en que este método utiliza el atributo style=" "
mientras que el otro método se debe definirse en el area
<head></head>
| Primer Nombre | Apellido |
|---|---|
| Alfonso | Paz |
| Emmanuel | Guerrero |
Copia, pega en archivo Html y lánza el siguiente Código con el navegador de tu preferencia, se presentará la misma tabla con las características previamente definidas.
<head>
<title>Style fijo</title>
</head>
<body>
<table style="border-collapse: collapse; width: 400px;">
<thead style="background: rgb(54, 48, 163); border: 5px solid rgb(119, 119, 119); color: white; padding: 20px;">
<tr>
<th>Primer Nombre</th>
<th>Apellido</th>
</tr>
</thead>
<tbody id="mytbody" style="background: rgb(237, 242, 255); border: 3px solid rgb(136, 0, 0); color: black; font-style: italic; padding: 5px;">
<tr>
<td>Alfonso</td>
<td>Paz</td>
</tr>
<tr>
<td>Emmanuel</td>
<td>Guerrero</td>
</tr>
</tbody>
</table><br /><br />
</body>
</html>
Comentarios
Publicar un comentario
Solo compartiendo el conocimiento seremos grandes