Las Tablas en HTML
Las tablas en HTML utilizan los mismos conceptos de filas,
columnas, cabeceras y títulos que los que se utilizan en
cualquier otro entorno de publicación de documentos:
Abril, 2015 2
Las tablas de HTML puede contener elementos simples,
agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos
complejos.
Las Tablas en HTML
Las tablas se definen con la etiqueta <table>.
Las tablas se dividen en filas con la etiqueta <tr>.
Las filas se dividen en datos de la tabla (columnas) con la etiqueta <td>.
Una fila de la tabla también se puede dividir en títulos de la tabla con el <th> etiqueta.
<table style="width:100%"> <tr> <td>Juan</td> <td>Pérez</td> <td>50</td> </tr> <tr> <td>Eva</td> <td>Mendez</td> <td>34</td> </tr> </table>
Abril, 2015 3
Las Tablas en HTML
Si no se especifica un borde para la tabla, se muestra sin borde.
Un borde se puede agregar utilizando el atributo border:
<table border="1" style="width:100%">
Para añadir bordes, mejor utilice la propiedad border CSS.
table, th, td { border: 1px solid black; }
Si desea que bordes colapsen en uno solo, añada el CSS border-collapse
table, th, td { border: 1px solid black; border-collapse: collapse; }
Abril, 2015 4
Las Tablas: Cell padding
Cell padding (Relleno) especifica el espacio entre el
contenido de la celda y de sus bordes.
Si no especifica un relleno, las celdas de la tabla se
mostrarán sin relleno.
Para establecer el padding en una celda, utilice la
propiedad padding de CSS:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 15px;
}
Abril, 2015 5
Las Tablas: Encabezados
Los encabezados en una tabla se definen con la etiqueta
<th>.
Por defecto, los principales navegadores muestran los
encabezdos de una tabla en negrita y centrados.
<table style="width:100%"> <tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Nota</th>
</tr> <tr>
<td>Juana</td>
<td>Perdomo</td>
<td>18</td>
</tr> </table>
Abril, 2015 6
Las Tablas: Espacios
El border-spacing especifica el espacio entre las células.
Para ajustar el espaciado entre los bordes para una tabla, utilice la propiedad de CSS:
table {
border-spacing: 5px;
}
Abril, 2015 7
Las Tablas: expandir columnas
Para hacer que una celda ocupe más de una columna (expandir), utilice el atributo colspan en la etiqueta <th> o <td>.
<table style="width:100%"> <tr> <th>Nombre</th> <th colspan="2">Teléfono</th> </tr> <tr> <td>Jennifer Lopez</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
Abril, 2015 8
Las Tablas: expandir filas
Para hacer que una celda ocupe más de una fila (expandir), utilice el atributo rowspan en la etiqueta <th> o <td>.
<table style="width:100%"> <tr> <th>Name:</th> <td>Jennifer Lopez</td> </tr> <tr> <th rowspan="2">Teléfono:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
Abril, 2015 9
Las Tablas: Título
Para añadir un título a una tabla, utilice la etiqueta <caption>
<table style="width:100%"> <caption>Ahorro Mensual</caption> <tr> <th>Mes</th> <th>Ahorro Bs.</th> </tr> <tr> <td>Enero</td> <td>1000 Bs.</td> </tr> <tr> <td>Febrero</td> <td>590 Bs.</td> </tr> </table>
Abril, 2015 10
Las Tablas: Estilos
La mayoría de los ejemplos anteriores utilizan un atributo
de estilo (width = "100%") para definir la anchura de cada
tabla.
Esto hace que sea fácil de definir diferentes anchos para
diferentes tablas.
Los estilos <style> en la sección <head>, define un estilo
para todas las tablas en una página.
Para definir un estilo especial para una tabla en especial, añada un atributo id a la etiqueta <table>
Abril, 2015 11
Las Tablas: Estilos
<style> table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black; } </style>
Abril, 2015 12
Las divisiones
El nombre de la etiqueta div tiene su origen en la palabra
división, ya que esta etiqueta define zonas o divisiones dentro de una página HTML.
Abril, 2015 13
Las divisiones
El elemento <div> es un elemento de bloque que se
puede utilizar como un contenedor para otros elementos
HTML.
Debido a que es un elemento de bloque, el navegador
mostrará saltos de línea antes y después de ella.
Cuando se utiliza junto con CSS, el elemento <div> se
puede utilizar para bloques de estilo de contenido.
No es posible diseñar una página web compleja utilizando elementos <div> sin utilizar hojas de estilos CSS.
Abril, 2015 14
Las divisiones: ejemplo
<div style="background-color:black; color:white; padding:20px;"> <h2>Venezuela</h2>
<p>Venezuela, oficialmente denominada República Bolivariana de Venezuela, es un país de América situado en la parte septentrional de América del Sur, constituido por una parte continental y por un gran número de islas pequeñas e islotes en el mar Caribe, cuya capital es la ciudad de Caracas.</p> <p>Tiene una extensión territorial de 916 445 km². El territorio continental limita al norte con el mar Caribe, al oeste con Colombia, al sur con Brasil y por el este con Guyana.</p>
</div>
Abril, 2015 15
Las divisiones: Un maquetado básico
Abril, 2015 16
<html> <head> <title>Pagina de inicio maquetada con CSS</title> </head> <body> <div id="container"> <div id="header"> </div> <div id="navigation"> </div> <div id="content-container"> <div id="content"> </div> <div id="news"> </div> </div> <div id="footer"> </div> </div> </body> </html>
Los elementos semánticos en HTML5
¿Qué son los elementos semánticos?
Un elemento semántico describe claramente su
significado tanto para el navegador y el desarrollador.
Ejemplos de elementos no-semánticos: <div> y <span>
no dicen nada acerca de su contenido.
Ejemplos de elementos semánticos: <form>, <table> y
<img> definen claramente su contenido.
Los elementos semánticos HTML5 son compatibles con
todos los navegadores modernos.
Abril, 2015 17
Los elementos semánticos en HTML5
Muchos sitios web contienen código HTML como: <div id="nav"> <div class="header"> <div id="footer"> para indicar navegación, encabezado y pie de página.
HTML5 ofrece nuevos elementos semánticos para definir las diferentes partes de una página web:
<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>
Abril, 2015 18
Los elementos semánticos en HTML5
El elemento <section> define una sección de un
documento.
De acuerdo con la documentación del W3C HTML5: "Una
sección es una agrupación temática de los contenidos,
por lo general con un título."
La página principal de un sitio Web puede ser dividido en
secciones para la introducción, el contenido y la
información de contacto.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p> </section>
Abril, 2015 19
Los elementos semánticos en HTML5
El elemento <article> especifica contenido independiente,
autónomo.
Un artículo debe tener sentido por sí mismo, y debe ser
posible leerlo de forma independiente del resto del sitio
web.
Ejemplo en los que se puede utilizar un elemento <article>:
Forum post, Blog post, Newspaper article
<article>
<h1>What Does WWF Do?</h1> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>
Abril, 2015 20
Los elementos semánticos en HTML5
El <header> especifica un encabezado de un documento o
sección.
El elemento <header> debe utilizarse como un contenedor para
el contenido introductorio.
Puede haber varios elementos <header> en un solo documento.
El ejemplo siguiente define una cabecera para un artículo:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
Abril, 2015 21
Los elementos semánticos en HTML5
El <footer> especifica un pie de página de un documento o sección.
A elemento <footer> debe contener información sobre su elemento contenedor.
Un pie de página contiene normalmente: el autor de la información del documento, derechos de autor, enlaces a términos de uso, información de contacto, etc.
Puede haber varios elementos <footer> en un solo documento.:
<footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:[email protected]"> [email protected]</a>.</p> </footer>
Abril, 2015 22
Los elementos semánticos en HTML5
El elemento <nav> define un conjunto de vínculos de
navegación.
Este elemento está destinado a bloques de enlaces de
navegación. Sin embargo, no todos los enlaces en un
documento deben estar dentro de un elemento <nav>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Abril, 2015 23
Los elementos semánticos en HTML5
El elemento <aside> define un cierto contenido, aparte de
los contenidos colocados (como una barra lateral).
El contenido del <aside> debe estar relacionado con el
contenido de los alrededores (artículos, etc.)
<p>My family and I visited The Epcot center this summer.</p>
<aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Abril, 2015 24
Los elementos semánticos en HTML5
En los libros y periódicos, es común tener leyendas con
imágenes.
El propósito de una leyenda es añadir una explicación
visual de una imagen.
Con HTML5, las imágenes y leyendas se pueden agrupar en el elemento <figura>
<figure> <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1.-The Pulpit Rock, Norway.</figcaption>
</figure>
Abril, 2015 25
Top Related