Por una Web con equidad...

Deja que tus ideas se vuelvan realidad a escala global, que tu horizonte laboral se extienda en un tiempo relativamente corto y con una inversión relativamente económica. En una emocionante y gratificante aventura por saber los lenguajes "de programación, ...", tan reales y útiles actualmente como un segundo idioma lo es a alguien "tradicionalmente" bilingüe. Con los contenidos temáticos que publicare, sobre HTML, CSS, Ruby, Java, PHP, SQL, C#, ... Novedades, noticias y tendencias.

domingo, 19 de marzo de 2017

HTML y las rutas de archivo

Tutorial de HTML y principalmente su version 5

Rutas de archivo

Ruta	Descripcion
<img src="foto.jpg">	El archivo foto.jpg esta ubicado en la misma carpeta que la pagina web actual
<img src="imagenes/foto.jpg">	El archivo foto.jpg esta ubicado en la carpeta 'imagenes', la cual esta alojada en la carpeta actual
<img src="/imagenes/foto.jpg">	El archivo foto.jpg esta ubicado en la carpeta 'imagenes', la cual esta alojada en la raiz del sitio web actual
<img src="../foto.jpg">	El archivo foto.jpg esta ubicado en la carpeta que aloja a la carpeta actual

Rutas de archivo

Una ruta de archivo describe la ubicación de un archivo dentro de la estructura de carpetas de un sitio web.

Las rutas de archivo son usadas cuando se quieren enlazar archivos externos a la página, archivos como:

Otra página Web
Una imagen
Una hoja de estilo
Un guion JavaScript

Rutas de archivo absolutas

Una ruta de archivo absoluta es la URL completa hacia un archivo en la Internet:

Rutas de archivo relativas

Una ruta de archivo relativa toma en cuenta la ubicación de la página web actual para describir/trazar el camino hacia un archivo local.

Abajo, la ruta de archivo apunta a un archivo de la carpeta ‘ciencia’, que está ubicada en la raíz del presente sitio web:

En el siguiente ejemplo la ruta de archivo apunta a un archivo de la carpeta ‘reptiles’, que está ubicada en la carpeta actual:

A continuación, la ruta de archivo apunta a un archivo de la carpeta ‘espacio’, que está ubicada en la carpeta que aloja la carpeta actual:

Rutas de archivo absolutas o relativas?

Lo mejor es usar rutas de archivo relativas (siempre que sea posible).

Al usar rutas de archivo relativas, tus páginas web no estarán atadas a tu presente URL base (la parte constante en la barra de direcciones de tu navegador web).

Consideremos el área educativa del sitio web ficticio "www.ejemplo.com", específicamente su tutorial de HTML:

Al acceder dicho tutorial identificaremos en la barra de direcciones de nuestro navegador web "https://www.ejemplo.com/Capacitacion/HTML/" como sección base.

"CSS/introducción.html" o "JavaScript/introducción.html", dependiendo del subtema que estemos leyendo, como ruta luego de la base.

Ahora bien la base podría cambiar a "https://www.ejemplo.com/Fundacion/Capacitacion/HTML/". Dejando inservible cualquier enlace del tutorial que use una URL absoluta innecesariamente.

En resumen, evitar esta mala práctica hará que todos los enlaces funcionen. Pese a cambios en la estructura del sitio web.

Los enlaces funcionaran en tu dominio público actual (www.ejemplo.com) o en tus dominios públicos futuros (www.OtroMejor.com). Incluso en tu propio computador (que por cierto, su nombre de equipo es ‘localhost’ - nombre que se descompone al español como equipo local. Para probar internamente tu rol de servidor, cuando el mismo computador tiene instalado software de servidor, empleas este de la siguiente manera, ‘https://localhost’ en la barra de direcciones de tu navegador web).

viernes, 17 de marzo de 2017

Para el lenguaje HTML, está el lenguaje JavaScript

Tutorial de HTML y principalmente su version 5

Para el lenguaje HTML, está el lenguaje JavaScript

El lenguaje JavaScript hace que las paginas HTML sean más dinámicas e interactivas.

Ejemplo:

<!DOCTYPE html>
<html>
<body>

<h1>Mi Primer ejemplo con JavaScript</h1>

<button type="button"
onclick="document.getElementById('prueba').innerHTML = Date()">
Cliqueame para mostrar la Fecha y la Hora.</button>

<p id="prueba"></p>

</body>
</html>

Expliquemos parte del ejemplo de arriba:

La etiqueta HTML <button> se usa para definir un botón accionable, el atributo type indica el tipo de botón que se desea, el atributo onclick indica que hacer cuando el botón sea clicado, en este lo que se ha de hacer esta especificado por document.getElementById(‘prueba’).innerHTML=Date(), donde document es nuestro documento HTML, getElementById es la acción de llamar o traer un elemento HTML usando su identificador (que para el elemento del ejemplo es ‘prueba’), innerHTML nos permite acceder al interior del elemento HTML donde puede o no haber contenido (html interno), para realizar una operación de escritura o lectura. En este caso, para escribir/asignar texto, específicamente la fecha actual con la instrucción Date() que obtiene y devuelve el tiempo corriente.

Ahora el producto de la ejecución de este código:

Mi Primer ejemplo con JavaScript

La etiqueta HTML <script>

La etiqueta <script> se usa para definir un archivo de procesamiento por lotes o guion que se ejecutara en el lado del cliente o computador que accede la pagina web. (y para crear este archivo se usa precisamente JavaScript)

El elemento <script> o contiene declaraciones de guionización, o refiere un archivo/guion externo mediante el atributo src.

Los usos comunes que se le dan a JavaScript son: La manipulación de imágenes, la validación de formularios, y el cambio dinámico de contenido.

Para seleccionar un elemento HTML, en JavaScript se usa muy a menudo el método document.getElementById(id).

El siguiente ejemplo con JavaScript, coloca “Hola JavaScript!” adentro de un elemento HTML con identificador “prueba”:

<script>
document.getElementById("prueba").innerHTML = "Hola JavaScript!";
</script>

Nota: Podrás aprender mucho más de JavaScript en nuestra futura guía acerca de este otro lenguaje.

Una probadita de JavaScript

Acá tienes algunos ejemplos de lo que JavaScript puede hacer:

JavaScript puede hacer cambios al contenido HTML

document.getElementById("prueba").innerHTML = "Hola JavaScript!";

JavaScript puede hacer cambios a los estilos HTML

document.getElementById("prueba").style.fontSize = "25px";
document.getElementById("prueba ").style.color = "red";

Comentario: style en este ejemplo de JavaScript sigue siendo el atributo HTML style y fontSize la misma propiedad CSS usados en temas previos. Cada punto indica que el nivel de jerarquía cambia. Hacia la izquierda este es superior y hacia la derecha es inferior.

JavaScript puede hacer cambios a los atributos HTML

document.getElementById("imagen").src = "paisaje.gif";

La etiqueta HTML <noscript>

La etiqueta <noscript> se usa para proporcionar un contenido alterno a los usuarios que han deshabilitado los guiones o archivos de ejecución por lotes en sus navegadores web o que tienen un navegador que no soporta guiones ejecutados en el lado del cliente o computador del usuario:

<script>
document.getElementById("prueba").innerHTML = "Hola JavaScript!";
</script>

<noscript>Lamentablemente, tu navegador no soporta JavaScript!</noscript>

Etiquetas HTML para JavaScript

Etiqueta	Descripcion
<script>	Define un archivo de ejecución por lotes que se ejecutara en el lado del cliente o equipo del usuario
<noscript>	Define un contenido auxiliar que se mostrara cuando no se permitan guiones ejecutados en el lados del cliente o equipo local

miércoles, 15 de marzo de 2017

Los cuadros o marcos HTML

Tutorial de HTML y principalmente su version 5

Los cuadros o marcos HTML

Un cuadro o marco se usa para desplegar una página web, adentro de otra página web. Esta será un elemento html más en el flujo de contenido de su página anfitriona.

Sintaxis para establecer un marco

Un marco o cuadro HTML se define con la etiqueta <iframe>:

El atributo src específica la URL (dirección web) de la página enmarcada por <iframe>.

El significado de la palabra inglesa “frame” es “cuadro o marco” en español.

Establecer el alto y el ancho de un elemento <iframe>

Usa los atributos height y width para especificar el tamaño del cuadro.

Los valores de estos atributos se especifican en pixeles por defecto, pero también pueden asignarse como un porciento (sea “80%”, o “30%”, o “100%” etc).

Ejemplo:

Remover el borde a un elemento <iframe>

Por defecto, un marco tiene bordes, lo que acentúa su presencia en la página.

Para removérselos, agrega el atributo style y usa la propiedad CSS border de la siguiente manera:

Con CSS, también puedes cambiar el grosor, estilo y color del borde de tu marco HTML:

Utilizar un elemento <iframe> como receptor del contenido vinculado por un enlace

Un cuadro HTML puede ser usado por un enlace como lugar de apertura o despliegue.

El atributo target del enlace HTML debe referir el valor del atributo name del cuadro:

<iframe src="paginaDePruebaActual.htm" name="iframeTambienParaElEnlace"></iframe>

<p>
<a href="https://www.nuevasPaginas.com" target=" iframeTambienParaElEnlace ">Haga clic para ver esta página alterna</a>
</p>

Etiqueta	Descripcion
<iframe>	Define un cuadro o marco adentro de una página web

El atributo HTML class

Tutorial de HTML y principalmente su version 5

El atributo HTML class

El atributo HTML class hace posible definir estilos compartidos por elementos con el mismo nombre de clase.

Acá tenemos tres elementos <div> que hacen referencia al mismo nombre de clase:

<!DOCTYPE html>
<html>
 <head>
  <style>
  div.ciudades {
    background-color: brown;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
  }
  </style>
 </head>
 <body>
  <div class="ciudades">
   <h2>Guatemala</h2>
   <p>La Ciudad de Guatemala, cuyo nombre oficial es Nueva Guatemala de la Asunción, es la capital y sede de los poderes gubernamentales de la República de Guatemala, así como sede del Parlamento Centroamericano.</p>
  </div>
  <div class="ciudades">
   <h2>San Salvador</h2>
   <p>San Salvador es la capital de la República de El Salvador y la cabecera del departamento y municipio homónimos. Es la mayor ciudad del país desde el punto de vista económico y demográfico, y asiento de las principales industrias y empresas de servicios de El Salvador.</p>
  </div>
  <div class="ciudades">
   <h2>Distrito Central</h2>
   <p>El Distrito Central, es un municipio de Honduras. La ciudad, formada por los antiguos municipios de Tegucigalpa y Comayagüela, es la capital del país, según lo dispuesto en los artículos 8 y 295 de la Constitución. El Distrito Central es uno de los 28 municipios que forman el departamento de Francisco Morazán, uno de los 18 departamentos que juntos poseen los 298 municipios que conforman la República.</p>
  </div>
 </body>
</html>

Y acá el mismo código pero ahora ejecutado:

Guatemala

La Ciudad de Guatemala, cuyo nombre oficial es Nueva Guatemala de la Asunción, es la capital y sede de los poderes gubernamentales de la República de Guatemala, así como sede del Parlamento Centroamericano.

San Salvador

San Salvador es la capital de la República de El Salvador y la cabecera del departamento y municipio homónimos. Es la mayor ciudad del país desde el punto de vista económico y demográfico, y asiento de las principales industrias y empresas de servicios de El Salvador.

Distrito Central

El Distrito Central, es un municipio de Honduras. La ciudad, formada por los antiguos municipios de Tegucigalpa y Comayagüela, es la capital del país, según lo dispuesto en los artículos 8 y 295 de la Constitución. El Distrito Central es uno de los 28 municipios que forman el departamento de Francisco Morazán, uno de los 18 departamentos que juntos poseen los 298 municipios que conforman la República.

Usando el atributo class en elementos inline (en linea)

El atributo HTML class también puede ser usado para los elementos inline:

<!DOCTYPE html>
<html>
<head>
<style>
span.clave {
    font-size: 120%;
    color: red;
}
</style>
</head>
<body>

<h1>Mi <span class="clave">Mejor</span> Encabezado</h1>
<p>Este es un texto <span class="clave">importante</span>.</p>

</body>
</html>

martes, 14 de marzo de 2017

Elementos html de Bloque y en Linea

Tutorial de HTML y principalmente su version 5

Elementos HTML de bloque y en linea

Cada elemento HTML tiene un valor de visualización por defecto dependiendo su tipo. El valor de visualización por defecto para la mayoría de los elementos es "de bloque" (block) o "en línea" (inline). Vea el contenido extra del tema anterior.

Elementos a nivel de bloque

Un elemento a nivel de bloque siempre empieza en una línea nueva y ocupa todo el ancho disponible (se extiende a la izquierda y la derecha tanto como puede).

El elemento <div> es un elemento a nivel de bloque.

Ejemplos de elementos a nivel de bloque:

<div>
<h1> - <h6>
<p>
<form>

El elemento <div>

El elemento <div> se usa a menudo como un contenedor para otros elementos HTML.

El elemento <div> no requiere atributo alguno, sin embargo style y class le son comunes.

Cuando se usa en conjunto con CSS, el elemento <div> puede ser usado para estilizar bloques de contenido:

<div style="background-color:black;color:white;padding:20px;">
 <h2>Guatemala</h2>
 <p>La Ciudad de Guatemala, cuyo nombre oficial es Nueva Guatemala de la Asunción, es la capital y sede de los poderes gubernamentales de la República de Guatemala, así como sede del Parlamento Centroamericano.</p>
</div>

Elementos en linea

Un elemento en línea no empieza en una línea nueva y solo ocupa el ancho necesario.

Este es un elemento <span> en línea dentro de un párrafo.

Ejemplos de elementos en línea:

<span>
<a>
<img>

El elemento <span>

El elemento <span> se usa a menudo como un contenedor para parte de algún texto.

El elemento <span> no requiere atributo alguno, sin embargo style y class le son comunes.

Cuando se usa en conjunto con CSS, el elemento <span> puede usarse para estilizar partes del texto:

<h1>Mi <span style="color:red">Mas Importante</span> Encabezado</h1>

Resumen de lo aprendido:

Etiquetas HTML de agrupamiento

Etiqueta	Descripción
<div>	Define una sección (a nivel de bloque) en un documento
<span>	Define una sección (en linea) en un documento

lunes, 13 de marzo de 2017

Usando Listas HTML mas allá de lo basico

Tutorial de HTML y principalmente su version 5

Listas anidadas

Una lista puede ser anidada dentro de otra lista:

<ul>
  <li>Chocolate</li>
  <li>Te
    <ul>
      <li>te negro</li>
      <li>te verde</li>
    </ul>
  </li>
  <li>Leche</li>
</ul>

Nota: los ítems de una lista pueden contener una lista nueva, y otros elementos HTML, como imágenes y enlaces, etc.

Listas horizontales

Las listas HTML pueden ser estilizadas de varias maneras distintas con CSS.

Una de estas maneras, que es popular entre la comunidad, es desplegarlas horizontalmente, para crear menús:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: cyan;
}

li {
    float: left;
    background-color: green;
}

li a {
    display: block;
    color: red;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: grey;
}
</style>
</head>
<body>
<ul>
  <li><a href="#inicio">Inicio</a></li>
  <li><a href="#noticias">Noticias</a></li>
  <li><a href="#contacto">Contacto</a></li>
  <li><a href="#nosotros">Nosotros</a></li>
</ul>
</body>
</html>

Expliquemos parte del ejemplo

La propiedad CSS overflow para el elemento HTML <ul>:

La propiedad CSS overflow significa exceso o excedente, y se refiere a cuando un elemento contenido excede al elemento que lo enmarca. Solo funciona en elementos de bloque (reservan todo el ancho, para quedar “apilado” sobre el siguiente elemento como un bloque, e insertan un salto de línea después de su aparición, pudiéndose modificar el ancho aun se respetara el salto de “línea” y la siguiente línea no reservada albergara al próximo elemento) que tengan una altura definida (no necesariamente, vea adelante).

El elemento body en las páginas web que visitamos es un gran ejemplo del uso de esta propiedad CSS.

La propiedad CSS float para los elementos HTML <li>:

Cuando la propiedad CSS float (vea, Usos adicionales de una Imagen HTML, función y estética) de los elementos contenidos esta en uso y la altura del contenedor o recuadro “está o no fijada”, entonces la propiedad CSS overflow del contenedor puede ser también empleada (si hay necesidad). Aunque la lógica normal cambiara un poco, esto se notara especialmente cuando la altura no esté definida y no haya contenido textual en el elemento, como en el ejemplo de arriba que seguimos explicando a continuación:

(Antes de todo usa la propiedad CSS border para colocarle bordes al contenedor y apreciar el efecto)

Otro valor para la propiedad CSS overflow es ‘ visible ’, que no se emplea en el ejemplo pero que trataremos por contraste:

Por ejemplo, en el código de arriba, el valor CSS visible (en español, visible, la opción por defecto que deja a la vista el excedente) como sustituto del valor CSS hidden, el valor actual, mostraría o dejaría visibles los elementos contenidos cuya propiedad CSS float está en uso, lo cual hace que califiquen como excedente al propiciar el colapso del borde inferior del contenedor con el superior del mismo, pues ya no hay nada contenido en los renglones del interlineado, sino mas bien sobre estos (es decir, ajeno a estos), dado el efecto de esta última, que los abstrae/sustrae de este interlineado imaginario de fondo. Dando la apariencia de que el contenedor se esfumo sin embargo esta allí arriba, con el contenido flotante y además ahora excedente luego de su borde superior, y pasando en cima de su borde inferior (siempre hablando del contenedor).

El valor CSS hidden de la propiedad CSS overflow, mencionada arriba:

Pero el valor CSS actual hidden muestra o deja a la vista los elementos contenidos cuya propiedad CSS float está en uso y que calificarían como excedente en el caso anterior, ahora NO como tal, sino como el contenido que no excede al contenedor, a pesar del efecto de float. Ya que en el ejemplo los elementos <li>, con la peculiar propiedad CSS float en uso, también son los únicos (y peculiares por float), elementos-hijo dentro de su elemento-padre <ul>. Por lo cual los afectados por float, recurriendo al sentido común, se consideran normales bajo estas circunstancias, pues de lo contrario el contenido flotante seria ocultado del usuario de la página web aun cuando la intención sea el exponerlo.

El valor CSS hidden significa oculto, e indica que las o la sección excedente se ocultara. En cuanto a esto, recuerda también lo anterior.

Además la propiedad CSS float, modifica, sin mayor relevancia, el efecto normal de la otra propiedad CSS display (el como se muestra/aparece o comporta un elemento: block (como bloque o apilado), inline (en línea) etcétera).

En el ejemplo, se usa como sustituto el valor block para la propiedad CSS display de los elementos inline <a> (que son los enlaces), para que el efecto de la propiedad CSS padding de los mismos sea enteramente visible. Pues de un elemento inline solo se toma en cuenta su sección horizontal de contenido, que es según el interlineado ‘imaginario’ de fondo (el cual es, podríamos decir bastante dinámico). Por lo que no se vería el resto del área del elemento (lo que añade padding) debido al valor hidden de la propiedad CSS overflow del contenedor principal <ul>.

(Hay algunas otras consideraciones pero son progresivas a estas ideas generales)

Si se usa “display: inline” en vez de “display: block”, la apariencia de botón o menú estilizado fácilmente distinguible, gracias al relleno o espacio que acomoda la propiedad CSS padding, se perdería. Ya que “inline” solo considera la sección media del elemento, en este caso <a>. Sección (horizontal, en el caso de un elemento inline) verticalmente equivalente a la altura por defecto (o la que hayamos fijado) para el espacio entre líneas o renglones, que alojara contenido textual y/o otros elementos HTML (siendo estos dos últimos, los que al fin de cuentas interactúan con y determinan el interlineado), excluyendo así de las consideraciones el espacio extra de arriba y abajo que añade la propiedad padding al elemento, aunque el elemento que lo contiene sea ‘block o apilado’ pues este no reconoce que su elemento-hijo de quien sabe es ‘inline o en linea’ está excediendo el espacio entre los renglones o líneas que le delimitan su participación o aporte infovisual dentro de la pagina según su tipo o valor para la propiedad CSS display (la línea o renglón inferior les alinea a menos que la propiedad float este activa en cuyo caso los elementos se alinean a la superior de la líneas o renglones (NO confundir con bordes del elemento)), volviéndose este un excedente tanto para el elemento <li> como para <ul>, el cual tiene en uso su propiedad overflow con el valor hidden que ocultara dicho exceso.

(De nuevo, hay algunas otras consideraciones pero son progresivas a estas ideas generales)

Resumen de lo aprendido:

Usa el elemento HTML <ul> para definir un lista sin orden
Usa la propiedad CSS list-style-type para definir la señal que acompañara a los ítems de una lista sin orden
Usa el elemento HTML <ol> para definir una lista con orden
Usa el atributo HTML type para definir el tipo de ‘numeración’ que se empleara en una lista con orden
Usa el elemento HTML <li> para definir un ítem de la lista
Usa el elemento HTML <dl> para definir una lista de descripciones
Usa el elemento HTML <dt> para definir el termino a describir
Usa el elemento HTML <dd> para definir la descripción de un término en una lista de descripciones
Una lista puede ser anidada dentro de otra lista
Los ítems de una lista pueden contener otros elementos HMTL
Usa código CSS para mostrar horizontalmente una lista: float:left, float:right, o display:inline

Listas HTML

Tutorial de HTML y principalmente su version 5

Listas

Ejemplo de una lista HTML:

una lista sin orden

item
item
item
item

una lista con orden

primer item
segundo item
tercer item
cuarto item

Lista sin orden

Una lista sin orden empieza con la etiqueta <ul>. Cada ítem de la lista empieza con la etiqueta <li>.

Los ítems de la lista serán señalados con viñetas (pequeños círculos negros) por defecto:

<ul>
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ul>

Elegir una señal para los ítems de una lista

La propiedad CSS list-style-type se usa para definir el estilo de señal para los ítems de una lista:

Ejemplo - disco:

<ul style="list-style-type:disc">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ul>

Ejemplo – circulo:

<ul style="list-style-type:circle">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ul>

Ejemplo – cuadrado:

<ul style="list-style-type:square">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ul>

Ejemplo – nada:

<ul style="list-style-type:none">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ul>

Listas con orden

Una lista con orden empieza con la etiqueta <ol>. Cada ítem de la lista empieza con la etiqueta <li>.

Los ítems de la lista serán señalados con números por defecto:

<ol>
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

El atributo type

El atributo type de la etiqueta <ol>, define el tipo de señal para los ítems de la lista:

Números:

<ol type="1">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

Letras mayúsculas:

<ol type="A">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

Letras minúsculas:

<ol type="a">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

Números romanos mayúsculos:

<ol type="I">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

Números romanos minúsculos:

<ol type="i">
  <li>Chocolate</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

Listas de descripciones

HTML también soporta las listas de descripciones.

Una lista de descripciones es una lista de términos, con una descripción de cada uno de ellos.

La etiqueta <dl> define la lista de descripciones, la etiqueta <dt> define el termino (nombre) y la etiqueta <dd> lo describe:

<dl>
  <dt>Chocolate</dt>
  <dd>- bebida hecha a base de cacao</dd>
  <dt>Leche</dt>
  <dd>- liquido de origen animal para consumo humano</dd>
</dl>

miércoles, 1 de marzo de 2017

Elementos de Tabla HTML útiles, mas un estilo selectivo y mejorado

Tutorial de HTML y principalmente su version 5

CONTINUACIÓN...

Alinear los encabezados de tabla hacia la izquierda

Por defecto, los encabezados de tabla están centrados y en negrita.

Para alinear los encabezados de tabla hacia la izquierda, usa la propiedad CSS text-align:

th {
 text-align: left;
}

Celdas que abarcan varias columnas

Para hacer que una celda abarque más de una columna, usa el atributo HTML colspan:

<table style="width:100%">
 <tr>
  <th>Nombre</th>
  <th colspan="2">Telefono</th>
 </tr>
 <tr>
  <td>Luis Giron</td>
  <td>54571654</td>
  <td>65574855</td>
 </tr>
</table>

Celdas que abarcan varias filas

Para hacer que una celda abarque mas de una fila, usa el atributo HTML rowspan:

<table style="width:100%">
 <tr>
  <th>Nombre:</th>
  <td>Luis Giron</td>
 </tr>
 <tr>
  <th rowspan="2">Telefono:</th>
  <td>12583354</td>
 </tr>
 <tr>
  <td>55657523</td>
 </tr>
</table>

Añadiendo un titulo a la tabla

Para añadir un titulo a una tabla, usa la etiqueta HTML <caption>:

<table style="width:100%">
 <caption>Ahorro mensual</caption>
 <tr>
   <th>Mes</th>
   <th>Ahorro</th>
 </tr>
 <tr>
   <td>Enero</td>
   <td>Q100</td>
 </tr>
 <tr>
   <td>Febrero</td>
   <td>Q50</td>
 </tr>
</table>

Nota: la etiqueta <caption> debe ser insertada inmediatamente después de la etiqueta <table>.

Un estilo especial para una tabla puntual

Para definir un estilo especial para una tabla especial, añade el atributo id a la tabla:

<table id="t01">
 <tr>
   <th>Nombre</th>
   <th>Apellido</th> 
   <th>Edad</th>
 </tr>
 <tr>
   <td>Eva</td>
   <td>Jaramillo</td> 
   <td>94</td>
 </tr>
</table>

Ahora ya puedes definir un estilo especial para esta tabla:

table#t01 {
 width: 100%; 
 background-color: #f1f1c1;
}

O uno especialmente detallado:

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;
}

Donde:

table#t01 tr:nth-child(even)

Indica que le vamos a aplicar cierto estilo solo a las filas o elementos <tr> pares (even) de uno de los elementos <table>, con id o identificacion t01.

En el seleccionador CSS nth-child(), nth quiere decir alguno de los números ordinales, por ejemplo primero, sexto, o noveno. La n es cualquiera de estos y th es la terminación en ingles, por lo general, del nombre escrito de los mismos. Luego child es hijo o elemento contenido por otro que sería el padre o contenedor. Entonces dentro del paréntesis colocaremos el valor que corresponde a la posición del elemento-hijo que deseamos estilizar, sea el valor un numero, una formula, o un palabra clave como ‘even’ que quiere decir ‘par’.

Y:

table#t01 tr:nth-child(odd)

Es lo mismo de arriba, y en este caso la palabra clave que se utiliza es ‘odd’ que quiere decir ‘impar’. Las filas impares tendrán el estilo que se especifique.

Resumen de lo aprendido:

Usa el elemento HTML <table> para definir una tabla
Usa el elemento HTML <tr> para definir una fila en la tabla
Usa el elemento <td> para definir un dato/celda en la tabla
Usa el elemento HTML <th> para definir un encabezado en la tabla
Usa el elemento HTML <caption> para definir un titulo para la tabla
Usa la propiedad CSS border para definir el estilo de borde a usar
Usa la propiedad CSS border-collapse para colapsar o unir los bordes cercanos
Usa la propiedad CSS padding para añadir algo de relleno (espacio entre el borde y el texto) a las celdas
Usa la propiedad CSS text-align para alinear el texto en la celda
Usa la propiedad CSS border-spacing para establecer el espacio entre bordes cercanos
Usa el atributo HTML colspan para hacer que una celda abarque varias columnas
Usa el atributo HTML rowspan para hacer que una celda abarque varias filas
Usa el atributo HTML id para diferenciar de modo único una tabla

Etiqueta	Descripcion
<table>	define una tabla
<th>	define un celda de cabecera para la tabla
<tr>	define una fila en la tabla
<td>	define una celda en la tabla
<caption>	define un titulo para la tabla

fin de tablas, a continuación mas temas...

Una Tabla en HTML con un estilo funcional

Tutorial de HTML y principalmente su version 5

Tablas

Ejemplo de una tabla en HTML:

Compañia	Contacto	Pais
Minion	Luis Dardon	Nicaragua
Pritt	Julia Roldan	Canada
Goba	Estuardo Perez	España
Voodoo	Maria Reinerr	Alemania
Sccott	Jose Feliciano	Inglaterra
Bri	Lissy Aquino	Suecia

Definiendo una tabla en HTML

Una tabla en HTML se define con la etiqueta <table>.

Cada fila de la tabla se define con la etiqueta <tr>. Un encabezado dentro de la tabla se define con la etiqueta <th>. Por defecto, los encabezados de una tabla están centrados y en negrita. Una celda o un dato se define con la etiqueta <td> .

Ejemplo:

<table style="width:100%">
 <tr>
  <th>Nombre</th>
  <th>Apellido</th> 
  <th>Edad</th>
 </tr>
 <tr>
  <td>Jorge</td>
  <td>Juarez</td> 
  <td>50</td>
 </tr>
 <tr>
  <td>Eva</td>
  <td>Revolorio</td> 
  <td>94</td>
 </tr>
</table>

Nota: los elementos <td> son los contenedores de datos de la tabla. Pueden contener todo tipo de elementos HTML; texto, imágenes, listas, otras tablas, etc.

Añadiendo bordes a la tabla

Si no especificas un borde para la tabla, será mostrada sin bordes.

Un borde se establece usando la propiedad CSS border:

table, th, td {
 border: 1px solid black;
}

Recuerda que debes aplicar el borde tanto a la tabla como a las celdas de la tabla.

Bordes unidos o colapsados

Si deseas que los bordes cercanos se muestren como uno solo, añade la propiedad CSS border-collapse:

table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}

Añadiendo espacio entre bordes cercanos

El espaciamiento entre bordes podríamos decir que especifica el espacio que habrá desde una celda a otra.

Para establecer el espaciado de la tabla, usa la propiedad CSS border-spacing:

table {
 border-spacing: 5px;
}

nota: si la tabla tiene los bordes colapsados o unidos, la propiedad border-spacing no tiene ningún efecto.

Añadiendo un acolchado o relleno dentro de las celdas

El acolchado o relleno de celda especifica el espacio entre el contenido de la celda y sus bordes.

Si no especificas un relleno, las celdas de la tabla se mostraran sin uno.

Para establecer un relleno, usa la propiedad CSS padding:

th, td {
 padding: 15px;
}