Lecciones
Comenzar
Empezar a aprender
CodeGym /Cursos /Frontend SELF ES /Estilización de tablas

Estilización de tablas

Frontend SELF ES
Nivel 5 , Lección 4
Disponible

9.1 Uso de atributos

La estilización de tablas en HTML puede realizarse de diversas maneras. Una de ellas es el uso de atributos directamente en la etiqueta de la tabla y sus elementos. Aunque los desarrolladores web modernos suelen preferir usar CSS para estilizar, entender los atributos de HTML es útil para una estilización básica.

Atributos principales de la tabla

Atributo border

Define el grosor del borde de la tabla. Generalmente se especifica el valor en píxeles.

HTML
    
      <table border="1">
        <tr>
          <th>Nombre</th>
          <th>Calificación</th>
        </tr>
        <tr>
          <td>Iván</td>
          <td>91</td>
        </tr>
        <tr>
          <td>María </td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Atributo cellpadding:

Define los márgenes internos de las celdas (márgenes dentro de las celdas desde sus bordes).

HTML
    
      <table cellpadding="10">
        <tr>
          <th>Nombre</th>
          <th>Calificación</th>
        </tr>
        <tr>
          <td>Iván</td>
          <td>91</td>
        </tr>
        <tr>
          <td>María</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>
Java webinar

Atributo cellspacing:

Define la distancia entre celdas.

HTML
    
      <table cellspacing="5">
        <tr>
          <th>Nombre</th>
          <th>Calificación</th>
        </tr>
        <tr>
          <td>Iván</td>
          <td>91</td>
        </tr>
        <tr>
          <td>María</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Atributos width y height:

Definen el ancho y la altura de la tabla. Estos atributos también se pueden usar en las etiquetas <td> y <th> para establecer los tamaños de las celdas.

HTML
    
      <table style="text-align: left;" width="100%" height="200">
        <tr>
          <th width="50%">Nombre</th>
          <th width="25%">Proyecto</th>
          <th width="25%">Ciudad</th>
        </tr>
        <tr>
          <td>Alicia</td>
          <td>25</td>
          <td>París</td>
        </tr>
      </table>

Atributo align:

Define la alineación de la tabla en la página (left, right, center).

HTML
    
      <table align="center">
        <tr>
          <th>Nombre</th>
          <th>Calificación</th>
        </tr>
        <tr>
          <td>Iván</td>
          <td>91</td>
        </tr>
        <tr>
          <td>María</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Atributo bgcolor:

Define el color de fondo de la tabla o de las celdas.

HTML
    
      <table bgcolor="#f0f0f0">
        <tr>
          <th>Nombre</th>
          <th>Calificación</th>
        </tr>
        <tr>
          <td>Iván</td>
          <td>91</td>
        </tr>
        <tr>
          <td>María</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

9.2 Atributos para celdas de tabla

Atributos para celdas de tabla

Atributo colspan:

Combina celdas horizontalmente.

HTML
    
      <td colspan="2">Celda combinada</td>

Atributo rowspan:

Combina celdas verticalmente.

HTML
    
      <td rowspan="2">Celda combinada</td>

Atributo align:

Define la alineación horizontal del contenido de la celda (left, right, center).

HTML
    
      <td align="center">Texto centrado</td>

Atributo valign:

Define la alineación vertical del contenido de la celda (top, middle, bottom).

HTML
    
      <td valign="top">Texto en la parte superior</td>

Atributo bgcolor:

Define el color de fondo para la celda.

HTML
    
      <td bgcolor="#ffcc00">Fondo de color</td>

9.3 Ejemplo completo

Ejemplo completo de estilización de tabla con atributos:

HTML
    
      <table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
        <caption>Lista de estudiantes y sus calificaciones</caption>
        <thead bgcolor="#c0c0c0">
          <tr>
            <th align="left">Nombre</th>
            <th align="center">Edad</th>
            <th align="right">Ciudad</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Iván</td>
            <td align="center">30</td>
            <td align="right">Londres</td>
          </tr>
          <tr>
            <td colspan="2" align="center">María y Pedro</td>
            <td align="right">Liverpool</td>
          </tr>
          <tr>
            <td rowspan="2" valign="middle">Ana</td>
            <td>25</td>
            <td>Mánchester</td>
          </tr>
          <tr>
            <td>27</td>
            <td>Leeds</td>
          </tr>
        </tbody>
        <tfoot>
          <td colspan="3" align="center">Fin de la tabla</td>
        </tfoot>
      </table>

Explicación del ejemplo

  • border="1": establece un borde de tabla de 1 píxel de grosor
  • cellpadding="10": establece un margen interno de 10 píxeles para todas las celdas de la tabla
  • cellspacing="5": establece una distancia de 5 píxeles entre las celdas de la tabla
  • width="80%": establece el ancho de la tabla al 80% del ancho del elemento padre
  • align="center": centra la tabla en la página
  • bgcolor="#e0e0e0": establece el color de fondo para la tabla
  • <caption>: añade un título a la tabla
  • <thead> y <tbody>: agrupan los encabezados y el cuerpo de la tabla. El color de fondo para los encabezados se establece usando bgcolor="#c0c0c0"
  • <th> y <td>: se utilizan para definir celdas de encabezado y datos
  • <align> y <valign>: definen la alineación horizontal y vertical del contenido de las celdas
  • <colspan> y <rowspan>: combinan celdas horizontal y verticalmente
Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION