Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Tablas en HTML5

No description
by

Maru Madrigal

on 10 March 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Tablas en HTML5

Semántica
Las tablas se definen con la etiqueta <table>

Las tablas se dividen en filas de tabla con la etiqueta <tr>

Las filas se dividen en informacion de tablas o columnas con la etiqueta <td>

Las filas se pueden expresar con <th> para crear encabezados de tabla.

Gestión de la información
Tablas en HTML5
La informacion de las tablas <td> puede contener: texto, imagenes, listas u otras tablas.
Estilos de las tablas
Lo que se hace actualmente es poner el borde desde CSS.

table, th, td {
border: 1px solid black;
}
Estilos en las tablas
Una tabla con
padding
especifica el espacio entre el contenido de las cuadros y los bordes.

Si no especificas el
padding
, los cuadros se despliegan sin espacio.

Utiliza la propiedad padding en CSS
Encabezados
Los encabezados se definen con la etiqueta <th>

Por defecto todos los navegadores muestran esto con bold y centrado.
Tablas en HTML
Tablas
Atributos de las tablas
Si no especificas un borde para la tabla
se mostrara sin bordes. Para crear un borde
utilizas el atributo border.
<table border="1" style="width:100%">

Recuerda poner bordes tanto a la tabla como a los componentes de la tabla.
th,td {
padding: 15px;
}
Estilos de tablas
Para alinear los encabezados de las tablas hacia la izquierda usa la propiedad CSS
text-align
.

El
border spacing
especifica el espacio entre los cuadros.

Para que los bordes no se vean dobles, es decir para tener un solo borde alrededor usamos la propiedad de CSS
border-collapse
: collapse;


Hay contenido que ocupa mas de una columna o de una fila.
Estilos de tablas
En este caso utilizamos el atributo colspan.
<th colspan="2">Telephone</th>
En el ultimo caso utilizamos el atributo
rowspan.
<th rowspan="2">Telephone:</th>
Estilos de tablas
Para agregar un titulo a la tabla, utilizamos la etiqueta
<caption>

<caption>Monthly savings</caption>
OTROS ESTILOS
EJERCICIOS
http://www.w3schools.com/html/exercise.asp?filename=exercise_tables1

http://www.w3schools.com/html/exercise.asp?filename=exercise_tables2

http://www.w3schools.com/html/exercise.asp?filename=exercise_tables3

http://www.w3schools.com/html/exercise.asp?filename=exercise_tables4

http://www.w3schools.com/html/exercise.asp?filename=exercise_tables5

http://www.w3schools.com/html/exercise.asp?filename=exercise_tables6
Full transcript