Tablas en HTML

GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Tablas en HTML
Una tabla en HTML se define con la etiqueta <table>, cada fila se crea mediante la etiqueta <tr>
(table row), las cabeceras de columna se crean con la etiqueta <th> (table head), por defecto estas
cabeceras están en negritas y centradas. Las celdas se crean con la etiqueta <td> (table data).
Ejemplo de una tabla HTML
El ejemplo de la tabla anterior nos muestra una tabla simple sin bordes, colores o estilos. La única
condición de estilo que presenta es ancho definido de 100%. Las tablas por defecto tiene las
cabeceras centradas y en negritas, las celdas alineadas a la izquierda.
Agregando bordes a tablas

El ejemplo anterior tiene bordes definidos solo para las celdas de cabecera y datos, mas no para la
tabla en sí. Las tablas por defecto se muestran sin bordes, este se define indicándolo en los estilos
del documento.
table, td, th {
border: 1px solid black;
}
En este código se indica que toda la tabla y sus elementos tienen bordes
Vista de una tabla con el estilo anterior con todos sus bordes, dando la impresión de ser dobles.
GERENCIA VIRTUAL
Agrupando bordes a tablas (collapse)

Si deseamos que los bordes se aprecien colapsados, como si fueran uno, solo debemos agregar la
propiedad border-collapse en los estilos.
table, td, th {
border-collapse: collapse;
}
En este código se indica que toda la tabla y sus elementos tienen bordes agrupados o colapsados.
Vista de una tabla con el estilo anterior con todos sus bordes agrupados o colapsados.
Espacio de celdas en tablas (padding)

Para agregar espacio de separación entre el contenido de la celda y su borde (tal como el caso de
los textos) solo debemos utilizar la propiedad padding en los estilos.
td, th {
padding: 10px;
}
En este código se indica que toda la tabla y sus elementos tienen bordes agrupados o colapsados.
Vista de una tabla con el estilo anterior con todos sus bordes agrupados o colapsados.
GERENCIA VIRTUAL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
table {
font-family: arial, sans-serif;
width: 100%;
}
td, th {
border: 1px solid #cccccc;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Tabla HTML</h2>
<table>
<tr>
<th>Compañia</th>
<th>Contacto</th>
<th>Páis</th>
</tr>
<tr>
<td>Gerencia Virtual México</td>
<td>Hernán Alvarado</td>
<td>México</td>
</tr>
<tr>
<td>Gerencia Virtual Venezuela</td>
<td>Manuel Crespo</td>
<td>Venezuela</td>
</tr>
<tr>
<td>Gerencia Virtual USA</td>
<td>Andrés Reaño</td>
<td>USA</td>
</tr>
</table>
</body>
</html>
Código 64.html
GERENCIA VIRTUAL
En el ejemplo anterior pueden observar, en el color de fondo de las celdas una variación alterna,
ello se debe al uso del selector “nth-child()” , el cual especifica un color de fondo para los
elementos hijos del elemento padre (para este caso “even” asigna color de fondo a celdas pares).
Es de hacer notar que el elemento <td> es el contenedor de los datos de la tabla, ellos pueden
contener todos los tipos de elementos HTML; texto, imágenes, listas, otras tablas, etc.
Adicionalmente se le especifico el ancho del 100% de la ventana y el texto se lineo a la izquierda
Alineación izquierda de las cabeceras en tablas HTML

Por defecto las cabeceras de las tablas están en negritas y centradas, para alinear las cabeceras se
utiliza la propiedad de CSS text-align.
th {
text-align: left;
}
En este código se indica que las cabeceras estarán alineadas a la izquierda.
Agregando espacio entre las celdas en tablas HTML

Para establecer el espacio entre celdas de una tabla utilizamos la propiedad border-spacing , si
la tabla tiene asignada la propiedad border-collapse, no tendrá efecto la propiedad border-
spacing.
table {
border-spacing: 5px;
}
En este código se especifica que el espacio entre celdas es de 5 pixeles.
Vista de una tabla con espacio de 5 pixeles entre las celdas.

GERENCIA VIRTUAL
Celdas que abarcan varias columnas en tablas HTML

Para que una celda pueda abarcar más de una columna se utiliza el atributo colspan.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
td, th {
text-align: left;
padding: 5px; }
</style>
</head>
<body>
<h2>Celda que agrupa dos columnas</h2>
<table style="width:100%">
<tr>
<th>Nombre</th>
<th colspan="2">Teléfono</th>
</tr>
<tr>
<td>Luis Ramos</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Código 65.html
GERENCIA VIRTUAL
Celdas que abarcan varias filas en tablas HTML

Para que una celda pueda abarcar más de una columna se utiliza el atributo rowspan.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
td, th {
text-align: left;
padding: 5px; }
</style>
</head>
<body>
<h2>Celda que agrupa dos filas</h2>
<tr>
<th>Nombre</th>
<td>Luis Ramos</td>
</tr>
<tr>
<th rowspan="2">Teléfono</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Código 66.html
GERENCIA VIRTUAL
Agregando títulos (caption) a tablas HTML

Para agregar un título (caption) a una tabla, utilizamos la etiqueta <caption>.
<h2>Ejemplo de título de tabla (caption)</h2>

<caption>Directorio Telefónico</caption>
<tr>
<th>Nombre</th>
<td>Luis Ramos</td>
</tr>
En este código observamos el título “Directorio Telefónico”
Vista de una tabla con título (caption) “Directorio Telefónico”

GERENCIA VIRTUAL
Un estilo especial para una tabla HTML

Para agregar un estilo especial para una tabla en particular agregamos el atributo id.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
td, th {
text-align: left;
padding: 15px;
}
table#t01 {
background-color: #f1f1c1;
}
</style>
</head>
<body>
<h2>Tabla con estilo general</h2>
<table width="100%">
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>López</td>
<td>50</td>
</tr>
</table>
<h2>Tabla con estilo especial</h2>
<table width="100%" id="t01" >
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>López</td>
<td>50</td>
</tr>
</table>
</body>
</html>
Código 67.html
GERENCIA VIRTUAL
Agregando mas estilos a tablas HTML

Existen más elemento de estilos, pero son tema de para un curso de CSS. A continuación un
ejemplo.
<style>
table {
}
td, th {
border: 1px solid #cccccc;
text-align: left;
padding: 8px;
}
tr:nth-child(odd) {
background-color: #99CCFF;
}
tr:nth-child(even) {
background-color: #6699CC;
}
th {
background-color: #003399;
color: #ffffff;
}
</style>
Código de estilo avanzado para tablas, definiendo colores para cabeceras, texto y celdas pares e impares
Vista de una tabla con el código de estilo anterior.

Tablas en HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Tablas en HTML

Caricato da

Copyright:

Formati disponibili

GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Ejemplo de una tabla HTML

Agregando bordes a tablas

Agrupando bordes a tablas (collapse)

Espacio de celdas en tablas (padding)

Alineación izquierda de las cabeceras en tablas HTML

En este código se indica que las cabeceras estarán alineadas a la izquierda.

Agregando espacio entre las celdas en tablas HTML

En este código se especifica que el espacio entre celdas es de 5 pixeles.

Vista de una tabla con espacio de 5 pixeles entre las celdas.

Celdas que abarcan varias columnas en tablas HTML

Celdas que abarcan varias filas en tablas HTML

Agregando títulos (caption) a tablas HTML

<h2>Ejemplo de título de tabla (caption)</h2>

Vista de una tabla con título (caption) “Directorio Telefónico”

Un estilo especial para una tabla HTML

Agregando mas estilos a tablas HTML

Vista de una tabla con el código de estilo anterior.

Potrebbero piacerti anche