HTML Tablas divisiones iframes

Hyper Text Markup Language
Tema 3: Tablas, divisiones e iframes
© Abril, 2015
Prof. Renny Batista

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-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-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.
<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>.
<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>.
<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>
<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

 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

 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

 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

 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

 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:someone@example.com">
someone@example.com</a>.</p>
</footer>
Abril, 2015 22

 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

 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

 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

Bibliografías
Abril, 2015 26
Eguíluz Pérez, J. Introducción a XHTML. http://www.librosweb.es
2008. Creative Commons reconocimiento no comercial -
sin obra derivada 3.0
W3Schools a web developers site. http://www.w3schools.com

HTML Tablas divisiones iframes

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à HTML Tablas divisiones iframes

Similaire à HTML Tablas divisiones iframes (20)

Plus de Renny Batista

Plus de Renny Batista (10)

Dernier

Dernier (6)

HTML Tablas divisiones iframes