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

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