22-Tablas en html

Tablas nos dejan organizar datos en columnas y filas

Compania	Contacto	Pais
Iberia	Juan costa	espana
Repsol	Manolo	espana

...

Definir una tabla HTML

Una tabla consta de celdas que se dispoen en horizontal (filas) y verticalmente (columnas)

Codigo

        <table>
        <tr>
          <th>Empresa</th>
          <th>Contacto</th>
          <th>Pais</th>
        </tr>
        <tr>
          <td>maercedes</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Mercadona</td>
          <td>Francisco Chang</td>
          <td>espana</td>
        </tr>
      </table> 
    

---

Celdas de tabla

td significa datos de tabla

Una celda de una tabla se inicia por la etiqueta <td> y termina con </td>

Todo lo que esta dentro de estas dos etiquetas td son contenido de la celda

Nota: una celda de tabla puede contener todo tipo de elementos HTML: texto, imágenes, listas, enlaces, otras tablas, et

---

Filas de tabla

Las filas de las celdas estan constituidos por la etiqueta <tr> y termina </tr>

Una tabla puede tener las filas que desee

---

Encabezados de tabla

Todas las tablas tienen encabezados

Los encabezados se inician con las seguinte etiqueta <th> y termina con </th>

th significa encabezado de tabla.

ejemplo de codigo

        <table>
        <tr>
          <th>Person 1</th>
          <th>Person 2</th>
          <th>Person 3</th>
        </tr>
        <tr>
          <td>Emil</td>
          <td>Tobias</td>
          <td>Linus</td>
        </tr>
        <tr>
          <td>16</td>
          <td>14</td>
          <td>10</td>
        </tr>
      </table> 
    

---

Cómo agregar un borde

Para agregar un borde en una tabla tenemos que crear un estilo CSS y colocar ese estilo en la cabecera

Si tienes una hoja de estilos, que esta vinculada con el documento y esa hoja ya tiene dicho estilo, entonces no hace falta que lo agreges en la cabecera

Codigo del estilo

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

Column 1	Column 2	Column 3
R1C1	R1C2	R1C3
Item	Item	Item

---

Para evitar que aparezcan bordes duplos tenemos que anadir una propriedad mas al estilo

border-collapse: collapse;

Column 1	Column 2	Column 3
R1C1	R1C2	R1C3
Item	Item	Item

---

Colores de los bordes

en una tabla el borde puede ser del color que queramos, anadindo la propriedad del color al CSS

Ejemplo

Esta es una tabla con border azul, pero la podemos cambiar de color

Column 1	Column 2	Column 3
R1C1	R1C2	R1C3
Item	Item	Item

---

Color del Fondo

Para poner un color al fondo de una tabla tendremos que anadir mas un elemento CSS

background-color: #96D4D4;

ejemplo del estilo css

        table, th, td {
            border: 1px solid white;
            border-collapse: collapse;
          }
          th, td {
            background-color: #4eba58;
          }
    

¿Como se ve?

Column 1	Column 2	Column 3
R1C1	R1C2	R1C3
Item	Item	Item

---

bordes redondos

si nos gusta las tablas con los cantos redondos, usamos una etiqueta de css

Border-radius: ?? px

tabla con cantos redondos de 10px

Column 1	Column 2	Column 3
R1C1	R1C2	R1C3
Item	Item	Item

---

Bordes punteados

Con el estilo border-style y la propriedad que deseamos, creamos la tabla que mas se adapte a nuestros gustos

propriedades de punteados

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

ejemplo de tabla dotted

Column 1	Column 2	Column 3
R1C1	R1C2	R1C3
Item	Item	Item

---

Ir al indice