Una Tabla en HTML con un estilo funcional

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